 <!-- === top bar section start ==== -->
 
 
 
 <style>
.navbar .dropdown-submenu {
    position: relative;
}

.navbar .dropdown-submenu .dropdown-menu {
    display: none;
    top: 0 !important;
    left: 100% !important;
    margin-top: -1px;
    margin-left: 0 !important;
}

.navbar .dropdown-submenu:hover .dropdown-menu {
    display: block;
}

@media (max-width: 760px) {
    .navbar .dropdown-submenu .dropdown-menu {
        left: 0 !important;
        margin-left: 0 !important;
    }
}
 </style>
 
 
 <section id="topbar" class="d-none d-lg-block ">
        <div class="container-fluid px-lg-5 clearfix">
            <div class="contact-info float-left">

                <span i class="fa-beat-fade"> <i class="fa fa-envelope"></i> <a href="mailto:info@worcoz.com"
                        style="color: white; text-decoration: none;">info@worcoz.com</a></span>

                <span i class="fa-beat-fade"> <i class="fa fa-phone"></i> <a href="tel:+91-9667766613"
                        style="color: white; text-decoration: none;">+91-9667766613</a></span>

            </div>

            <div class="social-links float-right">
                <span i class=""><a href="https://www.facebook.com/worcoz" target="_blank" style="background-color:#3b5998"><i class="fab fa-facebook-f"></i></a></span>
                
                <span i class=""><a href="https://www.instagram.com/worcoz/" target="_blank" style="background-color:#833AB4"><i class="fa-brands fa-square-instagram"></i></a></span>
                
                <span i class=""><a href="https://www.linkedin.com/company/worcoz/" target="_blank" style="background-color:#0077b5"><i class="fab fa-linkedin-in"></i></a></span>
                
                 <!--<span i class="fa-beat-fade"><a href="#"><i class="fab fa-twitter"></i></a></span>-->


                <!-- <span i class="fa-beat-fade"><a href=""> <i class="fa-solid fa-clock" style="color: #ffffff;"></i> Sun -
                        Fri (10AM - 07PM)</a></span> -->

            </div>

        </div>
    </section>
    <!-- === top bar section end ==== -->



    <!-- Navbar Start -->
    <nav class="navbar navbar-expand-lg bg-white navbar-light shadow sticky-top p-0">
        <a href="<?php path(); ?>" class="navbar-brand d-flex align-items-center px-4 px-lg-5">
            <h2 class="m-0 text-primary"> </h2>
            <img src="<?php path(); ?>img/final-logo.png" alt="" class="logo" style="width:140px; height: auto;">
        </a>
        <button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ms-auto p-4 p-lg-0">
                <a href="<?php path(); ?>" class="nav-item nav-link active">Home</a>
                <a href="<?php path(); ?>about.php" class="nav-item nav-link">About</a>

                <div class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" id="servicesDropdown" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
                
                
                 <div class="dropdown-menu fade-down m-0" aria-labelledby="servicesDropdown">
                    <?php 
                    $statement = $pdo->prepare("SELECT id, category, title, slug FROM `tbl_service`");
                    $statement->execute();
                    $result = $statement->fetchAll(PDO::FETCH_ASSOC);
                    
                    $primaryServices = [];
                    $subservices = [];
                
                    foreach ($result as $service) {
                        if ($service['category'] === 'Services') {
                            $primaryServices[$service['title']] = $service; 
                        } else {
                            if (!isset($subservices[$service['category']])) {
                                $subservices[$service['category']] = [];
                            }
                            $subservices[$service['category']][] = $service; 
                        }
                    }
                    foreach ($primaryServices as $primaryTitle => $primaryService) {
                        if (isset($subservices[$primaryTitle])) {
                            echo '<div class="dropdown-submenu">';
                            ?>
                            <a href="https://www.worcoz.com/service/<?php echo htmlspecialchars($primaryService['slug'], ENT_QUOTES, 'UTF-8'); ?>" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-slug="<?php echo htmlspecialchars($primaryService['slug'], ENT_QUOTES, 'UTF-8'); ?>">
                                <?php echo htmlspecialchars($primaryService['title'], ENT_QUOTES, 'UTF-8'); ?>
                            </a>
                            <?php
                            echo '<div class="dropdown-menu fade-down m-0">';
                            foreach ($subservices[$primaryTitle] as $subservice) {
                                ?>
                                <a href="https://www.worcoz.com/service/<?php echo htmlspecialchars($subservice['slug'], ENT_QUOTES, 'UTF-8'); ?>" class="dropdown-item">
                                    <?php echo htmlspecialchars($subservice['title'], ENT_QUOTES, 'UTF-8'); ?>
                                </a>
                                <?php
                            }
                            echo '</div></div>';
                        } else {
                            echo '<a href="https://www.worcoz.com/service/' . htmlspecialchars($primaryService['slug'], ENT_QUOTES, 'UTF-8') . '" class="dropdown-item">' . htmlspecialchars($primaryService['title'], ENT_QUOTES, 'UTF-8') . '</a>';
                        }
                    }
                    ?>
                </div>



            </div>
                <a href="<?php path(); ?>gallery.php" class="nav-item nav-link">Gallery</a>

                <a href="<?php path(); ?>blog.php" class="nav-item nav-link">Blog</a>

                <a href="<?php path(); ?>contact.php" class="nav-item nav-link">Contact</a>


                <a href="" class="btn btn-primary" id="neonShadow" data-bs-toggle="modal" data-bs-target="#contactModal">Book Now</a>
                <!-- tel:+91-9667766613 -->
            </div>

        </div>
    </nav>
    <!-- Navbar End -->
    
   <script>
document.addEventListener('DOMContentLoaded', function() {
    var subDropdowns = document.querySelectorAll('.dropdown-submenu .dropdown-toggle');

    subDropdowns.forEach(function(subDropdown) {
        subDropdown.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            var nextEl = this.nextElementSibling;
            if (nextEl && nextEl.classList.contains('dropdown-menu')) {
                // Toggle submenu visibility
                if (nextEl.style.display === 'block') {
                    nextEl.style.display = 'none';
                } else {
                    nextEl.style.display = 'block';
                }
            }

            var href = this.getAttribute('data-slug');
            if (href) {
                if (window.matchMedia("(max-width: 760px)").matches) {
                    setTimeout(function() {
                        window.location.href = 'https://www.worcoz.com/service/' + href;
                    }, 1500); 
                } else {
                    window.location.href = 'https://www.worcoz.com/service/' + href;
                }
            }
        });
    });

    document.addEventListener('click', function() {
        document.querySelectorAll('.dropdown-submenu.open').forEach(function(openSubmenu) {
            openSubmenu.classList.remove('open');
            openSubmenu.querySelector('.dropdown-menu').style.display = 'none';
        });
    });
});
</script>
