@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');

:root{--primary:#294097; --secondary:#ffc72c; --bg:#E5E1DA; --section-pad:60px;}

body{font-size: 18px;font-family: 'Brandon', sans-serif; line-height: 1.5; color:#75797F;}

a,button,.btn, #siteheader, .navbar-brand img, #menu::after{transition:all ease 0.25s;}
a{text-decoration:none;}
.greybg{background: var(--bg);}

img{max-width:100%;}
.btn{border-radius:50px; min-width:200px;}
.btn-warning{text-transform: uppercase;color:var(--primary); font-size:20px; padding:12px 30px 10px; font-weight: bold;}
.btn-warning:hover{background:var(--primary);; color: #fff; border-color:var(--primary);}

h2,.h1{font-size: 40px; color:var(--primary); font-weight:900; text-transform: uppercase;}

#siteheader{position:fixed;z-index: 999; left: 0;right: 0;top: 0; padding:40px 0;}
#siteheader .d-flex{flex-wrap:wrap; justify-content:center; align-items:center;}
#siteheader .navbar-brand img{height:75px;}
#siteheader .nav-pills .nav-item{margin:0 3px;}
#siteheader .nav-pills .nav-link{font-size: 16px;text-transform: uppercase;color: #000; padding:10px 40px;border-radius:50px; position: relative;}
#siteheader .nav-pills .nav-link:after{content:'';display: block; border-radius:50px; background:var(--secondary); position: absolute;top:50%;bottom:50%;left:50%;right:50%; z-index:-1; transition:all ease 0.25s;}
#siteheader .nav-pills .nav-link:hover:after,#siteheader .nav-pills .nav-link.active:after{top: 0;bottom: 0;left: 0;right: 0;}
#siteheader .nav-pills .nav-link.active{color:var(--primary) !important; font-weight:bold; background: none;}
#siteheader.stickhead{padding:8px 0; background:rgba(255,255,255,0.7); backdrop-filter: blur(3px);}
#siteheader.stickhead .nav-pills .nav-link{padding:6px 40px;}
#siteheader.stickhead .navbar-brand img{height:36px;}
#siteheader .social{display: none;}

.mainsliderWrapper{background: url(../images/strip-design.png) center bottom repeat-x, url(../images/bonata-lady.png) top 100px right 100px no-repeat; padding:0 0 30px; background-size:auto, 600px auto; background-color:var(--bg);}
.mainsliderWrapper.onlylady{background: url(../images/bonata-lady.png) top 100px right 100px no-repeat; padding:0 0 30px; background-size:auto, 600px auto; background-color:var(--bg);}
.mainsliderWrapper div{height: 100%;}
#mainslider{padding:0 40px;position:relative}
#mainslider .row{align-items:center;}
#mainslider img{margin:auto;}
#mainslider .row div {height: auto;}
.bannerTxt{padding-left:70px; padding-top: 130px; text-align: center;}
.bannerTxt h1{text-transform: uppercase; color:var(--primary);font-size:36px; font-weight: bold;margin-top:45px;}
.bannerTxt p{font-size: 22px; color: #4f5358;}
.bannerTxt .btn{margin-top:20px; margin-bottom:150px;}

.section{padding-top:var(--section-pad);padding-bottom:var(--section-pad);}
.lemon{
  margin:-30px -100px 0 0;
}

#about h2{text-transform: uppercase;}
/* #about p{color: #75797f;} */
#about .btn{font-size: 16px;}

.menuSection{padding:var(--section-pad) 50px;}
.menuSection .item{padding:30px 20px;}
.owl-nav button{position: absolute;top:50%;font-size:56px; left:0; border: none; line-height: 1;color: #a3a3a3; z-index: 2; transform:translateY(-50%); background:var(--primary)  no-repeat center center !important; background-size: 14px auto !important; border-radius: 50%; width:54px; height: 54px;}
.owl-nav button span{display:none;}

.owl-nav button.owl-prev{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M12 2L2 12L12 22'/%3e%3c/svg%3e") !important; left: -50px;}
.owl-nav button.owl-next{right:0; left:auto; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 2L12 12L2 22'/%3e%3c/svg%3e") !important; right: -50px;}

.owl-dots{display: flex; padding: 0;margin: 0;text-align: center; list-style: none; display:flex; justify-content:center; align-items:center;}
.owl-dots button.owl-dot{margin:0 5px; display:flex;align-items:center; width: 14px;height: 14px; transition: all ease 0.2s; opacity: 0.75;}
.owl-dots button.owl-dot span{text-indent:-9999px; width: 100%;height:100%; border: none; background:var(--secondary);border-radius:50px;}
.owl-dots .owl-dot.active{margin:0 4px; width:30px; opacity: 1;}

/* #recommended{background-color:var(--bg)} */
#recommended h2{font-weight: bold;}
#recommended .slick-arrow{background:var(--primary);width:50px;height: 50px; border-radius:50px;color: #fff;font-size:38px; padding:0 3px 5px 0;}
#recommended .slick-prev{left:5px;}
#recommended .slick-next{right:5px;padding:0 0 5px 3px;}
#recommended .btn{margin-top:34px;}
.recmSlider .slick-list{padding-left: 30px;padding-right: 30px;}
.recmSlider .fooditem{margin:0 30px;}

.fooditem{display: block;border-radius:20px;position: relative;overflow: hidden; height:100%; box-shadow:0px 20px 30px rgba(0, 0, 0, 0.05); overflow: hidden;}
a.fooditem:before{content:''; display: block; background:#fff url(../images/link-icon.svg) no-repeat center center; background-size: 34px; border-radius:10px; width: 60px;height: 60px; position: absolute;z-index:3; top: 50%;left: 50%; transform:translate(-50%,-50%) rotate(80deg) scale(1.5); transition: all ease 0.3s; opacity: 0;}
a.fooditem:after{content:''; display: block; background: #000; position: absolute; top: 0;bottom: 0;left: 0;right:0; z-index:2; opacity: 0; transition: all ease 0.2s; border-radius:14px; transform:scale(0.8);}
a.fooditem:hover:before{transform:translate(-50%,-50%) rotate(0) scale(1); opacity: 1; border-radius:50px;}
a.fooditem:hover:after{opacity:0.4; top: 5px;right: 5px;bottom: 5px;left: 5px; transform:scale(1);}
.fooditem img{width:100%;}
.fooditem .foodinfo{padding:15px 20px; background: #fff; text-align: center;}
.fooditem .menuTitle{text-transform: uppercase;font-weight:bold; margin:20px 0; color: #75797F;}
.fooditem .foodinfo p{color: #75797f;}

.foodbox .foodinfo{display: none;}
.foodbox .fooditem{box-shadow:none;}

#sitefooter{padding-top:70px; font-size: 20px;}
/* #sitefooter .fInfo{padding-right:80px;} */
#sitefooter .footer-logo{height:60px; margin-bottom: 20px;}
.instawrapper{padding:0 40px;}
.eapps-instagram-feed-posts-item-image-wrapper {border-radius: 20px;}
.social a{background:var(--secondary);color:var(--primary); width: 40px;height: 40px;border-radius: 50%;display: block; text-align: center; display: inline-block; margin-right:20px;}
.social svg{transition: all ease 0.25s; height: 40px;}
.social a:hover svg{fill: #fff;}
.social a:hover{background:var(--primary);color:var(--secondary); transform:scale(1.2);}
.social a:last-child{margin-right: 0;}

.copyright{font-size: 16px; padding: 30px; text-align: center; border-top: 2px solid #ddd; margin-top:50px;}
.copyright a{color:#75797F;}
.copyright a:hover{color:#222;}

#sitefooter h5{color:var(--primary); font-size:30px; text-transform: uppercase; font-weight: bold; margin-bottom:20px;}
.fcontact ul{list-style:none; padding: 0;}
.fcontact li{margin-bottom: 15px; display:flex;}
.fcontact a{display:flex; align-items: center;}
.fcontact a:hover{color:var(--primary);}
.fcontact a i{background:var(--secondary);color:var(--primary); width:30px;height:30px;line-height:30px;border-radius: 50%;display: block; font-size:20px; text-align: center; display: inline-block; margin-right:10px;}
.fcontact a{text-decoration: none; color: #75797f;}
.fcontact img{width: 34px; height: 34px; margin-right: 10px;background: var(--secondary);border-radius: 50%;padding: 5px;}
.fcontact li img{margin-top:5px;}
#nav-toggle{background: none;border: none; padding:0; position:fixed;top:37px;right:35px;z-index: 10001; overflow: hidden; }
.stickhead #nav-toggle{top:0;}

.menu_overlay {
    background: #000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: .7;
    position: fixed;
    z-index: 995;
    display: none;
}
/*Hamburger Icon*/
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  transform:scale(1.5, 1);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {transform: rotate(45deg);}
.hamRotate180.active {transform: rotate(180deg);}
.hamRotate.active .line{stroke:#fff}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:var(--primary);
  stroke-width:	4;
  stroke-linecap:round;
}
.ham1 .top {stroke-dasharray: 40 139;}
.ham1 .bottom {stroke-dasharray: 40 180;}
.ham1.active .top {stroke-dashoffset: -98px;}
.ham1.active .bottom {stroke-dashoffset: -138px;}
.ham2 .top {stroke-dasharray: 40 121;}
.ham2 .bottom {stroke-dasharray: 40 121;}
.ham2.active .top {stroke-dashoffset: -102px;}
.ham2.active .bottom {stroke-dashoffset: -102px;}
.ham3 .top {stroke-dasharray: 40 130;}
.ham3 .middle {stroke-dasharray: 40 140;}
.ham3 .bottom {stroke-dasharray: 40 205;}
.ham3.active .top {stroke-dasharray: 75 130; stroke-dashoffset: -63px;}
.ham3.active .middle {stroke-dashoffset: -102px;}
.ham3.active .bottom {stroke-dasharray: 110 205;stroke-dashoffset: -86px;}
.ham4 .top {stroke-dasharray: 40 121;}
.ham4 .bottom {stroke-dasharray: 40 121;}
.ham4.active .top {stroke-dashoffset: -68px;}
.ham4.active .bottom {stroke-dashoffset: -68px;}
.ham5 .top {stroke-dasharray: 40 82;}
.ham5 .bottom {stroke-dasharray: 40 82;}
.ham5.active .top {stroke-dasharray: 14 82;stroke-dashoffset: -72px;}
.ham5.active .bottom {stroke-dasharray: 14 82;stroke-dashoffset: -72px;}
.ham6 .top {stroke-dasharray: 40 172;}
.ham6 .middle {stroke-dasharray: 40 111;}
.ham6 .bottom {stroke-dasharray: 40 172;}
.ham6.active .top {stroke-dashoffset: -132px;}
.ham6.active .middle {stroke-dashoffset: -71px;}
.ham6.active .bottom {stroke-dashoffset: -132px;}
.ham7 .top {stroke-dasharray: 40 82;}
.ham7 .middle {stroke-dasharray: 40 111;}
.ham7 .bottom {stroke-dasharray: 40 161;}
.ham7.active .top {stroke-dasharray: 17 82;stroke-dashoffset: -62px;}
.ham7.active .middle {stroke-dashoffset: 23px;}
.ham7.active .bottom {stroke-dashoffset: -83px;}
.ham8 .top {stroke-dasharray: 40 160;}
.ham8 .middle {stroke-dasharray: 30 142;transform-origin: 50%;transition: transform 400ms;}
.ham8 .bottom {stroke-dasharray: 40 85;transform-origin: 50%;transition: transform 400ms, stroke-dashoffset 400ms;}
.ham8.active .top {stroke-dashoffset: -64px;}
.ham8.active .middle {stroke-dasharray: 40 142;transform: rotate(90deg);}
.ham8.active .bottom {stroke-dashoffset: -64px;}

@-webkit-keyframes fadeIn {
  0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes fadeIn {
  0%{opacity:0;}
  100%{opacity:1;}
}

.darkBanner{background:var(--primary); padding-bottom: 100px;}
#siteheader.darkheader .nav-pills .nav-link{color: #fff;}
#siteheader.darkheader.stickhead .nav-pills .nav-link{color: #000;}
.darkBanner .d-flex{align-items:flex-end;}
.lemon{margin:-30px -100px 0 0;}
.lemonTitle{text-align: center;}
.lemonTitle h1{color: #fff; font-size: 72px; text-transform: uppercase; font-weight: bold; margin-bottom: 50px; line-height:1.5;}
.lemonTitle h1 strong{color:var(--secondary); font-weight: bold;}

.pageHeader{padding-top:180px;text-align: center; margin-bottom: 50px;}

#meals{margin: 0; list-style: none; padding: 0;margin: 0;}
#meals li{margin-bottom:40px; padding:0 25px;}
#meals .fooditem .menuTitle{color: #191d23;}

.bstory{background:var(--primary);color: #fff; margin: 0;}
.bstory p:last-child{margin-bottom: 0;}

.pageHeader_img{padding-top:150px;}
#locations{margin-top: 70px;}

.address{padding:0 50px 0 100px; font-size: 20px;}
.address .d-flex:not(:last-child){margin-bottom:30px;}
.address h4{color:var(--primary); text-transform: uppercase; font-size:20px; margin-bottom:3px;}
.address a{color: #75797f; text-decoration: none;}
.address a:hover{color:var(--primary);}
.address p{margin-bottom: 0;}
.address img{width: 50px; height: 50px; margin-right: 10px;background: var(--secondary);border-radius: 50%;padding: 10px;}
.address i{
    flex:0 0 auto;
    background: var(--secondary);
    color: var(--primary);
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    display: block;
    font-size: 30px;
    text-align: center;
    display: inline-block;
    margin-right: 20px;
}
.gmap iframe{vertical-align: bottom; border-radius:15px; border:5px solid #fff; box-shadow: 3px 5px 60px 0 rgba(0, 0, 0, 0.2);}
.light_golden{background: #faf9f8; padding-top: 70px; padding-bottom: 70px; margin-top: 70px; border-top: 1px solid #ebe6e1;}

.formWrapper{margin-top: 60px;}
.form-control:focus{box-shadow: inset 3px 3px 10px rgba(0,0,0,0.2); border-color: #bfb6a7;}
.has-success,.has-error{position: relative;}
.valid_error{color:#ccc;font-style:italic;text-align:right;font-size:13px;position:absolute;right:18px;}
.has-error .valid_error, .has-success .valid_error{display:block; background:#fff;}
.has-success .valid_error{font-size:14px;line-height:1.4;color:#1f9416}
.valid_error{display:none;color:#fff;color:#e74036;font-size:25px;font-weight:bold;font-style:normal;width:20px;height:20px;border-radius:50%;text-align:center;line-height:0.7;position:absolute;right:25px;bottom:35px;z-index:999;}
.has-error .form-control{border-color: #e74036;}
form .btn{position:relative;height:50px;}

#inquiry {max-width: 900px;margin:0 auto;}
#inquiry .form-group {margin-bottom: 20px;}
#inquiry .form-control {border-radius:50px; font-size:20px; padding-left:1.5rem; padding-right:1.5rem;}
.form-floating>label{left: 10px;}
.form-floating>label:after{display: none;}
#inquiry textarea.form-control {height: 120px; border-radius:20px;}
.btnbar{position: relative;}
.btnbar .btn{height:54px;}

.imgloader, i.imgloader {
  width: 40px;
  height:40px;
  vertical-align: middle;
  display: none;
  position: absolute;
  right:10px;
  top: 2px;
  border-radius: 50%;
  font-size: 25px;
  line-height: 1.5;
}
.imgloader img{-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:relative;left:50%;top:50%;width: 100%;}

.logo-sticky{display: none;}
.darkheader.stickhead .logo-sticky{display: block;}
.darkheader.stickhead .logo-default{display: none;}
.eapps-instagram-feed-posts-item-template-classic{border: none !important;}
.eapps-instagram-feed-posts-item-image-wrapper{border-radius: 10px;}
.eapps-instagram-feed-posts-slider-nav{top:40%;}

.alert{text-align:center; margin-top:20px;}

@media screen and (min-width:992px) {
  .bstory .col-lg-4{position: sticky; top:110px;;}
}

@media all and (min-width:1300px){
  .pageHeader .container{max-width:1200px;}
}
@media all and (max-width:1399px){
  .lemon{width: 600px;}
  .lemonTitle h1{font-size:63px;}
}
@media all and (max-width:1199px){
  #siteheader .navbar-brand img{height: 60px;}
    #siteheader .nav-pills .nav-link{padding:10px 25px !important;}
    .mainsliderWrapper{background-image:url(../images/strip-design.png), url(../images/bonata-lady.png); background-size:auto 60px, auto;}
    .bannerTxt{padding-left: 15px;}
    .bannerTxt h1{font-size:30px; margin-top: 15px;}
    .bannerTxt .btn{margin-bottom: 90px;}
    .recmSlider .fooditem{margin:0 10px;}
    #recommended .slick-arrow{width: 40px;height: 40px; font-size: 27px;}
    #meals li{padding:0 15px;}
    #meals .fooditem .menuTitle{font-size: 20px;margin: 10px 0;}
    .darkBanner{padding-bottom: 70px;}
    .lemon{width:500px; margin-right:-50px;}
    .lemonTitle h1{font-size:48px; width:450px; line-height: 1.4;}
    .pageHeader_img{padding-top:135px;}
}

@media all and (max-width:991px){
    body{line-height: 1.3;}
    #siteheader{padding:20px 0;}
    #nav-toggle{top:16px; right:10px;}
    #siteheader .navbar-brand img{height:45px;}
    #siteheader .nav-pills .nav-link:not(.active):after{display: none;}
    #siteheader .nav-pills .nav-link{font-size: 25px;}
    .slick-dots{margin-top: 20px;}
    #sitefooter{padding-top: 50px; font-size: 16px;}
    #sitefooter .fInfo{margin-bottom:40px;}
    .copyright{padding:15px;}
    #siteheader.haveMenu{bottom: 0; backdrop-filter: blur(1px);}
    #siteheader.haveMenu #nav-toggle{transform:scale(1.2); }
    #menu{position: fixed;z-index: 9999; top: 0;bottom: 0;left:-100%;width:100%;}
    #menu::after{content:''; display: block; background:var(--primary); width: 0;height: 0; border-radius:50%; position: fixed; left: 20%; top: 50px; transform-origin:50px 50px; z-index:-2; opacity:0.9;}
    #menu.showmenu::after{width: 2000px;height: 2000px; left:-80%; top:-120px;}
    #menu.showmenu{left:0;}
    .menuicon{display: block;}
    #menu .nav-pills{display: block; position: absolute; left:50%;top:45%;transform:translate(-50%,-45%); height:370px; width:280px;}
    #menu .nav-item{text-align: center; font-size: 30px; margin-bottom:10px !important; transform:translateY(-20px); opacity: 0;transition: all ease 0.25s;}
    #siteheader .nav-pills .nav-link{color: #fff; padding:15px 20px !important;}
    #menu .nav-pills .nav-item.d-block {opacity:1;  transform:translateY(0);}
    #menu .social{position: absolute; bottom:20px; left:50%; transform:translateX(-50%); opacity:0; visibility: hidden; display: block;}
    #menu .social.show{visibility: visible; animation:fadeIn 0.3s 1; animation-delay:0.6s; animation-fill-mode: forwards;}
    .pageHeader{padding-top:120px;}
    .lemon{width:400px;}
    .bannerTxt{padding-top: 20px;}
    .lemonTitle h1{width: auto; font-size: 36px; margin-bottom: 40px;}
    .darkheader:not(.stickhead) .line{stroke:var(--bg);}
    #siteheader.darkheader.stickhead .nav-pills .nav-link{color: #fff;}
    .bstory img{width:250px; margin-bottom:40px;}
    .pageHeader_img{padding-top:80px;}
    #locations{margin-top: 50px; max-width:100%;}
    .gmap{margin-top:30px; padding:0;}
    .gmap iframe{border-radius:0;}
    .fooditem .menuTitle{margin: 10px 0;}
    .mainsliderWrapper.onlylady{padding-bottom:1px;}
    section.bannerTxt{padding-top: var(--section-pad);}
    .formWrapper{margin-top: 0;}
    .light_golden{margin-top: 0;}
    .instawrapper{padding-left: 15px; overflow: hidden;}
}

@media all and (max-width:767px){
    body{line-height:1.3;}
    #menu.showmenu::after{width: 1400px;height: 1400px;}
    .mainsliderWrapper{padding-top:0; background-position:bottom center, top center;}
    #mainslider{padding:0 30px;}
    .mainsliderWrapper .col-lg-6:not(.bannerTxt){padding:0;}
    .bannerTxt h1{font-size: 22px; margin-bottom:20px;}
    .bannerTxt p{font-size: 20px;}
    h2{font-size:28px;}
    #about .btn{margin-bottom:20px;}
    #sitefooter{padding-top:45px;}
    .fcontact{margin-top:40px;}
    .social a{margin-right:10px;}
    .copyright{margin-top: 20px;}
    #meals li{padding:0 10px; margin-bottom: 30px;}
    .darkBanner .d-flex{flex-wrap:wrap;}
    .lemon{margin:-20px auto 20px; width:350px; flex:0 0 auto;}
    .lemonTitle{width: 100%; flex:0 0 auto;}
    .lemonTitle h1{padding:0 20px;}
    .address{padding:0 15px; font-size:18px;}
    .address h4{font-size:18px;}
    .address i{width: 40px;height: 40px;line-height:40px; font-size:25px;}
    .fooditem{height: auto;}
    #recommended .col-md-4:not(:last-child) .fooditem{margin-bottom: 30px;}
    .menuSection{padding: var(--section-pad) 20px;}
    .owl-nav button{width:36px;height:36px; background-size: 10px auto !important;}
    .owl-nav button.owl-prev{left: -15px;}
    .owl-nav button.owl-next{right: -15px;}
    #recommended{padding-bottom:20px;}
    .instawrapper{padding-right: 15px;}
    
}
@media all and (max-width:575px){
  #meals li{padding:0 20px;}
}
@media all and (max-width:450px){
  #menu.showmenu::after{width: 1100px;height: 1100px;}
  .lemonTitle h1{padding:0 10px; font-size: 30px; margin-bottom:20px;}
}