    <header id="header" class="header header-layout-type-header-2rows">
        <div class="header-top">
            <div class="container">
                <div class="row">
                    <div class="col-xl-auto header-top-left align-self-center text-center text-xl-left">
                        <ul class="element contact-info">
                            <li class="contact-phone"><i class="fa fa-phone font-icon sm-display-block"></i> Tel: <a
                                    href="tel:+917484998121">+91 748 499 8121</a></li>
                            <li class="contact-email"><i class="fa fa-envelope font-icon sm-display-block"></i> <a
                                    href="cdn-cgi/l/email-protection.html#6c0209001f03020d020802050f0403001f0d021f0d01032c0b010d0500420f0301"
                                    class="__cf_email__"><span class="__cf_email__"
                                        data-cfemail="6a040f061905040b040e040309020506190b04190b07052a0d070b030644090507">[email&#160;protected]</span></a>
                            </li>
                            <li class="contact-address"><i class="fa fa-map font-icon sm-display-block"></i> Dudheshwar,
                                Ahmedabad - 380004</li>
                        </ul>
                    </div>
                    <div class="col-xl-auto ms-xl-auto header-top-right align-self-center text-center text-xl-right">
                        <div class="element pt-0 pb-0">
                            <ul class="styled-icons icon-dark icon-theme-colored1 icon-circled clearfix">
                                <li><a class="social-link" href="assets/index.html#"><i class="fab fa-facebook"></i></a>
                                </li>
                                <li><a class="social-link" href="assets/index.html#"><i class="fab fa-twitter"></i></a>
                                </li>
                                <li><a class="social-link" href="assets/index.html#"><i class="fab fa-youtube"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-nav tm-enable-navbar-hide-on-scroll">
            <div class="header-nav-wrapper navbar-scrolltofixed">
                <div class="menuzord-container header-nav-container">
                    <div class="container position-relative">
                        <div class="row">
                            <div class="col">
                                <div class="row header-nav-col-row">
                                    <div class="col-sm-auto align-self-center">
                                        <a class="menuzord-brand site-brand" href="index.html">
                                            <img class="logo-default logo-1x"
                                                src="<?php echo url('/'); ?>/website/assets/images/logo.png" alt="Logo">
                                            <img class="logo-default logo-2x retina" src="<?php echo url('/'); ?>/website/assets/images/logo.png"
                                                alt="Logo">
                                        </a>
                                    </div>
                                    <div class="col-sm-auto ms-auto pr-0 align-self-center">
                                        <nav id="top-primary-nav" class="menuzord theme-color2" data-effect="slide"
                                            data-animation="none" data-align="right">
                                            <ul id="main-nav" class="menuzord-menu">
                                                <li class="menu-item {{ request()->routeIs('home') ? 'active' : '' }}">
                                                    <a href="{{ route('home') }}">Home</a>
                                                </li>
                                                <li class="menu-item {{ request()->routeIs('about') ? 'active' : '' }}">
                                                    <a href="{{ route('about') }}">About Us</a>
                                                </li>
                                                <li class="menu-item {{ request()->is('products*') ? 'active' : '' }}">
                                                    <a href="{{ route('products.index') }}">Products</a>
                                                    <ul class="dropdown">
                                                        @foreach ($productCategories as $category)
                                                            <li>
                                                                <a
                                                                    href="{{ route('products.category', $category->slug) }}">
                                                                    {{ $category->name_en }}
                                                                </a>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </li>
                                                <li class="menu-item {{ request()->is('contactus') ? 'active' : '' }}">
                                                    <a href="{{ route('contactUs') }}">Contact Us</a>
                                                </li>
                                            </ul>
                                        </nav>

                                    </div>
                                    <div class="row d-block d-xl-none">
                                        <div class="col-10 mr-auto">
                                            <nav id="top-primary-nav-clone"
                                                class="menuzord d-block d-xl-none default menuzord-color-default menuzord-border-boxed menuzord-responsive"
                                                data-effect="slide" data-animation="none" data-align="right">
                                                <ul id="main-nav-clone"
                                                    class="menuzord-menu menuzord-right menuzord-indented scrollable">
                                                </ul>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
