@import url('https://fonts.googleapis.com/css?family=Catamaran:300,400,500,600,700,800');

.web-header {
    top: 0 ;
    width: 100% ;
    z-index: 3000 ;
    position: fixed ;
    background: transparent ;
    -webkit-transition: all 500ms ease ;
    -moz-transition: all 500ms ease ;
    -o-transition: all 500ms ease ;
    -ms-transition: all 500ms ease ;
    transition: all 500ms ease ; }
.header-flyer img {
    height: 65px ;
    overflow: hidden ;
    transition: all .2s ease-in-out ; }
.header-flyer img {
    width: 100% ;
    height: 100% ;
    display: block ;
    object-fit: contain ; }
.header-top {
    display: none;
    height: 32px ;
    color: #424242 ;
    font-size: 11px ;
    overflow: hidden ;
    background: #f5f5f5 ;
    text-transform: uppercase ;
    transition: all .2s ease-in-out ; }
.header-top-ul, .header-top-ul:after {
    clear: both ; }
.header-top-ul:after, .header-top-ul:before {
    content: "" ;
    display: table ; }
.header-top-ul {
    padding: 0 ;
    height: 20px ;
    margin: 6px 0 ; }
.header-top-ul > li {
    float: left ;
    padding: 0 5px ; }
.header-top-ul > li.information {
    width: 75% ;
    overflow: hidden ;
    text-overflow: ellipsis ;
    display: -webkit-box ;
    -webkit-line-clamp: 1 ;
    -webkit-box-orient: vertical ; }
@media only screen and (max-width: 480px) {
    .header-top-ul > li.information {
        width: 65% ; } 
}
.header-top-ul > li.language {
    width: auto ;
    float: right ; }
.header-language-ul, .header-language-ul:after {
    clear: both ; }
.header-language-ul:after, .header-language-ul:before {
    content: "" ;
    display: table ; }
.header-language-ul {
    margin: 0 auto ; }
.header-language-ul li {
    padding: 0 ;
    float: left ;
    margin-left: 10px ; }
.header-language-ul li:first-child {
    margin-left: 0 ; }
.header-middle {
    padding: 0 ;
    background-image: linear-gradient(to bottom right, #ffffff, #ffffff, #ffffff);
    /*height: 90px ;*/
    /* background: transparent ; */
    transition: all .2s ease-in-out ;
    font-family: Catamaran,sans-serif!important; }
.header-middle .logo a {
    display: block ; }
.header-middle .logo a img {
    width: 70% ;
    height: 90px ;
    /* padding: 25px 0 ; */
    margin: 0 auto ;
    display: block ;
    object-fit: contain ; }
.navigation_menu_box {
    line-height: 90px ; }
    /* .navigation_menu_box {
        line-height: 90px ; } */
.menu > ul:before, .menu > ul:after {
    content: "" ;
    display: table ;
    font-family: Merriweather,sans-serif; }
.menu > ul:after {
    clear: both ; }
.menu > ul {
    padding: 0 ;
    width: 100% ;
    margin: 0 auto ;
    list-style: none ;
    position: relative ;
    text-align: center ;
    box-sizing: border-box ; }
@media (max-width: 769px) {
    .menu > ul {
    display: none ;
    }
}



.menu > ul > li {
    font-weight: 600 ;
    padding-bottom: 0 ;
    display: inline-block ; }
.menu > ul > li > a {
    display: block ;
    color: #262626 ;
    font-size: 15px ; 
    font-family: Catamaran, sans-serif;
    padding: 0 20px ;
    font-weight: 600 ;
    letter-spacing: 0.5px ;
    text-decoration: none ;
    transition: transform 0.5s ;
    text-transform: uppercase; }

.menu > ul > li > a > span {
    position: relative ;
    font-size: 0.95rem;
    letter-spacing: .1em;
    color: #000000; 
    transition: 0.5s;
}
.menu > ul > li > a> span:hover {
    transform: scale(1.1);
    color: #65C8C9; 
    border-bottom: 3px solid #65C8C9;
}
.menu > ul > li > a:hover {
    transform: scale(1.1);
    color: #65C8C9; 
}

.menu > ul > li > a > span:before {
    left: 0 ;
    width: 0 ;
    content: '' ;
    height: 1px ;
    bottom: -2px ;
    display: block ;
    position: absolute ;
    -webkit-transition: width 0.3s ease ;
    -moz-transition: width 0.3s ease ;
    -ms-transition: width 0.3s ease ;
    -o-transition: width 0.3s ease ;
    transition: width 0.3s ease ;
    visibility: hidden ;  }

.menu > ul > li > ul:before, .menu > ul > li > ul:after {
    content: "" ;
    display: table ; }
.menu > ul > li > ul:after {
    clear: both ; }
.menu > ul > li > ul {
    left: 0 ;
    margin: 0 ;
    width: 100% ;
    z-index: 99 ;
    height: 300px ;
    display: none ;
    padding: 20px ;
    overflow: auto ;
    list-style: none ;
    position: absolute ;
    background: #f0f0f0 ;
    box-sizing: border-box ; }
.menu > ul > li > ul::-webkit-scrollbar-track {
    border-radius: 10px ;
    background-color: #F5F5F5 ;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) ; }
.menu > ul > li > ul::-webkit-scrollbar {
    width: 6px ;
    background-color: #F5F5F5 ; }
.menu > ul > li > ul::-webkit-scrollbar-thumb {
    border-radius: 10px ;
    background-color: #000 ;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3) ; }
.menu > ul > li > ul.normal-sub {
left: auto ;
width: 300px ;
padding: 10px 20px ; }
.menu > ul > li > ul > li {
    margin: 0 ;
    width: 25% ;
    float: left ;
    list-style: none ;
    background: none ;
    text-align: left ;
    padding-bottom: 0 ; }
.menu > ul > li > ul > li a {
    width: 100% ;
    color: #777 ;
    display: block ;
    padding: .2em 0 ;
    line-height: initial ;
    text-transform: capitalize ;
    border-bottom: 1px solid #ccc ; }
.menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after {
    content: "" ;
    display: table ; }
.menu > ul > li > ul > li > ul:after {
    clear: both ; }
.menu > ul > li > ul > li > ul {
    padding: 0 ;
    display: block ;
    margin: 10px 0 0 ;
    list-style: none ;
    box-sizing: border-box ; }
.header-icon-ul, .header-icon-ul:after {
    clear: both ; }
.header-icon-ul:after, .header-icon-ul:before {
    content: "" ;
    display: table ; }
.header-icon-ul {
    width: 100% ;
    margin: 0 auto ;
    line-height: 90px ; }
.header-icon-ul li {
    padding: 0 ;
    float: right ;
    position: relative ;
    margin-right: 15px ; 
    color: #222222;}
.header-icon-ul li a {
    display: inline-block ;
    position: relative ; 
    color: #222222;
    transition: color 0.5s, transform 0.5s;
}
.header-icon-ul li a:hover{
    position: relative ; 
    text-decoration: underline;
    color: #65C8C9;
    transform: scale(1.1);
}
.header-icon-ul li i {
    font-size: 24px ;
    vertical-align: middle ; }
@media (min-width: 981px) and (max-width: 1200px) {
    .header-icon-ul li i {
        font-size: 18px ; 
    } 
}
@media (min-width: 768px) and (max-width: 980px) {
    .header-icon-ul li i {
        font-size: 17px ;
        padding-right: 8px ; 
    } 
}

.header-icon-ul li a .cart_item {
    top: 40% ;
    color: #fff ;
    width: 18px ;
    right: -10px ;
    font-size: 12px ;
    line-height: 18px ;
    position: absolute ;
    text-align: center ;
    border-radius: 50% ;
    background-color: #000 ;
    transform: translate(0, 50%) ; 
}

.header-icon-ul li a .cart_item:hover {
    background-color: #65C8C9;
    color: white;
}

@media (min-width: 768px) and (max-width: 980px) {
    .header-icon-ul li a .cart_item {
        right: 0px ; } 
}
.header-icon-ul li .welcomeText {
    font-size: 12px ;
    white-space: nowrap ;
    display: inline-block ; }
.header-icon-ul li .dropdown {
    z-index: 1000 ;
    cursor: pointer ;
    position: relative ;
    display: inline-block ; 
    transition: color 0.5s, transform 0.5s, border 0.5s;
}
.header-icon-ul li .dropdown:hover {
    color: #65C8C9;
    transform: scale(1.1);
}
.header-icon-ul li .dropdown-content {
    z-index: 1 ;
    top: 60px ;
    right: 50% ;
    /* right: 182%; */
    display: none ;
    min-width: 120px ;
    position: absolute ;
    text-align: center ;
    line-height: initial ;
    background-color: #fff ;
    /* background-color: #f9f9f9 ; */
    transform: translate(50%, 0) ;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) ; }
    

@media screen and (max-width:769px) {
    .header-icon-ul li .dropdown-content {
        /* right: 182%; */
        transform: translate(15%, 0) ;
        /* right: 235%; */
        }
}
.header-icon-ul li .dropdown:hover .dropdown-content {
    display: block ; }
.header-icon-ul li .dropdown-content a {
    color: black ;
    display: block ;
    padding: 12px 16px ;
    text-decoration: none ;
    border-top: 1px solid #ddd ; 
    transition: color 0.3s, transform 0.5s, border 0.5s;
}
.header-icon-ul li .dropdown-content a:hover {
    background-color: #65C8C9 ;
color: white; }
.header-icon-ul li .search-control {
    float:right ;
    width: 130px ;
    margin: 26.5px 0 ;
    padding-right: 35px ;
    -webkit-transition: width 0.4s ease-in-out ;
    transition: width 0.4s ease-in-out ; }
.header-icon-ul li .search-control:focus {
    width: 100% ; }
.header-icon-ul li .search-icon {
    top: 50% ;
    right: 10px ;
    position: absolute ;
    transform: translate(0, -50%) ; }
.menu-mobile, .menu-mobile-close {
    display: none ; }
.menu-mobile:after {
    color: rgb(0, 0, 0) ;
    content: "\f0c9" ;
    font-size: 24px ;
    /* font-size: 2.1rem ; */
    position: relative ;
    font-family: "Fontawesome" ;
    -webkit-transform: translateY(-25%) ;
    -ms-transform: translateY(-25%) ;
    transform: translateY(-25%) ; }
.menu-mobile-close:after {
    color: rgb(0, 0, 0) ;
    content: "\f00d" ;
    font-size: 2.1rem ;
    position: relative ;
    font-family: "Fontawesome" ;
    -webkit-transform: translateY(-25%) ;
    -ms-transform: translateY(-25%) ;
    transform: translateY(-25%) ; }
.menu-dropdown-icon:before, .menu-dropdown-icon-open:before {
    right: 0 ;
    z-index: 1 ;
    color: #000 ;
    display: none ;
    cursor: pointer ;
    padding: 12px 2em ;
    position: absolute ;
    font-family: "Fontawesome" ;
    font-weight:100 }
.menu-dropdown-icon:before {
    content: "\f105" ; }
.menu-dropdown-icon-open:before {
    content: "\f107" ; }

.menu-dropdown-icon:hover {
    /* background-color: #f4e9d7; */
    /* margin-bottom: 1rem; */
    /* text-decoration: underline; */
    /* border-bottom: 2px solid yellow; */
}

/* .menu > ul > li > a > span:hover {
    border-bottom: 3px solid #6f6f6f;
}  */

.web-header-scroll {
box-shadow: 0 0px 10px grey ;
background: white; }
.web-header-scroll .header-flyer {
    height: 0 ; }
.web-header-scroll .header-top {
    height: 0 ; }
.web-header-scroll .header-middle {
    /*height: 85px ;*/ }
.web-header-scroll .header-middle span{
    color: #000000;
    transition: color 0.5s, transform 0.5s, border 0.5s;
}
.web-header-scroll .header-middle span:hover{
    color: #65C8C9 ; 
    transform: scale(1.1); 
    padding-bottom:5px;
    /* border-bottom: 1px solid #65C8C9;  */
}
.web-header-scroll .header-icon-ul li i {
    color: rgb(0, 0, 0) ; 
    transition: color 0.5s, transform 0.5s, border 0.5s;
}
.web-header-scroll .header-icon-ul li i:hover {
        color: #65C8C9 ; 
        transform: scale(1.1); 
        padding-bottom:5px;
        border-bottom: 1px solid #65C8C9; 
}
        
.web-header-scroll .header-middle .logo a img {
    height: 80px ; }
.web-header-scroll .navigation_menu_box {
    line-height: 85px ; }
.web-header-scroll .header-icon-ul li .search-control {
    margin: 21.5px 0 ; }
.web-header-scroll .header-icon-ul {
    line-height: 85px ; }


.web-content {
    margin-top: 0px!important; }

@media only screen and (max-width: 426px) {
    .header-icon-ul li.search {
        display: none ; }
}

@media screen and (max-width:1176px) {
    .menu > ul > li > a > span {
        position: relative;
        font-size: 15px;
        letter-spacing: 0.02em;
    }

    .web-header-scroll .header-middle .logo a img {
        height: 60px;
    }

    .header-middle .logo a img {
        width: 70%;
        margin: 0 auto;
        display: block;
        object-fit: contain;
    }
}

@media only screen and (max-width: 769px) {
    .header {
        position: relative ; }
    .header-middle {
        height: 90px ;
        position: relative ; }
    .header-middle .logo a img {
        top: 50% ;
        left: 50% ;
        z-index: 1 ;
        width: 38% ;
        padding: 0 15px ;
        position: absolute ;
        transform: translate(-50%, -50%) ; }
    .header-icon-ul li.cart {
        display: none ; }
    .menu-mobile, .menu-mobile-close {
        top: 50% ;
        left: 20px ;
        z-index: 1 ;
        display: block ;
        position: absolute ;
        transform: translate(0, -50%) ; }
    .menu-dropdown-icon:before,  .menu-dropdown-icon-open:before{
        display: block ; }
    .menu > ul {
        display: none ; }
    .menu > ul > li {
        width: 100% ;
        float: none ;
        margin-left: 0 ;
        position: relative ; }
    .menu > ul > li > a {
        width: 100% ;
        padding: 1.5em ;
        display: block ;
        line-height: initial ; }
    .menu > ul > li > ul {
        position: relative ; }
    .menu > ul > li > ul.normal-sub {
        width: 100% ; }
    .menu > ul > li > ul > li {
        float: none ;
        width: 100% ;
        margin-top: 20px ; }
    .menu > ul > li > ul > li:first-child {
        margin: 0 ; }
    .menu > ul > li > ul > li > ul {
        position: relative ; }
    .menu > ul > li > ul > li > ul > li {
        float: none ; }
    .menu .show-on-mobile {
        left: 0 ;
        top: 85px ;
        line-height: 1 ;
        display: block ;
        overflow: auto ;
        margin-bottom: 0 ;
        position: absolute ;
        background: #dddddd ; }
    .header-icon-ul {
        right: 0 ;
        top: 50% ;
        position: absolute ;
        transform: translate(0, -50%) ; }

    .web-header-scroll {
        display:block ; }

    .web-content {
        margin-top: unset ; }

     
}

/* @media only screen and (max-width: 1035px) */
/* @media only screen and (max-width: 981px) */
@media only screen and (max-width: 988px) {
    .header {
        position: relative ; }
    .header-middle {
        height: 90px ;
        position: relative ; }
    .header-middle .logo a img {
        top: 50% ;
        left: 50% ;
        z-index: 1 ;
        width: 21% ;
        padding: 0 15px ;
        position: absolute ;
        transform: translate(-50%, -50%) ; }
    .menu-mobile, .menu-mobile-close {
        top: 50% ;
        left: 20px ;
        z-index: 1 ;
        display: block ;
        position: absolute ;
        transform: translate(0, -50%) ; }
    .menu-dropdown-icon:before,  .menu-dropdown-icon-open:before{
        display: block ; }
    .menu > ul {
        display: none ; }
    .menu > ul > li {
        width: 100% ;
        float: none ;
        margin-left: 0 ;
        position: relative ; }
    .menu > ul > li > a {
        width: 100% ;
        padding: 10px 35px;
        display: block ;
        line-height: initial ; }
    .menu > ul > li > a > span {
        position: relative;
        font-size: 11px;
        letter-spacing: .15em;
        font-weight: 400;
        color: #333 }
    .menu > ul > li > ul {
        position: relative ; }
    .menu > ul > li > ul.normal-sub {
        width: 100% ; }
    .menu > ul > li > ul > li {
        float: none ;
        width: 100% ;
        margin-top: 20px ; }
    .menu > ul > li > ul > li:first-child {
        margin: 0 ; }
    .menu > ul > li > ul > li > ul {
        position: relative ; }
    .menu > ul > li > ul > li > ul > li {
        float: none ; }
    .menu .show-on-mobile {
        left: 0 ;
        top: 85px ;
        line-height: 1 ;
        display: block ;
        overflow: auto ;
        margin-bottom: 0 ;
        position: absolute ;
        background: #ffffff ; 
        padding: 24px 3px;
    }
    .header-icon-ul {
        right: 0 ;
        top: 50% ;
        position: absolute ;
        transform: translate(0, -50%) ; 
    }

    .web-header-scroll .header-middle span{
        color: #000000;
    }

    .web-header-scroll {
        display:block ; 
    }

    .web-content {
        margin-top: unset ; 
    }


}

/* .menu-grid-group {
    left: 48% ;
    z-index: 1 ;
    display:none ;
    width: 260px ;
    position: absolute ;
    background-color: #ee0000 ;
    transform: translate(-50%, 0px) ; } */

.menu-grid-group {
    /* left: 48%;  */
    z-index: 1;
    display: none;
    width: 38%;
    position: absolute;
    background-color: transparent;
    /* padding-left: 3%; */
    /* padding-top: 2%; */
    line-height: 3rem;
    /* padding-bottom: 2%; */
    box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),  /* small, subtle shadow for fine detail */
    0 6px 12px rgba(0, 0, 0, 0.1), /* medium shadow for depth */
    0 12px 24px rgba(0, 0, 0, 0.2); /* larger shadow for strong emphasis */
    }

.menu-grid-group ul li {
    /* background-color: purple; */
    background-color: white;
    /* border-bottom: 1px solid rgb(167, 167, 167); */
    display: flex;
    justify-content: flex-end;
    line-height: 1.5;
    /* padding-left: 9%; */
    /* padding-bottom: 5%; */
    /* padding-top: 5%; */
    transition: 0.5s;
}


.menu-grid-group a {
    /* letter-spacing: .15em; */
    font-weight: 500;
    color: #000000;
    transition: color 0.5s, transform 0.5s, border 0.5s;
    background-color: white;
    margin-top: 4%;
    padding: 16px 23px;
    display: block;
    text-align: left;
    font-size: 0.8rem;
    width: 100%;
    height: 100%;
    margin-top: 0;
    border-bottom: 1px solid rgb(226 223 223);
    transition: 0.5s;
    /* padding-bottom: 3%; */
}

.menu-grid-group a:hover {
    /* text-decoration: underline; */
    color: #097d7f;
    transform: scale(1.1); 
    background-color: #e9fcfc;
    transform: scale(1.1);
}



/* @media only screen and (max-width: 425px) {
    .header-middle .logo a img {
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 22%;
        padding: 0 15px;
        position: absolute;
        transform: translate(-50%, -50%);
    }
    
} */

@media only screen and (max-width: 375px) {
    /* .header-middle .logo a img {
        top: 50%;
        left: 47%;
        z-index: 1;
        width: 157px;
        padding: 0 15px;
        position: absolute;
        transform: translate(-50%, -50%);
    } */

    
}

@media only screen and (max-width: 375px) {
    .header-middle .logo a img {
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 36%;
        padding: 0 15px;
        position: absolute;
        transform: translate(-50%, -50%);
    }
}

/* @media only screen and (max-width: 1200px) {

    .menu-grid-group {
        width: 100% ; 
        position: absolute;
        transform: translate(0);
        padding: 0 35px;
        left: 0;
    }
} */


/* .menu-grid {
    width: 100% ; 
} */
/* .menu-grid a {
    padding: 10px 23px;
    display: block;
    text-align: left;
    font-size: 0.8rem;
} */

.menu-grid-sizer {
    width: auto ; 
}

.menu-grid-list {
    /* width: 25%; */
    width: 100%;
    /* height: 100%; */
    float: left;
    padding: 0;
    line-height: 1.5;
    /* padding-bottom: 15px; */
    background-color: gold;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.2); */
}





.menu-grid-list.current > a.underline {
    border-bottom: 1px solid #ccc ; 
}

.menu-grid-list-sub {
}

.menu-grid-list-sub .title {
    line-height: 1.5 ;
    font-weight: 100 ; 

}

.menu-grid-list-sub .view-more {
    line-height: 1.5 ;
    font-weight: bold ; }

/* @media only screen and (max-width:1200px){
    .menu-grid a{
        text-align: center;
        color: #333;
        font-size: 12px;
    }
} */

.booking .short-text {
    display: none;
}

@media (max-width: 991px) {
    .booking .full-text {
        display: none;
    }

    .booking .short-text {
        display: none;
    }

    /* change Add your styles here */
    .menu-grid-group {
        left: 48%;
        z-index: 1;
        display: none;
        width: 160px;
        position: relative;
        background-color: #00eeab;
        transform: translate(-50%, 0px);
        width: 69%;
    }
    
    .menu-grid-group a {
        font-size: 12px;
        letter-spacing: .15em;
        font-weight: 500; 
        color: #000000;
        transition: color 0.5s, transform 0.5s, border 0.5s;
        background-color: rgb(255, 255, 255);
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgb(197, 197, 197);
    }

    .menu-grid-group a:hover {
        text-decoration: underline;
        color: #65C8C9;
        transform: scale(1.1); 
    }

}

@media only screen and (max-width: 426px){
    .header-middle .logo a img {
        top: 50%;
        left: 49%;
        z-index: 1;
        width: 34%;
        padding: 0 15px;
        position: absolute;
        transform: translate(-50%, -50%);
    }

}

@media only screen and (max-width: 376px){
    .header-middle .logo a img {
        top: 50%;
        left: 49%;
        z-index: 1;
        width: 36%;
        padding: 0 15px;
        position: absolute;
        transform: translate(-50%, -50%);
    }

}

@media only screen and (max-width: 321px){
    .header-middle .logo a img {
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 41%;
        padding: 0 15px;
        position: absolute;
        transform: translate(-50%, -50%);
    }

}


.logo-columns{
    width: 14.38298%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.logo-columns:hover{
    transform: scale(1.1);
}

.header-row{
    width: 100%;
    height: 100%;
    max-width: 1200px;
    min-width: 300px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    /* overflow-x: hidden;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}


.right-columns{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 35%;
    padding-right: 1%;
}

.booking a{
    color: red;
}