@charset "UTF-8";
.navbar {position: relative; z-index: 15; }
.navbar:hover {z-index: 40}
.dropdown:hover {z-index: 45}
.offcanvas-end,.offcanvas-start {max-width: 80%}
.fixed-onscroll.fixed-top {top: -60px; transform: translateY(60px); transition: transform 0.3s}

.autohide {position: fixed; top: 0; right: 0; left: 0; width: 100%; z-index: 1030}
.autohide.scrolled-down {transform: translateY(-100%); transition: all 0.3s ease-in-out}
.autohide.scrolled-up {transform: translateY(0); transition: all 0.3s ease-in-out}

.dropdown .dropdown-menu,.navbar .dropdown-menu {margin-top: 0; box-shadow: 0 2px 4px rgba(34, 34, 34, 0.15)}
.dropdown .dropdown-menu-end,.navbar .dropdown-menu-end {right: 0; left: auto}
.dropdown .megasubmenu,.navbar .megasubmenu {padding: 1rem}
.dropdown .dropdown-large,.navbar .dropdown-large {padding: 1rem}
.dropdown .dropdown-large{padding:1rem; }
.dropdown .megamenu,.navbar .megamenu {padding: 1rem}
.dropdown .has-megamenu,.navbar .has-megamenu {position: static !important}


.icon-arrow:after {content: "❯"; font-style: normal; line-height: 1; display: inline-block; vertical-align: middle; margin-left: 7px; margin-top: -2px; opacity: 0.3; font-size: 80%}
.screen-darken {content: ''; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); pointer-events: none; z-index:10; opacity:1; visibility:visible; position: fixed;  }

.navbar-styled {background-color: #ffca2a; box-shadow: 0 2px 3px rgba(100, 100, 100, 0.1); font-size: 14px;}
.navbar-styled .navbar-toggler {color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1)}
.navbar-styled .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
.navbar-styled .navbar-brand {font-weight: 600; font-size: 18px;}
.navbar-styled .navbar-nav .nav-link {font-weight: 600; text-transform: uppercase; color: #333; border: 2px solid transparent;}
.navbar-styled .navbar-nav .nav-item.show .nav-link,.navbar-styled .navbar-nav .nav-item:hover .nav-link {border-bottom: 2px solid orange; color: #111}
.navbar-styled .dropdown-menu {border: 0; background-clip: initial; border-radius: 0; box-shadow: 0 1px 5px rgba(70, 70, 70, 0.2)}
.navbar-styled .dropdown-menu .dropdown-item {padding: 0.6rem 1.5rem; border-bottom: 1px solid #f1f1f1}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .dropdown-large{min-width:500px;}
    .navbar {padding: 0;}
    .navbar .nav-link {padding-top: 1rem; padding-bottom: 1rem; padding-left: 0.7rem !important; padding-right: 0.7rem !important}
    .navbar-dark .nav-link.show {background: rgba(255, 255, 255, 0.12)};
    .navbar-light .nav-link.show {background: rgba(0, 0, 0, 0.12);}
    .navbar-nav {align-items: center}
    .dropdown-menu li {position: relative}
    .dropdown-menu .submenu {display: none; position: absolute; left: 100%; top: -7px}
    .dropdown-menu .submenu-left {right: 100%; left: auto}
    .dropdown-menu>li:hover {background-color: #f1f1f1}
    .dropdown-menu>li:hover>.submenu {display: block}
    .megasubmenu {left: 100%; top: 0; min-height: 100%; min-width: 500px}
    .dropdown-menu-end .megasubmenu {left: auto; right: 100%; top: 0}
    .dropdown-menu>li:hover .megasubmenu {display: block}
    .dropdown-large {min-width: 520px}
    .megamenu {left: 0; right: 0; width: 100%}
    .nav-item.hover .dropdown-menu.animate {display: block; opacity: 0; visibility: hidden; margin-top: 0;}
    .nav-item.hover .animate.fade-down {top: 90%; transform: rotateX(-80deg); transform-origin: 0% 0%}
    .nav-item.hover .animate.fade-up {top: 30px}
    .nav-item.hover .dropdown-menu .animate.fade-down {top: 0}
    .nav-item.hover .animate.dropdown-menu.show {display: block;  transition: 0.4s; opacity: 1; visibility: visible; top: 100%; transform: rotateX(0deg)}
    .nav-item.hover .animate.dropdown-menu>li:hover>.megasubmenu,
    .nav-item.hover .animate.dropdown-menu>li:hover>.submenu {display: block; transition: 0.4s; opacity: 1; visibility: visible; top: 0; transform: rotateX(0deg)}
    .dropdown-menu li {position: relative}
    .dropdown-menu li.has-megasubmenu {position: static !important}
    .dropdown-menu li:hover>.dropdown-menu, .dropdown-menu li:hover>.submenu {display: block;  transition: 0.4s; opacity: 1; visibility: visible; top: 0%; transform: rotateX(0deg);}
    .dropdown-menu li:hover>.megasubmenu {display: block; transition: 0.4s; opacity: 1; visibility: visible; top: 0%; transform: rotateX(0deg);}
}

@media (max-width:991px) {
     .dropdown-menu .dropdown-menu {margin-left: 0.7rem; margin-right: 0.7rem; margin-bottom: 0.5rem}
}