
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Premium Navbar</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://unpkg.com/lucide@latest"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap"
        rel="stylesheet">
</head>

<body>
    <!-- TOP BAR SLIDER -->
    <div class="top-bar">

        <div class="swiper myTopSlider">
            <div class="swiper-wrapper">

                <div class="swiper-slide">Flat 20% Off On Purchase Above ₹3000!</div>
                <div class="swiper-slide">Free Shipping on All Orders 🚚</div>
                <div class="swiper-slide">Buy 1 Get 1 Free Today Only!</div>

            </div>

            <!-- ARROWS -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

        </div>

    </div>
    <!-- NAVBAR -->
    <nav class="custom-navbar">

        <!-- LEFT -->
        <div class="nav-left">
            <i class="fas fa-bars menu-icon" onclick="openMenu()"></i>
            <img src="https://mbmcrystals.com/cdn/shop/files/Logo_black.png?v=1750170210&width=50">

            <!-- MENU YAHAN SHIFT -->
            <ul class="nav-menu">
                <li><a href="index.php">Home</a></li>
                <li><a href="shop.php">Shop</a></li>
                <!-- <li><a href="consultation.php">Consultation</a></li> -->
                <li><a href="about-us.php">About Us</a></li>
                <li><a href="contact.php" class="active">Contact</a></li>
            </ul>
        </div>

        <!-- RIGHT -->
        <!-- <ul class="nav-right">

            <li>
                <a href="#">
                    <span class="icon-wrap">
                        <svg fill="none" class="icon icon-search" viewBox="0 0 18 19">
                            <path fill="currentColor" fill-rule="evenodd"
                                d="M11.03 11.68A5.784 5.784 0 1 1 2.85 3.5a5.784 5.784 0 0 1 8.18 8.18m.26 1.12a6.78 6.78 0 1 1 .72-.7l5.4 5.4a.5.5 0 1 1-.71.7z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </span>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="icon-wrap">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-account"
                            viewBox="0 0 18 19">
                            <path fill="currentColor" fill-rule="evenodd"
                                d="M6 4.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8m5.58 12.15c1.12.82 1.83 2.24 1.91 4.85H1.51c.08-2.6.79-4.03 1.9-4.85C4.66 11.75 6.5 11.5 9 11.5s4.35.26 5.58 1.15M9 10.5c-2.5 0-4.65.24-6.17 1.35C1.27 12.98.5 14.93.5 18v.5h17V18c0-3.07-.77-5.02-2.33-6.15-1.52-1.1-3.67-1.35-6.17-1.35"
                                clip-rule="evenodd"></path>
                        </svg>
                    </span>
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="icon-wrap">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty"
                            viewBox="0 0 40 40">
                            <path fill="currentColor" fill-rule="evenodd"
                                d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z">
                            </path>
                        </svg>
                    </span>
                </a>
            </li>

        </ul> -->
    </nav>

    <!-- SIDE MENU (MOBILE) -->
    <div id="sideMenu" class="side-menu">
        <span onclick="closeMenu()">✖</span>
        <ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="shop.php">Shop</a></li>
            <!-- <li><a href="consultation.php">Consultation</a></li> -->
            <li><a href="about-us.php">About Us</a></li>
            <li><a href="contact.php">Contact</a></li>
        </ul>
    </div>