<style>
  .logo-aspect-div {
    /* width: 360px;
    height: 270px; */
    /* aspect-ratio: 16 / 9;  */
     /* aspect-ratio: 4 / 3; ----- four column --- */
    display: flex;
    /* align-items: center; */
    justify-content: center;
    object-fit: contain;
    /* background: #f00; */

}

.logo-aspect-div img {
    object-fit: contain;
     width: 220px;
    /* height: 270px; */
    max-height: 101px;
    /* aspect-ratio: 4 / 3; */
}

.topbg-color{
    background-color: #e8e8e8;
    color:#000!important;
}


.menuItems {
    background: none;
    height: 50px;
    width: 100px;
    margin: 0;
    padding: 0;
}

.menuItems li {
    display: inline;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    height: 50px;
}

.menuItems li a {
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: bolder;
    color: #000;
    height: 50px;
    width: auto;
    display: block;
    text-align: center;
    line-height: 50px;
}





 .bg-wine{
    background-color: #3b4356;   
}

.content_area{
    color:#000;
}

.t-icon{
    color:#000;
    font-size:13px;
    font-weight:bold;
    margin-right:15px;
}


.text-white{
    color:#fff;
}

.text-white a{
    color:#fff;
}

.text-white a:hover{
    color:#d6d090;
}

.nav-item a {
    color: #fff!important;
    font-size:15px;
    font-weight:500;
    margin-right:10px;
    /* border:solid 1px #fff; */
}

.navbg-color{
    /* background-color: #f0f0f0; */
    background-color: #1a1c23;
    /* padding: 30px 0px; */
   -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.fixed-top{
    background-color: #fff; 
}

.fixed-top .nav-item a {
    color: #000!important;
    font-size:15px;
    font-weight:500;
    margin-right:10px;
    /* border:solid 1px #fff; */
}

.fixed-top  .dropdown ul li a{
    color: #fff!important;
}

.nav-item a:hover {
    color: #efcc0b!important;
    display:block;
    /* border:solid 1px #c6ae0e;
    background-color:#063507; */
}

.dropdown ul {
    padding:0px;
    /* border:solid 3px #000; */
    background-color:#1a1c23;

}

.dropdown ul li a{
    color: #fff!important;
    font-size:14px!important;
    text-transform:none;
    font-weight:400;
    padding:9px 15px;
    /* margin-top:5px; */
}

.dropdown ul li a:hover{
    color: #000!important;
}

.navbar-wrap{
    padding: 0px 0px;
}

nav.navbar.bootsnav{
    /* background-color: transparent; */
    /* font-family: 'Exo 2', sans-serif; */
    /* margin-bottom: 150px; */
    border: none;
    min-height: auto;
    z-index:999;
}

.nav-item:hover .nav-link{
	color: #d82020 !important;
    /* border:solid 1px #c6ae0e;
    background-color:#063507; */
}

nav.navbar.bootsnav .navbar-collapse{ padding: 0; }
nav.navbar.bootsnav ul.nav > li > a{
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    padding:9px 15px;
    margin: 0 12px 0 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

nav.navbar.bootsnav ul.nav > li.dropdown > a{  padding:9px 15px; }
nav.navbar.bootsnav ul.nav > li.active > a,
nav.navbar.bootsnav ul.nav > li.active > a:hover,
nav.navbar.bootsnav ul.nav > li > a:hover,
nav.navbar.bootsnav ul.nav > li.on > a{
    color: #fff;
}

nav.navbar.bootsnav ul.nav > li > a>span:before{
    content: '';
    background-color: #d22417;
    height: 5px;
    width: 20px;
    opacity: 1;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    bottom: -2px;
    transition: all 0.3s ease 0s;
}

nav.navbar.bootsnav ul.nav > li.active > a>span:before,
nav.navbar.bootsnav ul.nav > li.active > a:hover>span:before,
nav.navbar.bootsnav ul.nav > li > a:hover>span:before,
nav.navbar.bootsnav ul.nav > li.on > a>span:before{
    opacity: 1;
    width: 100%;
}

nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li a:hover,
nav.navbar.bootsnav li.dropdown ul.dropdown-menu li a:hover,
nav.navbar.bootsnav li.dropdown ul.dropdown-menu li a.dropdown-toggle:active,
nav.navbar ul.nav li.dropdown.on ul.dropdown-menu li.dropdown.on > a{
    color: #e7d073 !important;
    background-color: #d22417 !important;
}

nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
    color: #000;
    margin: 0 0 0 7px;
    position: absolute;
    top: 8px;
    right: 7px;
    transition: all 0.3s;
}

nav.navbar.bootsnav ul.nav > li.dropdown > ul{
    opacity: 0;
    transform: translateX(-20px) translateY(-40px);
    visibility: hidden;
    left: 10px;
    z-index: -1;
    transition: all 0.3s ease 0s;
}

nav.navbar.bootsnav ul.nav > li.dropdown.on > ul{
    transform: translateX(-10px) translateY(0);
    opacity: 1 !important;
    visibility: visible !important;
}

.dropdown-menu.multi-dropdown{
    position: absolute;
    left: -100% !important;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
    background-color: transparent;
    border: none;
    top: 105%;
    z-index: 1;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li > a{
    color: #333;
    background-color: #fff;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content{
    background-color: #fff;
    overflow: hidden;
    top: 105%;
    left: 0;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li{ font-size: 14px; }
nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .menu-col li a{
    color: #333;
    background-color: transparent;
    padding-left: 10px;
    transition: all 0.3s ease;
}
nav.navbar.bootsnav ul.nav li.megamenu-fw > a:hover,
nav.navbar.bootsnav ul.nav li.megamenu-fw > a:focus,
nav.navbar.bootsnav ul.nav li.megamenu-fw.on > a{ background-color: transparent !important; }
nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .col-menu{ padding: 0 15px; }
nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{
    color: #b5bb04;
    font-size: 16px;
    text-transform: uppercase;
    padding: 0 0 5px;
    margin: 0 0 5px;
    border-bottom: 2px solid #b5bb04;
}
@media only screen and (max-width:990px){
    .dropdown-menu.multi-dropdown{ left: 0 !important; }
    nav.navbar.bootsnav .navbar-toggle{
        color: #fff;
        background: #b5bb04 !important;
        padding: 3px 8px;
        border-radius: 0;
    }
    nav.navbar.bootsnav.navbar-mobile .navbar-collapse{ background-color: #21213D; }
    nav.navbar.bootsnav ul.nav>li{ margin: 0 auto 2px; }
    nav.navbar.bootsnav.navbar-mobile ul.nav>li>a{
        background-color: #21213D;
        text-align: center;
        padding: 10px 15px;
        margin: 0;
        border: none;
    }
    nav.navbar.bootsnav ul.nav>li.dropdown>a{ padding: 10px 10px 10px 28px; }
    nav.navbar.bootsnav ul.nav>li.dropdown>a.dropdown-toggle:before{ color: #fff; }
    nav.navbar.bootsnav ul.nav > li.dropdown > ul{ left: -5px; }
    nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu{
        margin: 0 0  -1px 0 !important;
        z-index: 1;
    }
    nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu>li>a{
        color: #333;
        padding-left: 10px;
        border: none;
    }
    nav.navbar.bootsnav .dropdown-menu{ z-index: 0; }
    nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{
        color: #fff;
        font-size: 24px;
        font-weight: normal;
    }
    nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .content{ border: none; }
    nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .col-menu.on .title{ font-weight: 600; }
    nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .col-menu li a{
       color: #333;
       background-color: #fff;
       border: none;
       margin-bottom: 0;
    }
}





/* Responsive - Smaller Screen */
@media screen and (max-width: 640px) {
.navbar-dark .navbar-toggler {
    background-color:#000!important;
    margin-right:20px;
}
.navbar-nav{
    padding-left:20px!important;
}

}

/* Responsive - Big screens */
@media screen and (min-width: 640px) {

}
</style>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>






<script type="text/javascript">
    $(function () {
        $(document).scroll(function () {
            var $nav = $(".navbar-fixed-top");
            $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
        });
    });
</script>


<script type="text/javascript">
/// some script

// jquery ready start
document.addEventListener("DOMContentLoaded", function(){
  window.addEventListener('scroll', function() {
      if (window.scrollY > 190) {
        document.getElementById('navbar_top').classList.add('fixed-top');
        // add padding top to show content behind navbar
        navbar_height = document.querySelector('.navbar').offsetHeight;
        document.body.style.paddingTop = navbar_height + 'px';
      } else {
        document.getElementById('navbar_top').classList.remove('fixed-top');
         // remove padding top from body
        document.body.style.paddingTop = '0';
      } 
  });
}); 


document.addEventListener("DOMContentLoaded", function(){
// make it as accordion for smaller screens
if (window.innerWidth > 992) {

    document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){

        everyitem.addEventListener('mouseover', function(e){

            let el_link = this.querySelector('a[data-bs-toggle]');

            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.add('show');
                nextEl.classList.add('show');
            }

        });
        everyitem.addEventListener('mouseleave', function(e){
            let el_link = this.querySelector('a[data-bs-toggle]');

            if(el_link != null){
                let nextEl = el_link.nextElementSibling;
                el_link.classList.remove('show');
                nextEl.classList.remove('show');
            }


        })
    });

}
// end if innerWidth
}); 
// DOMContentLoaded  end


$('ul.navbar-nav li.dropdown').hover(function() {
  $(this).find('.dropdown').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown').stop(true, true).delay(200).fadeOut(500);
});



</script>

<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
  }
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<div class="topbg-color py-2">
        <div class="container">
            <div class="row py-1">

                <div class="col-xs-6 col-sm-6 col-md-6 col-xl-6 col-xxl-6">
                    <div class="d-flex justify-content-left content_area">
                        <div class="t-icon"><i class="t-icon bi bi-telephone-outbound"></i> <?= $contacts->phone1 ?> </div>   &nbsp; &nbsp;  |  &nbsp; &nbsp; 
                        <div class="t-icon"><i class="t-icon bi bi-envelope-fill"></i> <?= $contacts->email1 ?>  </div>
                    </div>
                </div>

             <!-- <div class="col-xs-12 col-sm-12 col-md-4 col-xl-4 col-xxl-4">
                        <div class="d-flex justify-content-center px-5 content_area">
                            <div class="">
                                </?= isset($contacts->facebook) && $contacts->facebook != null && trim($contacts->facebook) != '' ? '<strong><a target="_blank" href="' . $contacts->facebook . '"><span style="font-size: 17px;"><i class="bi bi-facebook"></i></span></a></strong>&nbsp;&nbsp;&nbsp;' : '' ?>
                                </?= isset($contacts->whatsapp) && $contacts->whatsapp != null && trim($contacts->whatsapp) != '' ? '<strong><a target="_blank" href="' . $contacts->whatsapp . '"><span style="font-size: 17px;"><i class="bi bi-whatsapp"></i></span></a></strong>&nbsp;&nbsp;&nbsp;' : '' ?>
                                </?= isset($contacts->instagram) && $contacts->instagram != null && trim($contacts->instagram) != '' ? '<strong><a target="_blank" href="' . $contacts->instagram . '"><span style="font-size: 17px;"><i class="bi bi-instagram"></i></i></span></a></strong>&nbsp;&nbsp;&nbsp;' : '' ?>
                                </?= isset($contacts->twitter) && $contacts->twitter != null && trim($contacts->twitter) != '' ? '<strong><a target="_blank" href="' . $contacts->twitter . '"><span style="font-size: 17px;"><i class="bi bi-twitter"></i></span></a></strong>&nbsp;&nbsp;&nbsp;' : '' ?>
                                </?= isset($contacts->linkedin) && $contacts->linkedin != null && trim($contacts->linkedin) != '' ? '<strong><a target="_blank" href="' . $contacts->linkedin . '"><span style="font-size: 17px;"><i class="bi bi-linkedin"></i></span></a></strong>&nbsp;&nbsp;&nbsp;' : '' ?>
                                </?= isset($contacts->youtube) && $contacts->youtube != null && trim($contacts->youtube) != '' ? '<strong><a target="_blank" href="' . $contacts->youtube . '"><span style="font-size: 17px;"><i class="bi bi-youtube"></i></span></a></strong>&nbsp;&nbsp;&nbsp;' : '' ?>
                            </div>
                        </div>
                    </div> -->

                    <!--  <div class="col-xs-6 col-sm-6 col-md-3 col-xl-3 col-xxl-3">
                        <div class="content_area d-flex justify-content-center">
                           <div class=""><i class="t-icon bi bi-phone"></i> </?= $contacts->phone1 ?>  </div> 
                        </div>
                    </div>-->

                    <div class="col-xs-6 col-sm-6 col-md-6 col-xl-6 col-xxl-6">
                        <div class="d-flex justify-content-right content_area">
                        <?php foreach ($menus as $menu): ?>
                           
                            <?php if ($menu->show_on_top == 1) { ?>
                                <ul class="menuItems">
                                <a href="<?= $menu->menu_link ?>" class="">
                                    <li><?= $menu->name ?> |</li>
                                </a>
                                </ul>
                            <?php } elseif ($menu->has('child_menus') && (!empty($menu->child_menus))) { ?>
                            
                                <?php foreach ($menu->child_menus as $sub): ?>
                                <?php if ($sub->show_on_top == 1) { ?>
                                    <a href="<?= $sub->menu_link ?>" class="">
                                        <?= $sub->name ?>
                                    </a>
                                <?php } ?>
                                <?php endforeach; ?>
                                
                            <?php } ?>

                            <?php endforeach; ?>
                        
                        </div>
                    
                    </div>
                


            </div>

    </div>
</div>





<div class="navbar-wrap" style="">
    <nav id="navbar_top" class="navbar navbar-expand-lg navbar-dark navbg-color navbar-fixed-topn">


        <!-- <a class="navbar-brand" href="#"> -->
        <div class="logo-aspect-div" style="margin-left:20px;"> 
            <?php echo $this->Html->link(
                $this->Html->image($appSettings['SITE-LOGO'], ['style' => ""]),
                ['controller' => 'home'],
                ['escape' => false, 'class' => "navbar-brand"]
            ); ?>
        </div>
        <!-- </a> -->

        <!-- <span class="navbar-brand mb-0 h1 hide">Menu</span> -->
        <button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="container text-end text-align-right d-flex justify-content-end" style="">

            <div class="collapse navbar-collapse text-end text-align-right d-flex justify-content-end" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <?php foreach ($menus as $menu):

                        if ($menu->show_button !== 1):

                            if (!$menu->has('child_menus') || sizeof($menu->child_menus) <= 0) {
                                ?>

                                <li class="nav-item">
                                    <?= $this->Html->link($menu->name, ['controller' => $menu->slug, 'action' => 'index'], ['class' => 'nav-link']) ?>
                                </li>

                            <?php } else { ?>

                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <?= $menu->name ?>
                                    </a>

                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                        <?php foreach ($menu->child_menus as $sub): ?>
                                            <?php if (1 == 1) { ?>
                                                <li>
                                                    <?= $this->Html->link(
                                                        $sub->name,
                                                        ['controller' => $menu->slug, 'action' => $sub->slug],
                                                        ['class' => 'dropdown-item', 'style' => ';']
                                                    ) ?>
                                                </li>
                                            <?php } else { ?>

                                                <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle"
                                                        data-toggle="dropdown">
                                                        <?= $sub[2] ?>
                                                    </a>
                                                    <ul class="dropdown-menu">
                                                        <?php foreach ($sub as $subsub): ?>
                                                            <li>
                                                                <?= $menu->name ?>
                                                            </li>
                                                        <?php endforeach ?>
                                                    </ul>
                                                </li>
                                            <?php } ?>
                                        <?php endforeach ?>

                                    </ul>

                                </li>

                            <?php } ?>
                        <?php endif ?>
                    <?php endforeach ?>

                    <?php foreach ($menus as $menu): ?>
                        <?php if ($menu->show_button == 1): ?>
                            <li class="nav-item">
                                <button class="btn btn-danger my-2 my-sm-0 mx-2" type="button">
                                    <?= $this->Html->link($menu->name, ['controller' => $menu->slug, 'action' => 'index'], ['class' => 'nav-links']) ?>
                                </button>
                            </li>
                        <?php endif ?>
                    <?php endforeach ?>

                </ul>

            </div>
        </div>
    </nav>
</div>


</header>