<?php
$header_three_top_bg = cs_get_option('header_three_top_bg');
$top_bar_text3 = cs_get_option('top_bar_text3');
$top_bar_tag3 = cs_get_option('top_bar_tag3');
$top_bar_btn3 = cs_get_option('top_bar_btn3');
$top_bar_phone3 = cs_get_option('top_bar_phone3');
$top_bar_social = cs_get_option('top_bar_social');
$header_3_login = cs_get_option('header_3_login');
$header_top_bar = cs_get_option('top-bar-enable');
?>
<!-- Main Header / Header Style Three -->
<header class="main-header header-style-three">

    <!-- Header Top / Style Three -->
    <?php if($header_top_bar == true):?>
    <div class="header-top-two" <?php if(!empty($header_three_top_bg['url'])):?> style="background-image: url(<?php echo esc_url($header_three_top_bg['url']);?>)" <?php endif;?>>
        <div class="auto-container">
            <div class="d-flex justify-content-between align-items-center flex-wrap">

                <!-- Left Box -->
                <?php if(!empty($top_bar_text3) || !empty($top_bar_tag3)):?>
                <div class="left-box">
                    <div class="offer">
                        <?php if(!empty($top_bar_tag3)):?>
                            <span class="tag"><?php echo esc_html($top_bar_tag3);?></span>
                        <?php endif;?>
                    <?php echo wp_kses( $top_bar_text3, true );?>
                </div>
                </div>
                <?php endif;?>
                <!-- Right Box -->
                <div class="right-box d-flex">
                    <?php if(!empty($top_bar_btn3['text']) || !empty($top_bar_btn3['url'])):?>
                        <a class="support" href="<?php echo esc_url($top_bar_btn3['url']);?>"><?php echo esc_html($top_bar_btn3['text']);?></a>
                    <?php endif;?>
                    <?php if(!empty($top_bar_phone3['text']) || !empty($top_bar_phone3['url'])):?>
                        <a class="phone" href="<?php echo esc_url($top_bar_phone3['url']);?>"><?php echo esc_html($top_bar_phone3['text']);?></a>
                    <?php endif;?>
                    <!-- Social Box -->
                    <?php if(!empty($top_bar_social)):?>
                    <ul class="social-box">
                        <?php foreach($top_bar_social as $icon):?>
                            <li><a href="<?php echo esc_url($icon['social_link']);?>" class="<?php echo esc_attr($icon['icon'])?>"></a></li>
                        <?php endforeach;?>
                    </ul>
                    <?php endif;?>
                </div>

            </div>
        </div>
    </div>
    <?php endif;?>
    <!-- Header Lower -->
    <div class="header-lower">

        <div class="auto-container">
            <div class="inner-container d-flex justify-content-between align-items-center">

                <!-- Logo Box -->
                <div class="logo-box">
                    <div class="logo"><?php hostix_logo();?></div>
                </div>

                <div class="nav-outer d-flex align-items-center">

                    <!-- Main Menu -->
                    <nav class="main-menu show navbar-expand-md">
                        <div class="navbar-header">
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>

                        <div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
                            <?php hostix_main_menu(); ?>
                        </div>

                    </nav>
                    <!-- Main Menu End-->

                </div>

                <!-- Outer Box -->
                <div class="outer-box d-flex align-items-center">

                    <!-- Login Box -->
                    <?php if(!empty($header_3_login['text']) || !empty($header_3_login['url'])):?>
                    <div class="login-box">
                        <a href="<?php echo esc_url($header_3_login['url']);?>"><?php echo esc_html($header_3_login['text']);?></a>
                    </div>
                    <?php endif;?>
                    <!-- Nav Toggle -->
                    <div id="open_offcanvas" class="style-two">
                        <div class="bars-outer clearfix">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>

                </div>
                <!-- End Outer Box -->

            </div>

        </div>
    </div>
    <!-- End Header Lower -->

    <!-- Sticky Header  -->
    <div class="sticky-header">
        <div class="auto-container">
            <div class="d-flex justify-content-between align-items-center">
                <!-- Logo -->
                <div class="logo">
                    <?php hostix_logo();?>
                </div>

                <!-- Right Col -->
                <div class="right-box">
                    <!-- Main Menu -->
                    <nav class="main-menu">
                        <!--Keep This Empty / Menu will come through Javascript-->
                    </nav>
                    <!-- Main Menu End-->

                </div>

            </div>
        </div>
    </div>
    <!-- End Sticky Menu -->

    <!-- Mobile Menu  -->
    <div class="mobile-menu">
        <div class="menu-backdrop"></div>
        <div class="close-btn"><span class="icon flaticon-020-x-mark"></span></div>
        <nav class="menu-box">
            <div class="nav-logo"><?php hostix_logo();?></div>
            <!-- Search -->
            <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
        </nav>
    </div>
    <!-- End Mobile Menu -->

</header>
<!-- End Main Header -->

<?php hostix_offcanvas_nav();?>