ready to review

all-product.html

@@ -34,8 +34,8 @@
     
     
         <!-- nav header -->
-        <section id="header">
-            
+        <section id="header" class="header">
+        
             <!-- offrer -->
             <div class="offer bg-pink text-white py-1">
                 <div class="container">
@@ -47,76 +47,5365 @@
 
             <!-- upper nav -->
             <div id="uper-nav" class="bg-white">
-                <div class="container py-1">
-                    <div class="d-flex justify-content-between align-items-center w-100">
+                <div class="container-xl px-2  py-1">
+                    <div class="d-flex justify-content-center justify-content-xl-between align-items-center w-100">
+
+                        <!-- burger menu logo -->
+                        <button class="burger-menu btn me-auto d-block d-xl-none">
+                            <img class="h-100 w-100" src="./images/icon/burger-menu.svg" alt="">
+                        </button>
 
                         <!-- brand logo -->
-                        <div class="brand-logo">
+                        <a class="brand-logo mx-auto mx-xl-0" href="#">
                             <img src="./images/navbar/brand-logo.svg" alt="">
-                        </div>
+                        </a>
+
 
                         <!-- search box -->
-                        <div class="search flex-fill px-5">
-                            <div class="  form-group   position-relative ">
-                                <label for="search-box" class="search-icon position-absolute">
-                                    <img src="./images/icon/search.svg" alt="">
-                                </label>
-                                <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
-                            </div>
+                        <div class="search  flex-fill px-5">
+                            <form action="">
+                                <div class="  form-group position-relative ">
+                                    <label for="search-box" class="search-icon position-absolute">
+                                        <img src="./images/icon/search.svg" alt="">
+                                    </label>
+                                    <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
+                                </div>
+                            </form>
                         </div>
 
+
+
                         <!-- link  -->
                         <div class="link-box d-flex align-items-center">
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+
+
+                            <!-- group -->
+                            <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1" >
                                 <img class="link-icon" src="./images/navbar/group.png" alt="">
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1 text-decoration-none" >
+
+                            <!-- vip points -->
+                            <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1 text-decoration-none" >
                                 <img class="link-icon" src="./images/navbar/face.png" alt="">
                                 <div>
                                     <h4 class="name fw-bold text-nowrap text-black">Hi Human</h4>
                                     <h5 class="fw-bold text-no-wrap text-black">Vip: 0 points</h5>
                                 </div>
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+                        </div>
+                        
+
+                        <!-- link  -->
+                        <div class="link-box d-flex align-items-center ">
+
+                        
+                            <!-- search btn for mobile -->
+                            <button class="btn d-block d-xl-none search-btn-mobile">
+                                <img src="./images/icon/search.svg" alt="">
+                            </button>
+
+                            <!-- message -->
+                            <a href="#" class="link d-none d-xl-flex align-items-center mx-0 mx-lg-1" >
                                 <img class="link-icon" src="./images/navbar/message.png" alt="">
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+
+                            <!-- wishlist -->
+                            <a href="#" class="link d-flex align-items-center mx-0 mx-lg-1" >
                                 <img class="link-icon" src="./images/navbar/heart.png" alt="">
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+
+                            <!-- shoping basket -->
+                            <a href="./checkout.html" class="link d-none d-xl-flex align-items-center  mx-0 mx-lg-1" >
                                 <img class="link-icon" src="./images/navbar/bascket.png" alt="">
                             </a>
+
+                            <button class="btn user-btn-mobile d-block d-xl-none">
+                                <img src="./images/icon/user.svg" alt="">
+                            </button>
                         </div>
 
+
                     </div>
                 </div>
             </div>
 
             <!-- main navigation -->
-            <div class="main-nav bg-black text-white">
-                <div class="container py-2">
-                    <ul class="d-flex align-items-center justify-content-between px-1">
-                        <li>Makeup</li>
-                        <li>Skincare</li>
-                        <li>K beauty</li>
-                        <li>Heir</li>
-                        <li>Man</li>
-                        <li>Baby</li>
-                        <li>Fragnance</li>
-                        <li>Healthcare</li>
-                        <li>Lifestyle</li>
-                        <li>pet</li>
-                        <li>Gifts</li>
-                        <li>Brands</li>
-                        <li>Makeup</li>
-                        <li>
-                            <button class="btn btn-sm btn-pink px-3">Blog</button>
+            <div class="main-nav  bg-black text-white">
+                
+                <div class="container position-relative py-2">
+
+                    <button class="btn d-block d-xl-none ms-auto burger-close-btn">
+                        <img src="./images/icon/cross-icon.svg" alt="">
+                    </button>
+
+                    <ul class=" d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center ps-1 pe-2 ps-xl-0 pe-xl-0 ">
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Makeup
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
                         </li>
-                        <li>
-                            <button class="btn btn-sm btn-orange-vivid px-3">Buy 1 Get 1</button>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Skincare
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    K beauty
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Heir
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Man
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
                         </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Baby
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Fragnace
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Healthcare
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Lifestyle
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Pet
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Gifts
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Brands
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Makeup
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li>
+                            <button class=" btn btn-sm btn-pink mt-3  mt-xl-0 mx-1 px-2">Blog</button>
+                        </li>
+
+                        <li>
+                            <button class="btn btn-sm btn-orange-vivid  mt-3 mt-xl-0  mx-2 px-2 ">Buy 1 Get 1</button>
+                        </li>
+
                         <li>
-                            <button class="btn btn-sm btn-orange-vivid px-3">Sale</button>
+                            <button class="btn btn-sm btn-orange-vivid mt-3 mt-xl-0  mx-2 px-2">Sale</button>
                         </li>
                     </ul>
                 </div>

checkout.html

@@ -30,8 +30,8 @@
     
     
         <!-- nav header -->
-        <section id="header">
-            
+        <section id="header" class="header">
+        
             <!-- offrer -->
             <div class="offer bg-pink text-white py-1">
                 <div class="container">
@@ -43,76 +43,5365 @@
 
             <!-- upper nav -->
             <div id="uper-nav" class="bg-white">
-                <div class="container py-1">
-                    <div class="d-flex justify-content-between align-items-center w-100">
+                <div class="container-xl px-2  py-1">
+                    <div class="d-flex justify-content-center justify-content-xl-between align-items-center w-100">
+
+                        <!-- burger menu logo -->
+                        <button class="burger-menu btn me-auto d-block d-xl-none">
+                            <img class="h-100 w-100" src="./images/icon/burger-menu.svg" alt="">
+                        </button>
 
                         <!-- brand logo -->
-                        <div class="brand-logo">
+                        <a class="brand-logo mx-auto mx-xl-0" href="#">
                             <img src="./images/navbar/brand-logo.svg" alt="">
-                        </div>
+                        </a>
+
 
                         <!-- search box -->
-                        <div class="search flex-fill px-5">
-                            <div class="  form-group   position-relative ">
-                                <label for="search-box" class="search-icon position-absolute">
-                                    <img src="./images/icon/search.svg" alt="">
-                                </label>
-                                <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
-                            </div>
+                        <div class="search  flex-fill px-5">
+                            <form action="">
+                                <div class="  form-group position-relative ">
+                                    <label for="search-box" class="search-icon position-absolute">
+                                        <img src="./images/icon/search.svg" alt="">
+                                    </label>
+                                    <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
+                                </div>
+                            </form>
                         </div>
 
+
+
                         <!-- link  -->
                         <div class="link-box d-flex align-items-center">
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+
+
+                            <!-- group -->
+                            <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1" >
                                 <img class="link-icon" src="./images/navbar/group.png" alt="">
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1 text-decoration-none" >
+
+                            <!-- vip points -->
+                            <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1 text-decoration-none" >
                                 <img class="link-icon" src="./images/navbar/face.png" alt="">
                                 <div>
                                     <h4 class="name fw-bold text-nowrap text-black">Hi Human</h4>
                                     <h5 class="fw-bold text-no-wrap text-black">Vip: 0 points</h5>
                                 </div>
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+                        </div>
+                        
+
+                        <!-- link  -->
+                        <div class="link-box d-flex align-items-center ">
+
+                        
+                            <!-- search btn for mobile -->
+                            <button class="btn d-block d-xl-none search-btn-mobile">
+                                <img src="./images/icon/search.svg" alt="">
+                            </button>
+
+                            <!-- message -->
+                            <a href="#" class="link d-none d-xl-flex align-items-center mx-0 mx-lg-1" >
                                 <img class="link-icon" src="./images/navbar/message.png" alt="">
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+
+                            <!-- wishlist -->
+                            <a href="#" class="link d-flex align-items-center mx-0 mx-lg-1" >
                                 <img class="link-icon" src="./images/navbar/heart.png" alt="">
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+
+                            <!-- shoping basket -->
+                            <a href="./checkout.html" class="link d-none d-xl-flex align-items-center  mx-0 mx-lg-1" >
                                 <img class="link-icon" src="./images/navbar/bascket.png" alt="">
                             </a>
+
+                            <button class="btn user-btn-mobile d-block d-xl-none">
+                                <img src="./images/icon/user.svg" alt="">
+                            </button>
                         </div>
 
+
                     </div>
                 </div>
             </div>
 
             <!-- main navigation -->
-            <div class="main-nav bg-black text-white">
-                <div class="container py-2">
-                    <ul class="d-flex align-items-center justify-content-between px-1">
-                        <li>Makeup</li>
-                        <li>Skincare</li>
-                        <li>K beauty</li>
-                        <li>Heir</li>
-                        <li>Man</li>
-                        <li>Baby</li>
-                        <li>Fragnance</li>
-                        <li>Healthcare</li>
-                        <li>Lifestyle</li>
-                        <li>pet</li>
-                        <li>Gifts</li>
-                        <li>Brands</li>
-                        <li>Makeup</li>
-                        <li>
-                            <button class="btn btn-sm btn-pink px-3">Blog</button>
+            <div class="main-nav  bg-black text-white">
+                
+                <div class="container position-relative py-2">
+
+                    <button class="btn d-block d-xl-none ms-auto burger-close-btn">
+                        <img src="./images/icon/cross-icon.svg" alt="">
+                    </button>
+
+                    <ul class=" d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center ps-1 pe-2 ps-xl-0 pe-xl-0 ">
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Makeup
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
                         </li>
-                        <li>
-                            <button class="btn btn-sm btn-orange-vivid px-3">Buy 1 Get 1</button>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Skincare
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    K beauty
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Heir
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
                         </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Man
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Baby
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Fragnace
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Healthcare
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Lifestyle
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Pet
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Gifts
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Brands
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Makeup
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li>
+                            <button class=" btn btn-sm btn-pink mt-3  mt-xl-0 mx-1 px-2">Blog</button>
+                        </li>
+
+                        <li>
+                            <button class="btn btn-sm btn-orange-vivid  mt-3 mt-xl-0  mx-2 px-2 ">Buy 1 Get 1</button>
+                        </li>
+
                         <li>
-                            <button class="btn btn-sm btn-orange-vivid px-3">Sale</button>
+                            <button class="btn btn-sm btn-orange-vivid mt-3 mt-xl-0  mx-2 px-2">Sale</button>
                         </li>
                     </ul>
                 </div>

css/style.css

@@ -16,6 +16,7 @@
     --violet: #6201AE;
 
     --red-deep: #B21F25;
+    --red-deep-opacity: #b21f24c7;
     --red-light-extra: #FFEBEB;
 
     --blue-light: #EBF4FF;
@@ -25,6 +26,7 @@
     --green-light-extra: #F0FFE0;
 
     --gray: #626262;
+    --gray-opacity: #6262628c;
     --gray-light: #999999;
     --gray-extralight: #C6C6C6;
 
@@ -316,6 +318,8 @@ a {
 
 /* header */
 
+
+
 .header {
     transition: all 2s ease-in-out;
 
@@ -331,6 +335,16 @@ a {
     box-shadow: var(--shadow-product);
 }
 
+
+.header button:focus {
+    border: none !important;
+}
+
+.header button:active {
+    border: none !important;
+}
+
+
 #header .burger-menu img  {
     height: 25px;
     width: 25px;
@@ -363,7 +377,7 @@ a {
 }
 
 #header .main-nav {
-    z-index: 10;
+    z-index: 40;
 }
 
 #header .main-nav button {
@@ -380,18 +394,22 @@ a {
 #header .main-nav .megamenu-parrent .menu-items {
     position: absolute;
     top: 100%;
-    max-width: 100%;
+    left: 0;
+    height: 50vh;
+    width: 100%;
     background: var(--white);
+    margin: 0 auto;
     color: var(--black);
-    padding: 2em;
+    padding: 0;
     display: none;
     z-index: 25;
     box-shadow: var(--shadow-black);
+    overflow-y: auto;
 }
 
 
 
-#header .main-nav .megamenu-parrent .drop-btn img {
+#header .main-nav .megamenu-parrent .collapse-buton img {
     height: 20px;
 }
 
@@ -401,12 +419,72 @@ a {
 }
 
 
+#header .main-nav .megamenu-submenu {
+    color: var(--black);
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+}
+
+#header .main-nav .megamenu-submenu .btn {
+    border-radius: 0 !important;
+    width: 100% !important;
+    color: var(--red-deep) !important;
+    border-bottom: 1px dotted var(--red-deep-opacity) !important;
+    font-size: .9em;
+    font-weight: 600;
+}
+
+#header .main-nav .megamenu-submenu .btn img {
+    height: 18px;
+    width: 18px;
+}
+
+#header .main-nav .megamenu-submenu .nav-items {
+    width: 70%;
+    margin-top: .25rem;
+}
+
+#header .main-nav .megamenu-submenu .offer {
+    width: 30%;
+}
+
+
+#header .main-nav .megamenu-submenu .nav-items .items {
+   width: 32%;
+   gap: 2%;
+}
+
+#header .main-nav .megamenu-submenu .submenu-items {
+   margin-top: .25rem;
+}
+
+#header .menu-items .megamenu-submenu .nav-items .items .submenu-items ul,
+#header .menu-items .megamenu-submenu .nav-items .items .submenu-items li,
+#header .menu-items .megamenu-submenu .nav-items .items .submenu-items a {
+   width: 100% !important;
+   display: block !important;
+}
+
+#header .main-nav .megamenu-submenu a {
+    color: var(--black);
+    font-size: .8em;
+    margin-top: .45rem;
+}
+
+
+
+
+
 @media screen and (max-width: 1199px) {
     #header .search  {
         position: absolute;
-        top: 125px;
+        top: 120px;
         width: 100%;
         display: none;
+        z-index: 30;
+        background: var(--white);
+        padding: .25rem;
     }
     #header .search.active  {
         display: block;
@@ -419,7 +497,7 @@ a {
     
     
     #header .main-nav  {
-        min-width: 300px;
+        width: 300px;
         position: fixed;
         top: 0;
         bottom: 0;
@@ -436,8 +514,11 @@ a {
         width: 100%;
     }
     
-    #header .main-nav .megamenu-parrent .collapse-buton {
+    #header .main-nav .megamenu-parrent .collapse-buton,
+    #header .main-nav .megamenu-submenu .btn {
         width: 100%;
+        border-radius: 0 !important;
+        border-bottom: 1px solid var(--gray-opacity) !important;
     }
 
 
@@ -450,6 +531,7 @@ a {
         position: static;
         background: var(--black);
         color: var(--white);
+        height: 100%;
         margin: 0;
         padding-top: 0;
         padding-bottom: 0;
@@ -457,9 +539,40 @@ a {
 
     
 
-#header .main-nav .megamenu-parrent .collapse-buton {
-    margin-top: .5rem;
-}
+    #header .main-nav .megamenu-parrent .collapse-buton {
+        margin-top: .5rem;
+    }
+
+    #header .main-nav .megamenu-submenu {
+        color: var(--white);
+    }
+
+    
+    #header .main-nav .megamenu-submenu .nav-items {
+        width: 100%;
+    }
+    
+    #header .main-nav .megamenu-submenu .submenu-items.active {
+        display: block !important;
+    }
+
+    #header .main-nav .megamenu-submenu .btn {
+        color: var(--white) !important;
+        width: 100%;
+    }
+
+    
+    #header .main-nav .megamenu-submenu .nav-items .items {
+        width: 100% !important;
+    }
+
+    #header .main-nav .megamenu-submenu a {
+        color: var(--white);
+        border-bottom: 1px solid var(--gray-opacity) !important;
+        padding: .25rem 1rem;
+        margin-top: .50rem !important;
+    }
+
 }
 /* header end*/
 
@@ -553,6 +666,10 @@ a {
 
   .product-single .product {
     box-shadow: var(--shadow-product);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
 
 
@@ -856,7 +973,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
     box-shadow: var(--shadow-black);
     border-radius: 5px 0 0 0;
     display: none;
-    z-index: 99999999;
+    z-index: 100;
     overflow-y: auto;
 }
 
@@ -912,7 +1029,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
     right: 0;
     border-radius: 10px 0 0 10px;
     box-shadow: var(--shadow-product);
-    z-index: 100;
+    z-index: 10;
 }
 
 
@@ -999,7 +1116,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
         border: none !important;
         box-shadow: var(--shadow-black) !important;
         overflow-y: auto;
-        z-index: 99999;
+        z-index: 110;
     }
     
     #all-products .filter::-webkit-scrollbar {
@@ -1023,7 +1140,7 @@ border-image:url(../images/home_page/border-image.png) 0 0 30 0 repeat ;
         width: 100vw;
         height: 100%;
         box-shadow: var(--shadow-black);
-        z-index: 9999;
+        z-index: 100;
     }
     
     #checkout .checkout-container .proceed-button-container {

js/app.js

@@ -49,6 +49,32 @@ const searchButton = document.querySelector(".search-btn-mobile")
   }
 
 
+  // header sub-menu
+
+  const megaSubMenu = document.querySelectorAll('.megamenu-submenu .items');
+  const subMenuItemsAll = document.querySelectorAll('.megamenu-submenu .submenu-items')
+
+
+  megaSubMenu.forEach(menu => {
+    const subMenuBtn = menu.querySelector('.submenu-buton');
+    const subMenuItems = menu.querySelector('.submenu-items')
+
+    if (subMenuItems && subMenuBtn) {
+
+      subMenuBtn.addEventListener('click', () => {
+        subMenuItems.classList.toggle('active')
+  
+        subMenuItemsAll.forEach(item => {
+          if (item !== subMenuItems) {
+            item.classList.remove("active")
+          }
+        })
+      })
+      
+    }
+  })
+
+
   // burger menu function
   const burgerMenu = document.querySelector(".burger-menu");
   const burgerMenuClose = document.querySelector(".burger-close-btn");

product-details.html

@@ -34,8 +34,8 @@
     
     
         <!-- nav header -->
-        <section id="header">
-            
+        <section id="header" class="header">
+        
             <!-- offrer -->
             <div class="offer bg-pink text-white py-1">
                 <div class="container">
@@ -47,76 +47,5365 @@
 
             <!-- upper nav -->
             <div id="uper-nav" class="bg-white">
-                <div class="container py-1">
-                    <div class="d-flex justify-content-between align-items-center w-100">
+                <div class="container-xl px-2  py-1">
+                    <div class="d-flex justify-content-center justify-content-xl-between align-items-center w-100">
+
+                        <!-- burger menu logo -->
+                        <button class="burger-menu btn me-auto d-block d-xl-none">
+                            <img class="h-100 w-100" src="./images/icon/burger-menu.svg" alt="">
+                        </button>
 
                         <!-- brand logo -->
-                        <div class="brand-logo">
+                        <a class="brand-logo mx-auto mx-xl-0" href="#">
                             <img src="./images/navbar/brand-logo.svg" alt="">
-                        </div>
+                        </a>
+
 
                         <!-- search box -->
-                        <div class="search flex-fill px-5">
-                            <div class="  form-group   position-relative ">
-                                <label for="search-box" class="search-icon position-absolute">
-                                    <img src="./images/icon/search.svg" alt="">
-                                </label>
-                                <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
-                            </div>
+                        <div class="search  flex-fill px-5">
+                            <form action="">
+                                <div class="  form-group position-relative ">
+                                    <label for="search-box" class="search-icon position-absolute">
+                                        <img src="./images/icon/search.svg" alt="">
+                                    </label>
+                                    <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
+                                </div>
+                            </form>
                         </div>
 
+
+
                         <!-- link  -->
                         <div class="link-box d-flex align-items-center">
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+
+
+                            <!-- group -->
+                            <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1" >
                                 <img class="link-icon" src="./images/navbar/group.png" alt="">
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1 text-decoration-none" >
+
+                            <!-- vip points -->
+                            <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1 text-decoration-none" >
                                 <img class="link-icon" src="./images/navbar/face.png" alt="">
                                 <div>
                                     <h4 class="name fw-bold text-nowrap text-black">Hi Human</h4>
                                     <h5 class="fw-bold text-no-wrap text-black">Vip: 0 points</h5>
                                 </div>
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+                        </div>
+                        
+
+                        <!-- link  -->
+                        <div class="link-box d-flex align-items-center ">
+
+                        
+                            <!-- search btn for mobile -->
+                            <button class="btn d-block d-xl-none search-btn-mobile">
+                                <img src="./images/icon/search.svg" alt="">
+                            </button>
+
+                            <!-- message -->
+                            <a href="#" class="link d-none d-xl-flex align-items-center mx-0 mx-lg-1" >
                                 <img class="link-icon" src="./images/navbar/message.png" alt="">
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+
+                            <!-- wishlist -->
+                            <a href="#" class="link d-flex align-items-center mx-0 mx-lg-1" >
                                 <img class="link-icon" src="./images/navbar/heart.png" alt="">
                             </a>
-                            <a href="#" class="link d-flex align-items-center px-1 py-1" >
+
+                            <!-- shoping basket -->
+                            <a href="./checkout.html" class="link d-none d-xl-flex align-items-center  mx-0 mx-lg-1" >
                                 <img class="link-icon" src="./images/navbar/bascket.png" alt="">
                             </a>
+
+                            <button class="btn user-btn-mobile d-block d-xl-none">
+                                <img src="./images/icon/user.svg" alt="">
+                            </button>
                         </div>
 
+
                     </div>
                 </div>
             </div>
 
             <!-- main navigation -->
-            <div class="main-nav bg-black text-white">
-                <div class="container py-2">
-                    <ul class="d-flex align-items-center justify-content-between px-1">
-                        <li>Makeup</li>
-                        <li>Skincare</li>
-                        <li>K beauty</li>
-                        <li>Heir</li>
-                        <li>Man</li>
-                        <li>Baby</li>
-                        <li>Fragnance</li>
-                        <li>Healthcare</li>
-                        <li>Lifestyle</li>
-                        <li>pet</li>
-                        <li>Gifts</li>
-                        <li>Brands</li>
-                        <li>Makeup</li>
-                        <li>
-                            <button class="btn btn-sm btn-pink px-3">Blog</button>
+            <div class="main-nav  bg-black text-white">
+                
+                <div class="container position-relative py-2">
+
+                    <button class="btn d-block d-xl-none ms-auto burger-close-btn">
+                        <img src="./images/icon/cross-icon.svg" alt="">
+                    </button>
+
+                    <ul class=" d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center ps-1 pe-2 ps-xl-0 pe-xl-0 ">
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Makeup
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
                         </li>
-                        <li>
-                            <button class="btn btn-sm btn-orange-vivid px-3">Buy 1 Get 1</button>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Skincare
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    K beauty
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Heir
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
                         </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Man
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Baby
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Fragnace
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Healthcare
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Lifestyle
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Pet
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Gifts
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Brands
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li class="megamenu-parrent mx-2">
+                            <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                <span>
+                                    Makeup
+                                </span>
+                                <span class="drop-btn d-block d-xl-none ms-auto">
+                                    <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                </span>
+                            </button>
+                            <div class=" menu-items w-100 px-0 px-xl-4">
+
+                                <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
+
+                                    <!-- nav-items -->
+                                    <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        ok
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0   btn text-black submenu-buton d-flex  justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul >
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                            <div class="items mb-1 mb-xl-3">
+                                                <button class="ps-4 me-0 pe-0  btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
+                                                    <span>
+                                                        Makeup
+                                                    </span>
+                                                    <span class="drop-btn d-block d-xl-none ms-auto">
+                                                        <img src="./images/icon/arrow-down-solid.svg" alt="">
+                                                    </span>
+                                                </button>
+                                                <div class="submenu-items d-none d-xl-block ps-4">
+                                                    <ul>
+                                                        <li>
+                                                            <a href="#">Skincare</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">K beauty</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Heir</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Man</a>
+                                                        </li>
+                                                        <li>
+                                                            <a href="#">Baby</a>
+                                                        </li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+
+                                    </div>
+
+                                    <!-- offer -->
+                                    <div class="offer d-none d-xl-block p-3">
+
+                                        <!-- loyal -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
+                                            </a>
+                                        </div>
+
+                                        <!-- vip -->
+                                        <div class="card border-0 mb-3">
+                                            <div class="mb-3 text-black text-center">Loyal</div>
+                                            <a href="#">
+                                                <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+
+                            </div>
+
+                        </li>
+
+                        <li>
+                            <button class=" btn btn-sm btn-pink mt-3  mt-xl-0 mx-1 px-2">Blog</button>
+                        </li>
+
+                        <li>
+                            <button class="btn btn-sm btn-orange-vivid  mt-3 mt-xl-0  mx-2 px-2 ">Buy 1 Get 1</button>
+                        </li>
+
                         <li>
-                            <button class="btn btn-sm btn-orange-vivid px-3">Sale</button>
+                            <button class="btn btn-sm btn-orange-vivid mt-3 mt-xl-0  mx-2 px-2">Sale</button>
                         </li>
                     </ul>
                 </div>