<style>
/* .topnav-bg {
  background: #16222A;
  background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
  background: linear-gradient(59deg, #3A6073, #16222A);
  color: white;
} */

.logo-aspect-div {
    /* width: 360px;
    height: 270px; */
    /* aspect-ratio: 16 / 9;  */
     /* aspect-ratio: 4 / 3;  */
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    /* background: #fff; */
    padding:10px 5px;

}

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


.topnav-bg {
    background: #f3f4f8;
    padding: 15px 0px 20px 0px;
    color: #000;
    font-family: 'arial', 'Roboto', sans-serif;
}

.top_nav_rectangle_logo {
    width: auto;
    height: 65px;
}

.top-bar-contents {
    padding-top: 10px;
}


.fixed-top.navbar {
    padding: 10px 0px;
}

.navbg-color {
    /* background-color: #f0f0f0; */
    background-color: #fff;
    padding: 0px 0px 0px 20px!important;
    margin:0px 20px;
    /* -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4); */
}

.nav-link a {
    color: #000 !important;
    font-size: 15px;
}

.nav-link a:hover {
    color: #000 !important;
    font-size: 15px;
}

.nav-item {
    padding: 0px 10px;
}


.nav-item a {
    color: #000 !important;
    font-size: 15px;
    font-weight: 600;
    /* text-transform: uppercase; */
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.nav-item a:hover {
    color: #fff !important;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    /* margin-top: 40px!important; */
}

.dropdown ul li a {
    color: #000 !important;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    margin: 0px;
    padding: 5px 0px;
    margin-top: 5px;
}

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

.navbar-wrap {
    /* padding: 0px 0px; */
    position:relative;
    
}

.logoImg {
    /* background-color: #000; */
}

.top_nav_logo {
    height: 80px;

}

.rectangle-logo {
    width: auto;
    height: 100px;
    object-fit: contain;
}

.top-bar-contents {
    padding-top: 20px;
    text-align: right;
    font-size: 20px;
}

.top-bar-contents .fa {
    color: #0b42be;
    font-size: 20px;
}



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: #e7d073 !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: 8px 15px 10px;
    margin: 0 12px 0 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

nav.navbar.bootsnav ul.nav > li.dropdown > a{ padding: 8px 30px 10px 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: #e7d073;
    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: #063507 !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;
    }
}



************ Media for Very Smaller Screen ********************

/* Responsive - Very Smaller Screen */
@media screen and (max-width: 320px) {
.logo-aspect-div img {
    object-fit: contain;
     width: 80px;
    /* height: 270px; */
    max-height: 101px;
    /* aspect-ratio: 4 / 3; */
    margin-left:-50px;
}


}



/* Responsive - Smaller Screen */
@media screen and (max-width: 640px) {
.logo-aspect-div img {
    object-fit: contain;
     width: 100px;
    /* height: 270px; */
    max-height: 101px;
    /* aspect-ratio: 4 / 3; */
}

.navbar-toggler{
    font-size:9px!important;
}

.content_area{
    color:#fff;
    font-size:11px;
    text-align:inline;
    float:left;
}

.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://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>

<?= $this->Html->script('../js/jquery-1.11.0.min.js') ?>


<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">



<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">






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

// jquery ready start
$(document).ready(function() {
    // jQuery code

    ///////////////// fixed menu on scroll for desctop
    if ($(window).width() > 992) {

        var navbar_height = $('.navbar').outerHeight();

        $(window).scroll(function() {
            if ($(this).scrollTop() > 300) {
                $('.navbar-wrap').css('height', navbar_height + 'px');
                $('#navbar_top').addClass("fixed-top");

            } else {
                $('#navbar_top').removeClass("fixed-top");
                $('.navbar-wrap').css('height', 'auto');
            }
        });
    } // end if


}); // jquery end


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
</script>




<div class="navbar-wrap" style="position:relative; z-index:999; margin-top:50px;">
    <nav id="navbar_top" class="navbar navbar-expand-lg navbar-dark navbg-color">

        <!-- <a class="navbar-brand" href="#"> -->
            <div class="logo-aspect-div">
                <?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 justify-content-center text-center">





            <div class="collapse navbar-collapse justify-content-center text-center" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <?php foreach ($menus as $menu) :
      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 } endforeach ?>
                </ul>
            </div>
        </div>
    </nav>
</div>


</header>