    <!--==============================
    Mobile Menu
    ============================== -->
    <div class="vs-menu-wrapper">
        <div class="vs-menu-area text-center">
            <button class="vs-menu-toggle"><i class="fal fa-times"></i></button>
            <div class="mobile-logo">
                <a href="index.php"><img src="assets/img/logo-dark.svg" alt="cleaning"></a>
            </div>
            <div class="vs-mobile-menu">
                <ul>
                                        <li> <a href="index.php">Home</a>  </li>
                                        
                                        <li class="menu-item-has-children">
                                            <a href="about.php">About</a>
                                            <ul class="sub-menu">
                                                <li><a href="team.php">Team</a></li>
                                                <li><a href="blog.php">Blog</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="service.php">Service</a>
                                            </li>
                                        <li>
                                            <a href="blog.php">Blog</a>
                                            </li>
                                        <li><a href="portfolio.php">Gallery</a></li>
                                        <li>
                                            <a href="contact.php">Contact</a>
                                        </li>
                                    </ul>
            </div>
        </div>
    </div>
    <!--==============================
    Popup Search Box
    ============================== -->
    <div class="popup-search-box d-none d-lg-block  ">
        <button class="searchClose"><i class="fal fa-times"></i></button>
        <form action="#">
        <input type="text" class="border-theme" placeholder="What are you looking for">
        <button type="submit"><i class="fal fa-search"></i></button>
        </form>
    </div>
    <!--==============================
    Header Area
    ==============================-->
    <header class="vs-header header-layout1 style2">
        <div class="header-top style2">
            <div class="main-container2">
                <div class="row justify-content-md-between justify-content-center align-items-center">
                    <div class="col-auto d-md-block d-none">
                        <div class="header-links">
                            <ul>
                                <li><i class="far fa-envelope"></i><a href="mailto:info@example.com">info@example.com</a></li>
                                <li class="d-lg-inline d-none"><i class="far fa-clock"></i>Tuesday - Saturday 8:00 Am - 5:00 Pm</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="social-style1">
                            <span class="social-title">Follow Us On :</span>
                            <div class="social-icon">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                                <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sticky-wrapper style2">
            <div class="sticky-active">
                <div class="menu-area">
                    <div class="main-container2">
                        <div class="row align-items-center justify-content-between">
                            <div class="col-auto">
                                <div class="header-logo">
                                    <a href="index.php">
                                        <img src="assets/img/logo-dark.svg" alt="logo">
                                    </a>
                                </div>
                            </div>
                            <div class="col">
                                <nav class="main-menu menu-style2 d-none d-lg-block">
                                    <ul>
                                        <li> <a href="index.php">Home</a>  </li>
                                        
                                        <li class="menu-item-has-children">
                                            <a href="about.php">About</a>
                                            <ul class="sub-menu">
                                                <li><a href="team.php">Team</a></li>
                                                <li><a href="blog.php">Blog</a></li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="service.php">Service</a>
                                            </li>
                                        <li>
                                            <a href="blog.php">Blog</a>
                                            </li>
                                        <li><a href="portfolio.php">Gallery</a></li>
                                        <li>
                                            <a href="contact.php">Contact</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                            
                            <div class="col-auto">
                                <div class="auth-buttons">
                                    <?php
                                    // Check if user is logged in
                                    if (isset($_SESSION['user_id'])):
                                    ?>
                                        <div class="user-profile-wrapper" style="position: relative; display: inline-block;">
                                            <div class="user-profile-toggle" style="display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; background: rgb(255 255 255 / 93%); user-select: none;">
                                                <div style="width: 35px; height: 35px; border-radius: 50%; background: #109c3d; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 14px;">
                                                    <?php 
                                                        $displayName = $_SESSION['admin_name'] ?? $_SESSION['name'] ?? 'User';
                                                        echo strtoupper(substr($displayName, 0, 1)); 
                                                    ?>
                                                </div>
                                                <div style="text-align: left;">
                                                    <div style="font-weight: 600; color: #0f172a; font-size: 14px;"><?php 
                                                        $displayName = $_SESSION['admin_name'] ?? $_SESSION['name'] ?? 'User';
                                                        echo htmlspecialchars($displayName); 
                                                    ?></div>
                                                    <div style="font-size: 12px; color: #64748b;"><?php echo ucfirst($_SESSION['user_type']); ?></div>
                                                </div>
                                                <i class="fal fa-chevron-down user-dropdown-icon" style="font-size: 12px; color: #109c3d; transition: transform 0.3s ease; margin-left: 4px;"></i>
                                            </div>
                                            
                                            <!-- Dropdown Menu -->
                                            <div class="user-dropdown-menu" style="position: absolute; top: 100%; right: 0; background: white; border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); min-width: 220px; margin-top: 8px; transition: all 0.3s ease; z-index: 1000; overflow: hidden;">
                                                <div style="padding: 12px 0;">
                                                    <div style="padding: 12px 16px; border-bottom: 1px solid #f0f0f0; font-weight: 600; color: #0f172a; font-size: 13px;">
                                                        <?php 
                                                            $displayName = $_SESSION['admin_name'] ?? $_SESSION['name'] ?? 'User';
                                                            echo htmlspecialchars($displayName); 
                                                        ?>
                                                    </div>
                                                    <a href="<?php echo $_SESSION['user_type'] === 'admin' ? 'admin-dashboard.php' : 'customer-dashboard.php'; ?>" style="display: flex; align-items: center; padding: 12px 16px; color: #0f172a; text-decoration: none; transition: all 0.3s ease;">
                                                        <i class="fal fa-th-large" style="margin-right: 10px; color: #109c3d; width: 16px; text-align: center;"></i>
                                                        <span>Dashboard</span>
                                                    </a>
                                                    <a href="logout.php" style="display: flex; align-items: center; padding: 12px 16px; color: #0f172a; text-decoration: none; border-top: 1px solid #f0f0f0; transition: all 0.3s ease;">
                                                        <i class="fal fa-sign-out-alt" style="margin-right: 10px; color: #ef4444; width: 16px; text-align: center;"></i>
                                                        <span>Logout</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <style>
                                            .user-profile-wrapper {
                                                max-width: 100%;
                                            }

                                            .user-profile-toggle {
                                                white-space: nowrap;
                                            }

                                            .user-profile-toggle:hover {
                                                background: rgba(16, 156, 61, 0.1);
                                            }

                                            .user-profile-toggle:hover .user-dropdown-icon {
                                                transform: rotate(180deg);
                                            }

                                            .user-dropdown-menu {
                                                opacity: 0;
                                                visibility: hidden;
                                                transform: translateY(-10px);
                                            }

                                            .user-profile-wrapper.active .user-dropdown-icon {
                                                transform: rotate(180deg);
                                            }

                                            .user-profile-wrapper.active .user-dropdown-menu {
                                                opacity: 1;
                                                visibility: visible;
                                                transform: translateY(0);
                                            }

                                            .user-dropdown-menu a {
                                                font-size: 14px;
                                            }

                                            .user-dropdown-menu a:hover {
                                                background: #f8fbff;
                                                color: #109c3d;
                                                padding-left: 20px;
                                            }

                                            /* Responsive Design */
                                            @media (max-width: 768px) {
                                                .user-profile-toggle {
                                                    padding: 8px;
                                                    gap: 6px;
                                                }

                                                .user-profile-toggle div:last-of-type {
                                                    display: none;
                                                }

                                                .user-dropdown-menu {
                                                    position: fixed;
                                                    right: 0;
                                                    top: auto;
                                                    bottom: auto;
                                                    left: auto;
                                                    min-width: 180px;
                                                    border-radius: 8px 0 0 8px;
                                                }
                                            }

                                            @media (max-width: 480px) {
                                                .user-profile-toggle {
                                                    padding: 6px;
                                                }

                                                .user-profile-toggle div:first-of-type {
                                                    width: 30px;
                                                    height: 30px;
                                                    font-size: 12px;
                                                }

                                                .user-dropdown-menu {
                                                    min-width: 160px;
                                                    font-size: 13px;
                                                }

                                                .user-dropdown-menu a {
                                                    padding: 10px 12px;
                                                }
                                            }
                                        </style>

                                        <script>
                                            document.addEventListener('DOMContentLoaded', function() {
                                                const profileWrapper = document.querySelector('.user-profile-wrapper');
                                                const profileToggle = document.querySelector('.user-profile-toggle');
                                                const dropdownMenu = document.querySelector('.user-dropdown-menu');

                                                // Toggle dropdown on click
                                                profileToggle.addEventListener('click', function(e) {
                                                    e.stopPropagation();
                                                    profileWrapper.classList.toggle('active');
                                                });

                                                // Show dropdown on hover (desktop)
                                                profileWrapper.addEventListener('mouseenter', function() {
                                                    if (window.innerWidth > 768) {
                                                        profileWrapper.classList.add('active');
                                                    }
                                                });

                                                profileWrapper.addEventListener('mouseleave', function() {
                                                    if (window.innerWidth > 768) {
                                                        profileWrapper.classList.remove('active');
                                                    }
                                                });

                                                // Close dropdown when clicking outside
                                                document.addEventListener('click', function(e) {
                                                    if (!profileWrapper.contains(e.target)) {
                                                        profileWrapper.classList.remove('active');
                                                    }
                                                });

                                                // Close dropdown when link is clicked
                                                const dropdownLinks = profileWrapper.querySelectorAll('a');
                                                dropdownLinks.forEach(link => {
                                                    link.addEventListener('click', function() {
                                                        profileWrapper.classList.remove('active');
                                                    });
                                                });

                                                // Handle window resize
                                                window.addEventListener('resize', function() {
                                                    if (window.innerWidth > 768) {
                                                        profileWrapper.classList.remove('active');
                                                    }
                                                });
                                            });
                                        </script>
                                    <?php
                                    else:
                                    ?>
                                        <a href="login.php" class="auth-btn login-btn">
                                            <i class="fal fa-sign-in-alt"></i>
                                            <span class="d-none d-sm-inline">Login</span>
                                        </a>
                                        <a href="register.php" class="auth-btn register-btn">
                                            <i class="fal fa-user-plus"></i>
                                            <span class="d-none d-sm-inline">Register</span>
                                        </a>
                                    <?php
                                    endif;
                                    ?>
                                </div>
                            </div>

                            <div class="col-auto d-lg-none">
                                <button class="vs-menu-toggle d-inline-block">
                                    <i class="fal fa-bars"></i>                                           
                               </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
