<!-- Header -->
<header class="absolute top-0 left-0 w-full z-9999 site-header style-1 {{ $header_sticky_on ? "sticky-header" : "" }}">
    <!-- main header -->
    <div class="main-bar-wraper">
        <div class="{{ $header_container_layout }}">
            <div class="flex items-center">
                
                @if($header_hamburger_position == "left")
                    <div class="btn style-1 btn-black menu-btn cursor-pointer {{ $header_color_mode  == 'light' ? 'border border-white' : '' }}">
                        @if ($logo_type == 'text_logo')
                        <div class="text-logo">
                            @if (!empty($logo_text))
                            <h1 class="site-title">
                                <a href="{{url( '/' )}}" title="{{$logo_title}}">
                                    {{$logo_text}}
                                </a>
                            </h1>
                            @endif
                        </div>
                        @else
                        <a 
                            href="{{url( '/' )}}" 
                            title="{{$logo_title}}"
                            class="inline-flex justify-center items-center sm:w-70 sm:h-50 w-50 h-30 rounded-[50px] bg-linear-(--btn-gradient)"
                        >
                            <img src="{{$logo}}" alt="{{$logo_alt}}" class="size-full object-contain sm:p-8 p-2" />
                        </a>
                        @endif
                        <span class="font-semibold sm:px-20 px-12 inline-flex items-center gap-14">
                            <span class="inline-block align-middle space-y-3">
                                <span class="bg-primary block h-2 w-15 duration-200"></span>
                                <span class="bg-primary block h-2 w-15 duration-200"></span>
                                <span class="bg-primary block h-2 w-15 duration-200"></span>
                            </span>
                            Menu
                        </span>
                    </div>
                    @if(!empty($header_button_1_text))
                        @if($show_banner)
                        <a 
                            href="{{ $header_button_1_url }}" 
                            target="{{ $header_button_1_target }}"
                            class="btn btn-outline style-1 light banner-btn ms-auto p-2 group button--stroke flairBtn magneticBtn" 
                            data-block="button"
                        >
                            <span class="button-flair"></span>
                            <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">{{ $header_button_1_text }}</span>
                            <span class="inline-flex justify-center items-center size-32 rounded-full bg-white text-secondary duration-100 group-hover:bg-secondary group-hover:text-white z-0">
                                <i class="fa-solid fa-arrow-right text-sm"></i>
                            </span>
                        </a>
                        @else
                        @if($header_color_mode  == 'light')
                        <a 
                            href="{{ $header_button_1_url }}" 
                            target="{{ $header_button_1_target }}"
                            class="btn btn-outline style-1 light ms-auto p-2 group button--stroke flairBtn magneticBtn" 
                            data-block="button"
                        >
                            <span class="button-flair"></span>
                            <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">{{ $header_button_1_text }}</span>
                            <span class="inline-flex justify-center items-center size-32 rounded-full dark:bg-white dark:text-secondary bg-dark text-white duration-100 dark:group-hover:bg-secondary dark:group-hover:text-white group-hover:bg-white group-hover:text-secondary z-0">
                                <i class="fa-solid fa-arrow-right text-sm"></i>
                            </span>
                        </a>
                        @else
                        <a 
                            href="{{ $header_button_1_url }}" 
                            target="{{ $header_button_1_target }}"
                            class="btn btn-outline style-1 ms-auto p-2 group button--stroke flairBtn magneticBtn" 
                            data-block="button"
                        >
                            <span class="button-flair"></span>
                            <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">{{ $header_button_1_text }}</span>
                            <span class="inline-flex justify-center items-center size-32 rounded-full bg-secondary text-white duration-100 group-hover:bg-primary group-hover:text-secondary z-0">
                                <i class="fa-solid fa-arrow-right text-sm"></i>
                            </span>
                        </a>
                        @endif
                        @endif
                    @endif
                @endif
                @if($header_hamburger_position == "right")

                <div class="logo xl:me-20 grow">
                    <div class="dark:hidden block">
                        <a 
                            href="{{url( '/' )}}" 
                            title="{{$logo_title}}"
                        >
                            <img src="{{$logo}}" alt="{{$logo_alt}}">
                        </a>
                    </div>
                    <div class="dark:block hidden">
                        <a 
                            href="{{url( '/' )}}" 
                            title="{{$logo_title}}"
                        >
                            <img src="{{$logo}}" alt="{{$logo_alt}}">
                        </a>
                    </div>
                </div>

                <div class="flex items-center gap-20">
                    @if(!empty($header_button_1_text))
                        <a 
                            href="{{ $header_button_1_url }}" 
                            target="{{ $header_button_1_target }}"
                            class="btn p-0 h-auto dark:text-white text-secondary font-normal group max-lg:hidden">
                            <span class="pxl-button-text">{{ $header_button_1_text }}</span>
                            <span class="block ms-5 overflow-hidden">
                                <svg class="group-hover:animate-toTopFromBottom" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="dark:stroke-white stroke-secondary" d="M5.83337 14.1667L14.1667 5.83334" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path class="dark:stroke-white stroke-secondary" d="M5.83337 5.83334H14.1667V14.1667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </span>
                        </a>
                    @endif
                    <span class="menu-btn bg-white h-45 w-92 rounded-6xl cursor-pointer flex items-center justify-center group">
                        <span class="space-y-3 flex flex-col items-end">
                            <span class="bg-black block h-2 w-19 duration-200 group-hover:w-28"></span>
                            <span class="bg-black block h-2 w-28 duration-200 group-hover:w-19"></span>
                        </span>
                    </span>
                </div>
                @endif
                <div class="header-nav navbar-collapse full-sidenav navbar custom-scroll">
                    <div class="flsbg pointer-events-none">
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                        <span class="bg-wrap">
                            <span class="noice-overlay"></span>
                        </span>
                    </div>
                    <div class="container-fluid size-full flex flex-col">
                        <div class="row flex-1 lg:h-[calc(100%-130px)]">
                            <div class="xl:w-[40%] lg:w-1/2 w-full flex flex-col justify-center lg:order-0 order-1 lg:h-full">
                                @if($header_contact_info)
                                <div class="3xl:ps-170 xl:ps-60 lg:py-0 py-40">
                                    <div class="lg:flex items-center flex-wrap lg:px-0 sm:px-20 gap-20">
                                        @if(!empty($email_address))
                                        <div class="text-white lg:mb-50 mb-10">
                                            <h2 class="text-2xl font-normal lg:mb-20">{{ $email_text }}</h2>
                                            <a class="text-lg dark:text-bodytext text-textlight block hover:underline" href="mailto:{{ $email_address }}">{{ $email_address }} </a>
                                        </div>
                                        @endif
                                        @if(!empty($phone_number))
                                        <div class="text-white lg:mb-50 mb-10">
                                            <h2 class="text-2xl font-normal lg:mb-20">{{ $phone_text }}</h2>
                                            <a class="text-lg dark:text-bodytext text-textlight block hover:underline" href="tel:{{ $phone_number }}">{{ $phone_number }}</a>
                                        </div>
                                        @endif
                                    </div>
                                    @if(!empty($address)) 
                                    <div class="lg:flex items-center flex-wrap lg:px-0 sm:px-20">
                                        <div class="text-white lg:mb-50 mb-10">
                                            <h2 class="text-2xl font-normal lg:mb-20">{{ $address_text }}</h2>
                                            <a class="text-lg dark:text-bodytext text-textlight block hover:underline" href="javasript:void(0);">{{ $address }}</a>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                @endif
                            </div>
                            <div class="xl:w-[60%] lg:w-1/2 w-full flex flex-col justify-center lg:h-full">
                                <div class="3xl:pe-260 lg:pe-60 lg:ps-70 lg:pt-0 pt-60 overflow-auto py-30">

                                    {{ DzHelper::nav_menu(
                                        array(
                                            'theme_location'  => 'primary',
                                            'menu_class'      => 'nav navbar-nav lg:pb-0 pb-30 lg:border-b-0 border-b dark:border-white/30 border-black/30',
                                        )
                                    )}}
                            
                                </div>
                            </div>
                        </div>
                        <div class="lg:py-38 pt-20 sm:pb-50 pb-80 lg:px-0 sm:px-20 border-t dark:border-white/30 border-black/30 flex items-center justify-between">
                            @if($header_theme_button)
                            <div class="relative flex items-center px-12 py-6 rounded-full duration-500 theme-btn cursor-pointer">
                                <span class="block p-10 rounded-full relative z-2 light-theme">
                                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_29494_68)">
                                        <path d="M19.4313 12.3808C19.3477 12.2974 19.2421 12.2394 19.1269 12.2135C19.0116 12.1876 18.8914 12.1949 18.7801 12.2346C17.2847 12.7677 15.6687 12.8656 14.1198 12.5169C12.571 12.1681 11.1529 11.3871 10.0303 10.2644C8.90775 9.14178 8.12676 7.72364 7.77811 6.17479C7.42946 4.62593 7.52745 3.00994 8.0607 1.51456C8.10033 1.40326 8.1076 1.28301 8.08167 1.16775C8.05573 1.05249 7.99767 0.94694 7.91419 0.863336C7.83072 0.779733 7.72526 0.7215 7.61004 0.695388C7.49482 0.669277 7.37456 0.676357 7.2632 0.715807C5.91501 1.19189 4.69154 1.96588 3.68383 2.98018C1.87734 4.78803 0.862798 7.23933 0.863281 9.79505C0.863765 12.3508 1.87924 14.8017 3.68641 16.6089C5.49358 18.416 7.94448 19.4315 10.5002 19.432C13.0559 19.4325 15.5072 18.4179 17.3151 16.6114C18.3295 15.6035 19.1035 14.3798 19.5795 13.0314C19.6188 12.9201 19.6257 12.7998 19.5995 12.6847C19.5733 12.5695 19.515 12.4642 19.4313 12.3808Z" fill="white"/>
                                        </g>
                                        <defs>
                                        <clipPath id="clip0_29494_68">
                                        <rect width="20" height="20" fill="white" transform="translate(0.240234 0.0551758)"/>
                                        </clipPath>
                                        </defs>
                                    </svg>
                                </span>
                                <span class="block p-10 rounded-full relative z-2 dark-theme">
                                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_29494_70)">
                                        <path d="M10.2402 3.10986C10.5638 3.10986 10.8262 2.84752 10.8262 2.52393V0.641113C10.8262 0.31752 10.5638 0.0551758 10.2402 0.0551758C9.91664 0.0551758 9.6543 0.31752 9.6543 0.641113V2.52393C9.6543 2.84752 9.91664 3.10986 10.2402 3.10986Z" fill="black"/>
                                        <path d="M10.2402 17.0005C9.91664 17.0005 9.6543 17.2628 9.6543 17.5864V19.4692C9.6543 19.7928 9.91664 20.0552 10.2402 20.0552C10.5638 20.0552 10.8262 19.7928 10.8262 19.4692V17.5864C10.8262 17.2628 10.5638 17.0005 10.2402 17.0005Z" fill="black"/>
                                        <path d="M19.6543 9.46924H17.7715C17.4479 9.46924 17.1855 9.73158 17.1855 10.0552C17.1855 10.3788 17.4479 10.6411 17.7715 10.6411H19.6543C19.9779 10.6411 20.2402 10.3788 20.2402 10.0552C20.2402 9.73158 19.9779 9.46924 19.6543 9.46924Z" fill="black"/>
                                        <path d="M3.29492 10.0552C3.29492 9.73158 3.03258 9.46924 2.70898 9.46924H0.826172C0.502578 9.46924 0.240234 9.73158 0.240234 10.0552C0.240234 10.3788 0.502578 10.6411 0.826172 10.6411H2.70898C3.03258 10.6411 3.29492 10.3788 3.29492 10.0552Z" fill="black"/>
                                        <path d="M15.9807 5.14395L17.3119 3.81281C17.5407 3.58399 17.5407 3.21301 17.3119 2.98418C17.0831 2.75535 16.7121 2.75535 16.4832 2.98418L15.1521 4.31531C14.9233 4.54414 14.9233 4.91512 15.1521 5.14395C15.3808 5.37274 15.7519 5.37285 15.9807 5.14395Z" fill="black"/>
                                        <path d="M4.5008 14.9665L3.16967 16.2976C2.94084 16.5264 2.94084 16.8974 3.16967 17.1262C3.39842 17.355 3.76947 17.3551 3.9983 17.1262L5.32943 15.7951C5.55826 15.5663 5.55826 15.1953 5.32943 14.9665C5.10061 14.7376 4.72959 14.7376 4.5008 14.9665Z" fill="black"/>
                                        <path d="M15.9807 14.9664C15.7519 14.7376 15.3809 14.7376 15.1521 14.9664C14.9233 15.1952 14.9233 15.5662 15.1521 15.7951L16.4832 17.1262C16.712 17.355 17.083 17.3551 17.3119 17.1262C17.5407 16.8974 17.5407 16.5264 17.3119 16.2976L15.9807 14.9664Z" fill="black"/>
                                        <path d="M4.50084 5.14395C4.72959 5.37274 5.10064 5.37282 5.32947 5.14395C5.5583 4.91512 5.5583 4.54414 5.32947 4.31531L3.9983 2.98418C3.76951 2.75535 3.3985 2.75535 3.16967 2.98418C2.94084 3.21301 2.94084 3.58399 3.16967 3.81281L4.50084 5.14395Z" fill="black"/>
                                        <path d="M10.2409 5.07599C7.49539 5.07599 5.26172 7.30966 5.26172 10.0552C5.26172 12.8007 7.49539 15.0343 10.2409 15.0343C12.9864 15.0343 15.2201 12.8007 15.2201 10.0552C15.2201 7.30966 12.9864 5.07599 10.2409 5.07599ZM10.2409 13.8625C8.14156 13.8625 6.43359 12.1545 6.43359 10.0552C6.43359 7.95583 8.14156 6.24786 10.2409 6.24786C12.3402 6.24786 14.0482 7.95583 14.0482 10.0552C14.0482 12.1545 12.3402 13.8625 10.2409 13.8625Z" fill="black"/>
                                        </g>
                                        <defs>
                                        <clipPath id="clip0_29494_70">
                                        <rect width="20" height="20" fill="white" transform="translate(0.240234 0.0551758)"/>
                                        </clipPath>
                                        </defs>
                                    </svg>
                                </span>
                                <span class="active"></span>
                            </div>
                            @endif

                            @if($header_social_link_on && $show_social_icon && $mobile_header_social_link_on)
                                <ul class="flex items-center gap-37">
                                    {!! get_social_icons('header','dark:text-white text-dark') !!}
                                </ul>
                            @endif
                        </div>
                    </div>
                    <button 
                        type="button" 
                        class="menu-close absolute rounded-full size-70 lg:dark:bg-white lg:bg-dark lg:top-40 top-0 lg:right-50 right-0 group cursor-pointer magneticBtn"
                    >
                        <span class="duration-500 z-1 after:content-[''] after:absolute after:h-3 lg:after:w-32 after:w-20 after:rounded-full after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-mt-1 lg:dark:after:bg-secondary lg:after:bg-white dark:after:bg-white after:bg-black after:opacity-100 after:duration-200 after:-rotate-45 before:content-[''] before:absolute before:h-3 lg:before:w-32 before:w-20 before:rounded-full before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-mt-1 lg:dark:before:bg-secondary lg:before:bg-white dark:before:bg-white before:bg-black before:opacity-100 before:duration-200 before:rotate-45 group-hover:after:rotate-0 group-hover:before:rotate-0"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- main header END -->
</header>
<!-- Header END -->

