#navbar .navbar-nav {justify-content: center;}
.menu-icon {width: 36px; height: 36px; margin-right: 0 8px;}
.sub-name {font-size: 16px; font-weight:500;}
.nav-link:focus-visible {outline: 0;box-shadow: none;}

/* Sticky */
main {padding-top: 85px;}

#topHead {position: absolute; width: 100%; z-index: 9;  
   -webkit-backdrop-filter: saturate(2.0) blur(20px);
   backdrop-filter: saturate(2.0) blur(20px);
   background-color: rgba(255, 255, 255, 0.8); 
   transition: all 0.8s ease-in-out; }
#topHead.sticky {position: fixed; top: 0;width: 100%;}
#header {
    background: rgb(0,223,255);
    background: linear-gradient(135deg, rgba(0,223,255,1) 0%, rgba(85,148,255,1) 18%, rgba(83,63,255,1) 38%, rgba(123,0,255,1) 61%, rgba(173,0,225,1) 83%, rgba(61,0,175,1) 100%);
    width: 100%; height: 15px; transition: height 0.3s ease-in-out;
}
#navbar {height:70px; padding: 0;}
#navbar .navbar-nav .nav-link { color: #000 !important; font-weight: 580;}

.logo {display: inline !important; transition: width 0.3s ease-in-out;}
.sticky .d-lg-show {display: inline !important;}
.sticky .d-lg-none {display: none !important;}

/* Search All */
.btn-searchAll {background: transparent; border: none;}
.btn-searchAll .icon {width:20px;}
.btn-searchAll .icon:hover { filter: invert(50%);}
#search-all .dropdown-toggle::after {display: none;}
.autocomplete-photo {border-radius: 5px;}
.ui-menu-item-wrapper {display: flex;align-items: center;}
#search-all ul.ui-widget.ui-widget-content {padding: 0;margin: 0;top: 0 !important;left: 0 !important; width: 100% !important;}
#search-all li.s-input {margin: 15px 15px 5px 15px;}
#search-all li.ui-menu-item {padding: 0;}  
#search-all .ui-menu-item a {text-decoration: none; font-weight: 400; color:#000; padding: 3px 15px;}    
#search-all .dropdown-menu-end {width: 450px; padding: 0 0 10px 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border: none; border-radius: 0 0 5px 5px;}
.ui-menu-item-wrapper.selected {background-color: #f0f0f0; border: 1px solid #ccc;}
.ui-menu-item a:hover, li.selected, .photo-bg {background: transparent; border-radius: 0px;}
li.ui-menu-item {text-decoration: none; display: block;}
.dropdown-menu .form-control, .dropdown-menu .form-select {font-size: 16px; font-weight: 400;}
.scrollable-menu {max-height: 300px; overflow-y: auto;}

/* Navbar Toggler */
.container.navbar-collapse {padding: 0;}
.navbar-toggler {border: none; position: relative;}
.navbar-toggler-icon {width: 30px;height: 2px; background-color: #333; display: block; position: relative; transition: background-color 0.3s, transform 0.3s;}
.navbar-toggler-icon::before, .navbar-toggler-icon::after {
    content: ''; width: 30px; height: 2px; background-color: #333; display: block; position: absolute; transition: transform 0.3s,opacity 0.3s;}
.navbar-toggler-icon::before {top: -8px;}
.navbar-toggler-icon::after {top: 8px;}
.navbar-toggler:focus {background: transparent; box-shadow: none;}

/* Animation for 'X' icon */
.navbar-toggler.collapsed .navbar-toggler-icon {background-color: transparent; background: none;}
.navbar-toggler.collapsed .navbar-toggler-icon::before {transform: rotate(45deg); top: 0;}
.navbar-toggler.collapsed .navbar-toggler-icon::after {transform: rotate(-45deg);top: 0;}

/* Responsive */
@media (min-width: 1200px) {
    .navbar-expand-lg {flex-wrap: nowrap; padding: 0;}
    .navbar {padding: 0;}
    ul.navbar-nav {box-shadow:none !important;}
    #navbar .navbar-nav .nav-link {padding: 10px !important; border-top: 0 !important; font-size: 105%;}
    #navbar .navbar-nav {flex-grow: 1; justify-content: center !important;}
    #search-all .btn-primary {border: none;}
    #search-all .dropdown-menu-end {position: absolute !important; width: 450px !important; }
    .navbar-brand {width: 15% !important;}
    .nav-right { justify-content: end !important; text-align: end !important;}
    
}
@media (min-width: 992px) {
    .navbar-expand-lg {flex-wrap: nowrap; padding: 0;}
    .navbar {padding: 0;}
    ul.navbar-nav {box-shadow:none !important;}
    #navbar .navbar-nav .nav-link {padding: 10px !important; border-top: 0 !important;}
    #navbar .navbar-nav {flex-grow: 1; justify-content: center !important; padding: 0;}
    #search-all .btn-primary {border: none;}
    #search-all .dropdown-menu-end {position: absolute !important; width: 450px !important; }
    .navbar-brand {width: 17% !important; padding: 0;}
    .nav-right { justify-content: end !important; text-align: end !important; display: inline-block !important;}
        
    /* Submenu */
    .navbar-nav .dropdown-menu {
        display: block;opacity: 0;visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease;
        position: absolute; margin-top: 3px; left: -80%;min-width: 100%;padding: 10px 10px;
        background: #fff;box-shadow: rgba(0, 0, 50, 0.300) 0px 0px 8px;border-radius: 10px;
        display: flex !important; flex-wrap: wrap; width: 320px;
    }
    .navbar-nav .dropdown:hover > .dropdown-menu {opacity: 1;visibility: visible;}
    .navbar-nav .dropdown-menu li {flex: 1 1 50%; box-sizing: border-box;}
    .navbar-nav .dropdown-menu > li > a {white-space: nowrap;}
    .navbar-nav .dropdown-menu > li > a:hover {background: #e8e3f4e6; border-radius: 5px;}
    .dropdown-toggle::after {display: none;}
    .pop-md {width: 50px; height: auto;margin-left: 40%;margin-top: -30px;position: absolute;z-index: -1;}
}
@media (max-width: 991.98px) {
    #navbar .navbar-nav {flex-grow: 1; justify-content: space-between;}
    ul.navbar-nav {padding: 0; background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
    #navbar .navbar-nav .nav-link {padding: 15px 25px; border-top: 1px dotted #e9e9e9;}
    #search-all .btn-primary {border: none; background: transparent; color: #000;}
    #search-all .btn-primary:hover {color: #000;}
    #search-all .dropdown-menu-end {width: 370px; right: -45px;}
    .pop-md {display: none;}
    .navbar-nav .dropdown-menu { margin: 0 15px 15px 15px; text-align: center;}    
    .navbar-nav .dropdown-menu li {display: inline-block; width: 150px; box-sizing: border-box; }
    .navbar-nav .dropdown-menu li a {white-space: nowrap;}
    .navbar-brand {width: 200px; margin-left: 10px;}
    .nav-right {width: auto; justify-content: end; text-align: end;}    
    #navbar .container {padding:0px;}
    .navbar-toggler {padding: 15px;}
    ul.navbar-nav {margin-top: -4px;}
}
@media (max-width: 990px) {
   .navbar-brand {width: 170px; margin-left: 10px;}
   
}

@media (min-width: 576px) and (max-width: 767.98px) {
   #booking-button {display: none;}
}
@media (max-width: 575.98px) {
   #booking-button {display: none !important;}
}