<!doctype html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <meta content="width=device-width, initial-scale=1, viewport-fit=cover, shrink-to-fit=no" name="viewport" />
    <link href="<?php echo get_template_directory_uri(); ?>/icon.png" rel="icon" type="image/png" />
    <?php wp_head() ?>
</head>

<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <main>
        <!-- Header -->
        <header id="header" class="bg-white lg:bg-transparent fixed shadow-lg w-full z-20">
            <nav id="navbar">


                <div class="bg-blue-500 flex justify-between lg:pr-20 px-4 py-2 space-x-4 text-white">
                    <div class="flex items-center space-x-4">
                        <a href="https://www.facebook.com/Medical-Place-Health-Solutions-1802761506643340/" target="_blank"><i class="bi-facebook"></i></a>
                        <a class="text-sm" href="<?php echo esc_url(site_url('/contact')); ?>" target="_blank"><?php _e('Request Free Consultation', 'themeStarter'); ?></a>
                    </div>
                    <a class="flex items-center space-x-2" href="tel:226-996-9246"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" />
                        </svg>
                        <p class="text-sm underline min-w-max"><?php _e('226-996-9246', 'themeStarter'); ?></p>
                    </a>

                </div>

                <div class="flex bg-white items-center justify-between lg:items-stretch mx-auto relative w-full">
                    <a class="hidden lg:block items-center lg:px-8 lg:py-4" href="<?php echo esc_url(home_url()); ?>"><img alt="MPHS logo" class="lg:block" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/mphs_logo.png" width="300" /></a>
                    <a class="lg:hidden flex items-center lg:px-8 lg:py-4 p-2" href="<?php echo esc_url(home_url()); ?>"><img alt="MPHS logo" class="lg:block" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/mphs_logo_symbol.jpg" width="70" /></a>
                    <div class="absolute bg-white flex-1 left-0 lg:relative overflow-hidden top-full w-full z-20" id="menu_wrapper">
                        <div class="lg:flex lg:h-full">
                            <ul class="lg:flex lg:items-center lg:justify-end lg:px-16 lg:py-0 lg:space-y-0 mx-auto p-4 space-y-1 text-center w-full z-50" id="main_menu">
                                <?php if (has_nav_menu('primary')) : ?>
                                    <?php
                                    PG_Smart_Walker_Nav_Menu::init();
                                    PG_Smart_Walker_Nav_Menu::$options['template'] = '<li class="flex flex-col justify-center w-full {CLASSES}" id="{ID}"><a class="font-medium hover:text-blue-100 inline-block main-link min-w-max mx-auto text-blue-500 uppercase" {ATTRS}>{TITLE}</a>
                                                                                <ul class="capitalize hidden lg:rounded-md list-none md:absolute md:left-0 md:w-max z-50">
                                                                                    <li class="max-w-max mx-auto relative"><a class="hover:text-yellow-500 inline-block main-link min-w-max mx-auto relative text-blue-500" href="#services">Home</a>
                                                                                    </li>
                                                                                </ul>
                                                                            </li>';

                                    PG_Smart_Walker_Nav_Menu::$options['template_item_with_sublevel'] = '<li class="flex flex-col justify-center w-full {CLASSES}" id="{ID}"><a class="font-medium hover:text-blue-100 inline-block main-link min-w-max mx-auto text-blue-500 uppercase" {ATTRS}>{TITLE}</a>
                                                                                <ul class="capitalize hidden lg:rounded-md list-none md:absolute md:left-0 md:w-max z-50">{SUB}</ul>
                                                                            </li>';
                                    PG_Smart_Walker_Nav_Menu::$options['template_sublevel'] = '{SUB}';
                                    PG_Smart_Walker_Nav_Menu::$options['template_subitem'] = '<li class="max-w-max mx-auto relative {CLASSES}" id="{ID}"><a class="hover:text-yellow-500 inline-block main-link min-w-max mx-auto relative text-blue-500" {ATTRS}>{TITLE}</a>
                                                                                    </li>';

                                    wp_nav_menu(array(
                                        'container' => '',
                                        'theme_location' => 'primary',
                                        'items_wrap' => '<span class="%2$s lg:flex lg:mr-2 lg:space-x-5 lg:space-y-0 space-y-4" id="%1$s">%3$s</span>',
                                        'walker' => new PG_Smart_Walker_Nav_Menu()
                                    )); ?>
                                <?php endif; ?>
                            </ul>
                        </div>
                    </div>
                    <div class="flex">
                        <button id="toggle-nav" class="pr-6 mr-4 toggle-menu lg:hidden"> <i></i> <i></i><i></i> </button>
                    </div>
                </div </nav>
        </header>

        <?php
