<!-- Header -->
<header class="absolute top-0 left-0 w-full z-9999 site-header style-2 {{ $header_sticky_on ? "sticky-header" : "" }}">
    <!-- main header -->
    <div class="main-bar-wraper">
        <div class="{{ $header_container_layout }}">
            <div class="flex items-center 2xl:gap-40 gap-20 sm:py-40 py-20">
                <div class="logo xl:me-20">
                    <div class="dark:block hidden">
                        <a 
                            href="{{url( '/' )}}" 
                            title="{{$logo_title}}"
                        >
                            <img src="{{$site_other_logo}}" alt="{{$logo_alt}}" class="h-50" >
                        </a>
                    </div>
                    <div class="dark:hidden block">
                        <a 
                            href="{{url( '/' )}}" 
                            title="{{$logo_title}}"
                        >
                            <img src="{{$logo}}" alt="{{$logo_alt}}" class="h-50" >
                        </a>
                    </div>
                </div>
                <div class="w-1 h-50 dark:bg-white/20 bg-black/20 xl:block hidden"></div>
                <div class="header-nav navbar-collapse full-sidenav grow custom-scroll xl:flex-row flex-col xl:items-center !items-start">
                    <div class="logo xl:hidden xl:mb-0 mb-50">
                        <div class="dark:block hidden">
                            <a 
                                href="{{url( '/' )}}" 
                                title="{{$logo_title}}"
                            >
                                <img src="{{$site_other_logo}}" alt="{{$logo_alt}}" class="h-50" >
                            </a>
                        </div>
                        <div class="dark:hidden block">
                            <a 
                                href="{{url( '/' )}}" 
                                title="{{$logo_title}}"
                            >
                                <img src="{{$logo}}" alt="{{$logo_alt}}" class="h-50" >
                            </a>
                        </div>
                    </div>

                    {{ DzHelper::nav_menu(
                        array(
                            'theme_location'  => 'primary',
                            'menu_class'      => 'nav navbar xl:flex xl:w-auto w-full',
                        )
                    )}}

                </div>
                <div class="flex xl:gap-20 gap-10 ml-auto">
                    @if($header_theme_button)
                        <button type="button" class="size-48 inline-flex items-center !bg-transparent justify-center rounded-[10px] border-2 dark:border-white border-dark theme-btn cursor-pointer">
                            <span class="dark-theme dark:block hidden">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 2V4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 20V22" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M4.93005 4.92999L6.34005 6.33999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M17.66 17.66L19.07 19.07" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M2 12H4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M20 12H22" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M6.34005 17.66L4.93005 19.07" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M19.07 4.92999L17.66 6.33999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                            <span class="light-theme dark:hidden block">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 3C10.8065 4.19347 10.136 5.81217 10.136 7.5C10.136 9.18783 10.8065 10.8065 12 12C13.1935 13.1935 14.8122 13.864 16.5 13.864C18.1878 13.864 19.8065 13.1935 21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89472 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91131 5.51983 5.50571 6.99987 4.51677C8.47991 3.52784 10.22 3 12 3Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </button>
                    @endif
                    @if(!empty($header_button_1_text))
                        <a 
                            href="{{ $header_button_1_url }}" 
                            target="{{ $header_button_1_target }}"
                            class="btn btn-outline-white style-3 btn-md dark:!border-white dark:text-white max-xl:hidden hover:bg-primary hover:!border-primary"
                        >
                            <span class="pxl-button-text">{{ $header_button_1_text }}</span>
                        </a>
                    @endif
                    <div class="menu-btn relative xl:hidden flex items-center justify-center size-48">
                        <span class="inline-block align-middle space-y-6 toogle-btn">
                            <span class="dark:bg-white bg-black block h-1 duration-500"></span>
                            <span class="dark:bg-white bg-black block h-1 duration-500"></span>
                            <span class="dark:bg-white bg-black block h-1 duration-500"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- main header END -->
</header>
<!-- Header END -->

