body,
    input[type=text],
    input[type=email],
    input[type=url],
    input[type=password],
    textarea {
        font-family: Lato, Helvetica, Arial, sans-serif;
    }
    
    body {
        font-size: 14px;
        letter-spacing: 0px;
        font-weight: 400;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    h7,
    input[type=submit],
    input[type=button],
    a.button,
    .button,
    blockquote,
    #autocomplete li strong,
    #autocomplete li.view_all,
    .post_quote_title,
    label,
    .portfolio_filter_dropdown,
    .woocommerce .woocommerce-ordering select,
    .woocommerce .woocommerce-result-count,
    .woocommerce ul.products li.product .price,
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product a.add_to_cart_button.loading,
    .woocommerce-page ul.products li.product a.add_to_cart_button.loading,
    .woocommerce ul.products li.product a.add_to_cart_button:hover,
    .woocommerce-page ul.products li.product a.add_to_cart_button:hover,
    .woocommerce #page_content_wrapper a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .woocommerce #content input.button,
    .woocommerce-page #page_content_wrapper a.button,
    .woocommerce-page button.button,
    .woocommerce-page input.button,
    .woocommerce-page #respond input#submit,
    .woocommerce-page #content input.button,
    .woocommerce-page button.button:hover,
    .woocommerce-page input.button:hover,
    .woocommerce-page input.button:active,
    .woocommerce #page_content_wrapper a.button,
    .woocommerce-page #page_content_wrapper a.button,
    .woocommerce.columns-4 ul.products li.product a.add_to_cart_button,
    .woocommerce.columns-4 ul.products li.product a.add_to_cart_button:hover,
    strong[itemprop="author"],
    #footer_before_widget_text {
        font-family: Lato, Helvetica, Arial, sans-serif;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    h7 {
        font-weight: 400;
        letter-spacing: 0px;
    }
    
    h1 {
        font-size: 34px;
    }
    
    h2 {
        font-size: 30px;
    }
    
    h3 {
        font-size: 26px;
    }
    
    h4 {
        font-size: 22px;
    }
    
    h5 {
        font-size: 18px;
    }
    
    h6 {
        font-size: 16px;
    }
    
    blockquote {
        font-size: 20px;
        line-height: 1.8;
    }
    
    body,
    .menu_content_classic .menu_title,
    .menu_content_classic .menu_price {
        background-color: #ffffff;
    }
    
    body,
    .pagination a,
    .slider_wrapper .gallery_image_caption h2,
    .post_info a {
        color: #333;
    }
    
    ::selection {
        background-color: #333;
    }
    
    a {
        color: #000000;
    }
    
    a:hover,
    a:active,
    .post_info_comment a i {
        color: #cfa670;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    pre,
    code,
    tt,
    blockquote,
    .post_header h5 a,
    .post_header h3 a,
    .post_header.grid h6 a,
    .post_header.fullwidth h4 a,
    .post_header h5 a,
    blockquote,
    .site_loading_logo_item i,
    .menu_content_classic .menu_price {
        color: #000000;
    }
    
    #social_share_wrapper,
    hr,
    #social_share_wrapper,
    .post.type-post,
    #page_content_wrapper .sidebar .content .sidebar_widget li h2.widgettitle,
    h2.widgettitle,
    h5.widgettitle,
    .comment .right,
    .widget_tag_cloud div a,
    .meta-tags a,
    .tag_cloud a,
    #footer,
    #post_more_wrapper,
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    .woocommerce ul.products li.product .price,
    .woocommerce-page ul.products li.product .price,
    #page_content_wrapper .inner .sidebar_content,
    #page_caption,
    #page_content_wrapper .inner .sidebar_content.left_sidebar,
    .ajax_close,
    .ajax_next,
    .ajax_prev,
    .portfolio_next,
    .portfolio_prev,
    .portfolio_next_prev_wrapper.video .portfolio_prev,
    .portfolio_next_prev_wrapper.video .portfolio_next,
    .separated,
    .blog_next_prev_wrapper,
    #post_more_wrapper h5,
    #ajax_portfolio_wrapper.hidding,
    #ajax_portfolio_wrapper.visible,
    .tabs.vertical .ui-tabs-panel,
    .woocommerce div.product .woocommerce-tabs ul.tabs li,
    .woocommerce #content div.product .woocommerce-tabs ul.tabs li,
    .woocommerce-page div.product .woocommerce-tabs ul.tabs li,
    .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
    .woocommerce div.product .woocommerce-tabs .panel,
    .woocommerce-page div.product .woocommerce-tabs .panel,
    .woocommerce #content div.product .woocommerce-tabs .panel,
    .woocommerce-page #content div.product .woocommerce-tabs .panel,
    .woocommerce table.shop_table,
    .woocommerce-page table.shop_table,
    table tr td,
    .woocommerce .cart-collaterals .cart_totals,
    .woocommerce-page .cart-collaterals .cart_totals,
    .woocommerce .cart-collaterals .shipping_calcuLator,
    .woocommerce-page .cart-collaterals .shipping_calcuLator,
    .woocommerce .cart-collaterals .cart_totals tr td,
    .woocommerce .cart-collaterals .cart_totals tr th,
    .woocommerce-page .cart-collaterals .cart_totals tr td,
    .woocommerce-page .cart-collaterals .cart_totals tr th,
    table tr th,
    .woocommerce #payment,
    .woocommerce-page #payment,
    .woocommerce #payment ul.payment_methods li,
    .woocommerce-page #payment ul.payment_methods li,
    .woocommerce #payment div.form-row,
    .woocommerce-page #payment div.form-row,
    .ui-tabs li:first-child,
    .ui-tabs .ui-tabs-nav li,
    .ui-tabs.vertical .ui-tabs-nav li,
    .ui-tabs.vertical.right .ui-tabs-nav li.ui-state-active,
    .ui-tabs.vertical .ui-tabs-nav li:last-child,
    #page_content_wrapper .inner .sidebar_wrapper ul.sidebar_widget li.widget_nav_menu ul.menu li.current-menu-item a,
    .page_content_wrapper .inner .sidebar_wrapper ul.sidebar_widget li.widget_nav_menu ul.menu li.current-menu-item a,
    .pricing_wrapper,
    .pricing_wrapper li,
    .ui-accordion .ui-accordion-header,
    .ui-accordion .ui-accordion-content {
        border-color: #e1e1e1;
    }
    
    .menu_content_classic .menu_highlight,
    .menu_content_classic .menu_order {
        background-color: #cfa670;
    }
    
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=url],
    textarea {
        background-color: #ffffff;
        color: #444444;
        border-color: #e1e1e1;
    }
    
    input[type=text]:focus,
    input[type=password]:focus,
    input[type=email]:focus,
    input[type=url]:focus,
    textarea:focus {
        border-color: #222222;
    }
    
    input[type=submit],
    input[type=button],
    a.button,
    .button,
    .woocommerce .page_slider a.button,
    a.button.fullwidth,
    .woocommerce-page div.product form.cart .button,
    .woocommerce #respond input#submit.alt,
    .woocommerce a.button.alt,
    .woocommerce button.button.alt,
    .woocommerce input.button.alt {
        font-family: Lato, Helvetica, Arial, sans-serif;
    }
    
    input[type=submit],
    input[type=button],
    a.button,
    .button,
    .pagination span,
    .pagination a:hover,
    .woocommerce .footer_bar .button,
    .woocommerce .footer_bar .button:hover,
    .woocommerce-page div.product form.cart .button,
    .woocommerce #respond input#submit.alt,
    .woocommerce a.button.alt,
    .woocommerce button.button.alt,
    .woocommerce input.button.alt {
        background-color: #222222;
    }
    
    .pagination span,
    .pagination a:hover {
        border-color: #222222;
    }
    
    input[type=submit],
    input[type=button],
    a.button,
    .button,
    .pagination a:hover,
    .woocommerce .footer_bar .button,
    .woocommerce .footer_bar .button:hover,
    .woocommerce-page div.product form.cart .button,
    .woocommerce #respond input#submit.alt,
    .woocommerce a.button.alt,
    .woocommerce button.button.alt,
    .woocommerce input.button.alt {
        color: #ffffff;
        border-color: #222222;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    
    .social_share_bubble {
        background-color: #f0f0f0;
    }
    
    .post_share_bubble a.post_share {
        color: #000000;
    }
    
    #menu_wrapper .nav ul li a,
    #menu_wrapper div .nav li > a {
        font-family: Lato, Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    
    #menu_wrapper .nav ul li a,
    #menu_wrapper div .nav li > a,
    #tg_reservation,
    #tg_reservation:hover,
    #tg_reservation:active,
    #mobile_nav_icon {
        color: #5f5f5f;
    }
    
    #tg_reservation,
    #tg_reservation:hover,
    #tg_reservation:active,
    #mobile_nav_icon {
        border-color: #222222;
    }
    
    #menu_wrapper .nav ul li a.hover,
    #menu_wrapper .nav ul li a:hover,
    #menu_wrapper div .nav li a.hover,
    #menu_wrapper div .nav li a:hover {
        color: #f8f8f8;
    }
    
    #menu_wrapper div .nav > li.current-menu-item > a,
    #menu_wrapper div .nav > li.current-menu-parent > a,
    #menu_wrapper div .nav > li.current-menu-ancestor > a {
        color: hsl(0, 0%, 99%);
    }
    
    .top_bar {
        border-color: #850000;
        background-color: #850000;
    }
    
    #menu_wrapper .nav ul li ul li a,
    #menu_wrapper div .nav li ul li a {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0px;
        text-transform: none;
        color: #cccccc;
    }
    
    #menu_wrapper .nav ul li ul li a:hover,
    #menu_wrapper div .nav li ul li a:hover,
    #menu_wrapper div .nav li.current-menu-parent ul li a:hover,
    #menu_wrapper .nav ul li.megamenu ul li ul li a:hover,
    #menu_wrapper div .nav li.megamenu ul li ul li a:hover,
    #menu_wrapper .nav ul li.megamenu ul li ul li a:active,
    #menu_wrapper div .nav li.megamenu ul li ul li a:active,
    #menu_wrapper div .nav li.megamenu ul li > a,
    #menu_wrapper div .nav li.megamenu ul li > a:hover,
    #menu_wrapper div .nav li.megamenu ul li > a:active {
        color: #ffffff;
    }
    
    #menu_wrapper .nav ul li ul li a:hover,
    #menu_wrapper div .nav li ul li a:hover,
    #menu_wrapper div .nav li.current-menu-parent ul li a:hover,
    #menu_wrapper .nav ul li.megamenu ul li ul li a:hover,
    #menu_wrapper div .nav li.megamenu ul li ul li a:hover,
    #menu_wrapper .nav ul li.megamenu ul li ul li a:active,
    #menu_wrapper div .nav li.megamenu ul li ul li a:active {
        background: #333333;
    }
    
    #menu_wrapper .nav ul li ul,
    #menu_wrapper div .nav li ul {
        background: #000000;
    }
    
    #menu_wrapper div .nav li.megamenu ul li,
    #menu_wrapper .nav ul li ul li,
    #menu_wrapper div .nav li ul li {
        border-color: #333333;
    }
    
    #menu_wrapper div .nav li.megamenu ul li > a,
    #menu_wrapper div .nav li.megamenu ul li > a:hover,
    #menu_wrapper div .nav li.megamenu ul li > a:active {
        font-size: 13px;
    }
    
    #menu_wrapper div .nav li.megamenu ul li {
        border-color: #333333;
    }
    
    .above_top_bar {
        background: #cfa670;
    }
    
    .above_top_bar,
    #top_menu li a,
    .top_contact_info i,
    .top_contact_info a,
    .top_contact_info {
        color: #ffffff;
    }
    
    .above_top_bar .social_wrapper ul li a,
    .above_top_bar .social_wrapper ul li a:hover {
        color: #ffffff;
    }
    
    .mobile_menu_wrapper #searchform {
        background: #333333;
    }
    
    .mobile_menu_wrapper #searchform input[type=text],
    .mobile_menu_wrapper #searchform button i,
    .mobile_menu_wrapper #close_mobile_menu i {
        color: #ffffff;
    }
    
    .mobile_menu_wrapper {
        background-color: #000000;
    }
    
    .mobile_main_nav li a,
    #sub_menu li a {
        font-family: Lato, Helvetica, Arial, sans-serif;
        font-size: 24px;
        text-transform: uppercase;
    }
    
    .mobile_main_nav li a,
    #sub_menu li a,
    .mobile_menu_wrapper .sidebar_wrapper a,
    .mobile_menu_wrapper .sidebar_wrapper,
    #tg_sidemenu_reservation {
        color: #777777;
    }
    
    #tg_sidemenu_reservation {
        border-color: #777777;
    }
    
    .mobile_main_nav li a:hover,
    .mobile_main_nav li a:active,
    #sub_menu li a:hover,
    #sub_menu li a:active,
    .mobile_menu_wrapper .sidebar_wrapper h2.widgettitle,
    .mobile_main_nav li.current-menu-item a,
    #tg_sidemenu_reservation:hover {
        color: #ffffff;
    }
    
    #tg_sidemenu_reservation:hover {
        border-color: #ffffff;
    }
    
    #page_caption {
        background-color: #ffffff;
        padding-top: 41px;
        padding-bottom: 10px;
    }
    
    #page_caption h1,
    .ppb_title {
        font-size: 60px;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: -4px;
        color: #222222;
    }
    
    .ppb_title_first {
        font-family: Kristi, "Comic Sans MS", cursive, sans-serif;
        font-size: 70px;
        line-height: 50px;
        color: #cfa670;
    }
    
    #page_caption.hasbg {
        height: 70vh;
    }
    
    h2.ppb_title {
        font-size: 60px;
        text-transform: uppercase;
    }
    
    .page_header_sep {
        border-color: #cfa670;
    }
    
    .page_tagline,
    .ppb_subtitle,
    .post_header .post_detail,
    .recent_post_detail,
    .post_detail,
    .thumb_content span,
    .portfolio_desc .portfolio_excerpt,
    .testimonial_customer_position,
    .testimonial_customer_company {
        color: #424242;
    }
    
    .post_header .post_detail,
    .recent_post_detail,
    .post_detail,
    .thumb_content span,
    .portfolio_desc .portfolio_excerpt,
    .testimonial_customer_position,
    .testimonial_customer_company {
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    
    .page_tagline {
        font-weight: 900;
    }
    
    #page_content_wrapper .sidebar .content .sidebar_widget li h2.widgettitle,
    h2.widgettitle,
    h5.widgettitle,
    h5.related_post,
    .fullwidth_comment_wrapper h5.comment_header,
    .author_label,
    #respond h3,
    .about_author,
    .related.products h2,
    .cart_totals h2,
    .shipping_calcuLator h2,
    .upsells.products h2,
    .cross-sells h2 {
        font-family: Lato, Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    
    #page_content_wrapper .inner .sidebar_wrapper .sidebar .content,
    .page_content_wrapper .inner .sidebar_wrapper .sidebar .content {
        color: #222222;
    }
    
    #page_content_wrapper .inner .sidebar_wrapper a,
    .page_content_wrapper .inner .sidebar_wrapper a {
        color: #222222;
    }
    
    #page_content_wrapper .inner .sidebar_wrapper a:hover,
    #page_content_wrapper .inner .sidebar_wrapper a:active,
    .page_content_wrapper .inner .sidebar_wrapper a:hover,
    .page_content_wrapper .inner .sidebar_wrapper a:active {
        color: #cfa670;
    }
    
    #page_content_wrapper .sidebar .content .sidebar_widget li h2.widgettitle,
    h2.widgettitle,
    h5.widgettitle,
    h5.related_post,
    .fullwidth_comment_wrapper h5.comment_header,
    .author_label,
    #respond h3,
    .about_author {
        color: #222222;
    }
    
    .footer_bar {
        background-color: #262626;
    }
    
    #footer,
    #copyright {
        color: #999999;
    }
    
    #copyright a,
    #copyright a:active,
    .social_wrapper ul li a,
    #footer a,
    #footer a:active,
    #footer_before_widget_text a,
    #footer_before_widget_text a:active,
    #footer .sidebar_widget li h2.widgettitle {
        color: #ffffff;
    }
    
    #copyright a:hover,
    #footer a:hover,
    .social_wrapper ul li a:hover,
    #footer_before_widget_text a:hover {
        color: #cfa670;
    }
    
    .footer_bar_wrapper {
        border-color: #444444;
        background: #1b1b1b;
    }
    
    .footer_bar_wrapper .social_wrapper ul li a {
        color: #ffffff;
    }
    
    #copyright,
    #footer_menu li a {
        font-size: 12px;
    }
    
    .post_header:not(.single) h5,
    body.single-post .post_header_title h1,
    #post_featured_slider li .slider_image .slide_post h2,
    #autocomplete li strong,
    .post_related strong,
    #footer ul.sidebar_widget .posts.blog li a,
    body.single-post #page_caption h1 {
        font-family: Lato, Helvetica, Arial, sans-serif;
        text-transform: none;
        font-weight: 600;
        letter-spacing: 0px;
    }
    
    .woocommerce ul.products li.product .price ins,
    .woocommerce-page ul.products li.product .price ins,
    .woocommerce ul.products li.product .price,
    .woocommerce-page ul.products li.product .price,
    p.price ins span.amount,
    p.price span.amount,
    .woocommerce #content div.product p.price,
    .woocommerce #content div.product span.price,
    .woocommerce div.product p.price,
    .woocommerce div.product span.price,
    .woocommerce-page #content div.product p.price,
    .woocommerce-page #content div.product span.price,
    .woocommerce-page div.product p.price,
    .woocommerce-page div.product span.price {
        color: #cfa670;
    }

    .tp-caption a {
        color: #ff7302;
        text-shadow: none;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out
    }
    .tp-caption a:hover {
        color: #ffa902
    }



.portfolio_nav { display:none; }
.top_bar.fixed
{
    position: fixed;
    animation-name: slideDown;
    -webkit-animation-name: slideDown;  
    animation-duration: 0.5s;   
    -webkit-animation-duration: 0.5s;
    z-index: 999;
    visibility: visible !important;
    top: 0px;
}

.top_bar.fixed #menu_wrapper div .nav
{
    margin-top: 16px;
}

.top_bar.fixed #searchform
{
    margin-top: 8px;
}

.top_bar.fixed .header_cart_wrapper
{
    margin-top: 21px;
}

.top_bar.fixed #menu_wrapper div .nav > li > a
{
    padding-bottom: 24px;
}

.top_bar.fixed .logo_wrapper img
{
    max-height: 40px;
    width: auto;
}


#page_caption .page_title_wrapper
{
    text-align: left}
.page_title_inner
{
    float: none;
}


#wrapper.hasbg .above_top_bar
{
    background: #222222 !important;
    background: rgb(22, 22, 22, 0.9) !important;
    background: rgba(22, 22, 22, 0.9) !important;
}

#option_btn
{
    position: fixed;
    top: 150px;
    right: -2px;
    cursor:pointer;
    z-index: 9;
    background: #fff;
    border-right: 0;
    width: 40px;
    height: 155px;
    text-align: center;
    border-radius: 5px 0px 0px 5px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    line-height: 1.4;
}

#option_btn span
{
    font-size: 15px;
    line-height: 31px;
    color: #000;
}

#option_wrapper
{
    position: fixed;
    top: 0;
    right:-401px;
    width: 400px;
    background: #fff;
    z-index: 99999;
    font-size: 13px;
    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.1);
    overflow: auto;
    height: 100%;
}

#option_wrapper:hover
{
    overflow-y: auto;
}

#option_wrapper h6.demo_title
{
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
}

.demo_color_list
{
    list-style: none;
    display: block;
    margin: 30px 0 10px 0;
}

.demo_color_list > li
{
    display: inline-block;
    position: relative;
    width: 20%;
    height: auto;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 11px;
    margin-bottom: 15px;
}

.demo_color_list > li .item_content_wrapper
{1
    width: 100%;
}

.demo_color_list > li .item_content_wrapper .item_content
{
    width: 100%;
    box-sizing: border-box;
}

.demo_color_list > li .item_content_wrapper .item_content .item_thumb
{
    width: 30px;
    height: 30px;
    position: relative;
    line-height: 0;
    border-radius: 250px;
    margin: auto;
}

.demo_list
{
    list-style: none;
    display: block;
    float: left;
    margin: 30px 0 30px 0;
}

.demo_list li
{
    display: block;
    float: left;
    position: relative;
    margin-bottom: 15px;
    margin-right: 14px;
    width: calc(50% - 7px);
    overflow: hidden;
    line-height: 0;
}

.demo_list li:nth-child(2n)
{
    margin-right: 0;
}

.demo_list li img
{
    max-width: 100%;
    height: auto;
    line-height: 0;
}

.demo_list li:hover img:not(.no_blur)
{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-filter: blur(2px);
    filter: blur(2px);
    -moz-filter: blur(2px);
}

.demo_list li:hover .demo_thumb_hover_wrapper 
{
    opacity: 1;
}

.demo_thumb_hover_wrapper 
{
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    visibility: visible;
    width: 100%;
    line-height: normal;
}

.demo_thumb_hover_inner
{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.demo_thumb_desc
{
    display: table-cell;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    padding: 0 10% 0 10%;
    box-sizing: border-box;
}

.demo_thumb_hover_inner h6
{
    color: #fff !important;
    line-height: 22px;
    font-size: 14px;
    letter-spacing: 0;
}

.demo_thumb_desc .button.white
{
    margin-top: 5px;
    font-size: 12px !important;
    padding: .4em 2.5em .4em 2.5em;
}

.demo_thumb_desc .button.white:hover
{
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

#option_wrapper .inner
{
    padding: 40px 20px 40px 20px;
    box-sizing: border-box;
}

body.admin-bar #option_wrapper .inner
{
    padding-top: 70px;
}

#option_wrapper .demo_desc
{
    box-sizing: border-box;
    margin-top: 10px;
    padding: 0 10px 0 10px;
    font-size: 12px;
    opacity: 0.7;
    color: #000;
}

.demotip
{
    display: block;
}

@media only screen and (max-width: 768px) {
    html[data-menu=leftmenu] .mobile_menu_wrapper
    {
        right: 0;
        left: initial;
        
        -webkit-transform: translate(400px, 0px);
        -ms-transform: translate(400px, 0px);
        transform: translate(400px, 0px);
        -o-transform: translate(400px, 0px);
    }
}

html[data-menu=leftmenu] .mobile_main_nav, #sub_menu
{
    clear: both;
}

html[data-menu=leftmenu] #wrapper
{
    padding-top: 0;
}
#option_btn
{
    height: 125px;
}

@media only screen and (max-width: 767px) {
#option_wrapper, #option_btn
{
  display: none;
}}






.submit-button { 
    font-size: 15px; 
    font-weight: bold; 
    letter-spacing: 0.8px; 
    padding: 15px; 
    width: 100%;
    display: block; -webkit-appearance: none; 
    background-color:#333; 
    border: 0;
    color: #fff;
    font-style: normal !important;
    cursor: pointer;
    font-style: normal;
    margin-top: 20px;
}

.input1 {
    width: 100%;
}

.flex-active-slide img {
    width: 100%;
}
@media (min-width: 1025px) {
    #mobile_nav_icon {
        display: none !important;
    }
}
/* Force entire section text to white */
.ppb_text,
.ppb_text p,
.ppb_text div,
.ppb_content,
.ppb_content p {
    color: #ffffff !important;
}

/* Force title white */
.ppb_title,
.ppb_title span {
    color: #ffffff !important;
}

/* Subtitle */
.ppb_subtitle {
    color: #ffffff !important;
}

/* Separator line */
.page_header_sep {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}
.ppb_content *,
.ppb_text * {
    color: #ffffff !important;
}
/* Keep quote section dark */
.inner,
.inner div,
.inner p,
.inner span,
.inner .post_detail {
    color: #000000 !important;
}
/* Make section titles, subtitles, separators, and paragraph text white */
.ppb_title,
.ppb_title span,
.ppb_subtitle,
.page_header_sep.left,
.ppb_subtitle + .page_header_sep + * {
    color: #ffffff !important;
}

/* Make separator line white */
.page_header_sep.left {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Force raw text nodes inside the section to white */
.ppb_subtitle + .page_header_sep + * {
    color: #ffffff !important;
}
/* Make all text in the red parallax box white */
.one_half.last.parallax_scroll {
    color: #ffffff !important;
}

/* Make title white */
.one_half.last.parallax_scroll .ppb_title,
.one_half.last.parallax_scroll .ppb_title span {
    color: #ffffff !important;
}

/* Make subtitle white */
.one_half.last.parallax_scroll .ppb_subtitle {
    color: #ffffff !important;
}

/* Make separator line white */
.one_half.last.parallax_scroll .page_header_sep.left {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Force raw text nodes inside the container to white */
.one_half.last.parallax_scroll > *:not(.ppb_title):not(.ppb_subtitle):not(.page_header_sep) {
    color: #ffffff !important;
}
/* Make Reservation button text and border always white */
#tg_reservation,
#tg_reservation:hover,
#tg_reservation:focus,
#tg_reservation:active {
    color: #ffffff !important;           /* white text */
    border: 2px solid #ffffff !important; /* white border */
    background-color: transparent !important; /* optional: keep background transparent */
}
* {
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}

.bg {
  background: #3a3a3a;
  padding: 80px 0;
}

.title {
  color: #fff;
  text-align: center;
  font-size: 48px;
  margin-bottom: 60px;
}

.card-wrapper {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.blog-card {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  cursor: pointer;
}

.blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-img {
  transform: scale(1.1);
}

.text-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(5px);
}

.text-overlay h2 {
  margin: 0;
  font-size: 20px;
  color: #222;
}

.text-overlay p {
  margin-top: 8px;
  font-size: 14px;
  color: #555;
}

/* Responsive */

@media (max-width: 992px) {
  .card-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .card-wrapper {
    grid-template-columns: 1fr;
  }
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background: #f5f5f5;
  margin: 0;
  height: 100%;
}

/* Full screen layout (no white sides) */
.bg {
  background-color: #ffffff;  /* White background */
  width: 100vw;  /* Use full viewport width */
  height: 100vh;  /* Use full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0;  /* Remove padding to fill the screen */
}

/* Title centered */
.title {
  color: #333; /* Dark text for better visibility */
  font-family: 'Raleway', sans-serif;
  font-size: clamp(32px, 6vw, 70px);
  font-weight: 800;
  text-align: center;
  margin-bottom: 60px;
}

/* Full width card wrapper */
.card-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
  gap: 40px;
  width: 100%;
  max-width: 1600px;  /* Adjust for larger screens */
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  align-items: start; /* Align the cards to the top */
}

@media (max-width: 1400px) {
  .card-wrapper {
    grid-template-columns: repeat(3, 1fr); /* 3 cards per row on medium-large screens */
  }
}

@media (max-width: 992px) {
  .card-wrapper {
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row on medium screens */
  }
}

@media (max-width: 600px) {
  .card-wrapper {
    grid-template-columns: 1fr; /* 1 card per row on small screens */
  }
}

/* BLOG CARD - Adjusted for larger size */
.blog-card {
  position: relative;
  width: 100%;
  height: 350px; /* Adjusted height for consistent size */
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: all 0.4s ease;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* Align text to the bottom of the card */
}

/* Image styling */
.blog-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Hover effect for the cards */
.blog-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Overlay for text */
.text-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40%;  /* Adjust height for overlay */
  background: rgba(255,255,255,0.75);
  padding: 15px;
  transition: all 0.4s ease;
  z-index: 1;
}

.blog-card:hover .text-overlay {
  height: 55%; /* Increase the overlay height on hover */
}

.text-overlay h2 {
  color: #222;
  margin-bottom: 8px;
}

.text-overlay p {
  color: #555;
  font-size: 14px;
  height: 38px;
  overflow: hidden;
}

.text-overlay a {
  color: #378AEE;
  text-decoration: none;
  margin-left: 5px;
  visibility: hidden;
}

.blog-card:hover .text-overlay a {
  visibility: visible;
}
/* Full width card wrapper */
.card-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
  gap: 30px; /* Reduce the gap between cards */
  width: 100%;
  max-width: 1200px; /* Optional: You can reduce the max-width for tighter alignment */
  margin-left: 0; /* Align to the left */
  padding: 20px;
  box-sizing: border-box;
  align-items: start; /* Align the cards to the top */
}

/* BLOG CARD - Adjusted for smaller size */
.blog-card {
  position: relative;
  width: 90%; /* Slightly smaller width */
  height: 280px; /* Reduced height */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align text to the bottom of the card */
}

/* Image styling */
.blog-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Hover effect for the cards */
.blog-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Overlay for text */
.text-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30%; /* Adjust height for overlay */
  background: rgba(255, 255, 255, 0.75);
  padding: 15px;
  transition: all 0.4s ease;
  z-index: 1;
}

.blog-card:hover .text-overlay {
  height: 45%; /* Increase the overlay height on hover */
}

.text-overlay h2 {
  color: #222;
  margin-bottom: 8px;
}

.text-overlay p {
  color: #555;
  font-size: 14px;
  height: 38px;
  overflow: hidden;
}

.text-overlay a {
  color: #378AEE;
  text-decoration: none;
  margin-left: 5px;
  visibility: hidden;
}

.blog-card:hover .text-overlay a {
  visibility: visible;
}
.card-wrapper {
  margin: 0 auto !important;        /* Center the grid */
  justify-items: center !important; /* Center cards inside columns */
}

.blog-card {
  width: 100% !important;
  max-width: 350px !important;      /* Clean centered card width */
}
.title {
  margin-bottom: 30px !important; /* reduce space below title */
}

.card-wrapper {
  margin-top: -40px !important;   /* pulls cards upward */
}
/* =========================
   REMOVE BOTTOM WHITE SPACE
========================= */

html, body {
  height: auto !important;
  margin: 0;
  padding: 0;
}

.bg {
  height: auto !important;     /* remove fixed viewport height */
  min-height: 100vh;           /* still full screen if needed */
  padding-bottom: 40px;        /* small breathing space */
}
/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Fix anchor jump glitch */
section {
  scroll-margin-top: 100px; /* adjust to your navbar height */
}
#menu {
  scroll-margin-top: 100px; /* adjust to your navbar height */
}

html {
  scroll-behavior: smooth;
}
#menu .title {
  color: #000 !important;
}
#menu .title {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  color: #000;
  font-size: 60px;
}


/* Body text inside menu */
#menu {
  font-family: 'Lato', sans-serif;
}

/* Main title - Elegant serif */
#menu .title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 70px);
  color: #000;
  letter-spacing: 1px;
}

/* Dish names - Elegant serif */
#menu .text-overlay h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 20px;
}

/* Price - Script style */
#menu .text-overlay a {
  font-family: 'Kristi', cursive;
  font-size: 24px;
  color: #000;
  margin-left: 8px;
}
.blog-card {
  position: relative !important;
  overflow: hidden;
}

.blog-img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  display: block;
}

/* Overlay */
.text-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0;
  width: 100% !important;
  padding: 25px 20px !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.6),
    transparent
  ) !important;
  color: #fff !important;
  text-align: center !important;
}

/* Title */
.text-overlay h2 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

/* Description */
.text-overlay p {
  margin-top: 8px !important;
  font-size: 14px !important;
}

/* Price */
.text-overlay a {
  color: #f5c06f !important;
  font-weight: bold !important;
  text-decoration: none !important;
  margin-left: 8px !important;
}
/* Make overlay text fully white */

.text-overlay,
.text-overlay h2,
.text-overlay p{
  color: #ffffff !important;
}
/* FIX TEXT CUTTING / NOT FULLY VISIBLE */

.blog-card {
  position: relative !important;
  overflow: hidden !important;
}

.blog-img {
  height: 450px !important;   /* increase image height */
  object-fit: cover !important;
}

/* Make overlay grow naturally */
.text-overlay {
  position: absolute !important;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px 20px !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.95),
    rgba(0,0,0,0.6),
    transparent
  ) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

/* Prevent text overflow */
.text-overlay h2 {
  font-size: 20px !important;
  line-height: 1.3 !important;
  word-wrap: break-word;
}

.text-overlay p {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
/* AUTO-RESIZE LONG TITLES */

.text-overlay h2 {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
  margin: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* EXPAND OVERLAY TO FULL IMAGE ON HOVER */

.blog-card {
  position: relative;
  overflow: hidden;
}

/* Default state (small bottom area visible) */
.text-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 35%; /* visible bottom part */

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  padding: 20px;
  text-align: center;
  color: #fff;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.6),
    transparent
  );

  transition: height 0.4s ease;
}

/* Hover state (covers full image) */
.blog-card:hover .text-overlay {
  height: 100%;
  justify-content: center;
}
/* SHOW MORE BUTTON */
.open-menu-modal {
  display: block;
  margin: 40px auto;
  padding: 12px 30px;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

.open-menu-modal:hover {
  background: #f5c06f;
  color: #000;
}

/* MODAL BACKGROUND */
.menu-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* MODAL BOX */
.modal-container {
  background: #111;
  width: 95%;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  position: relative;
  color: #fff;
}

/* CLOSE BUTTON */
.close-modal {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 28px;
  cursor: pointer;
}

/* GRID INSIDE MODAL */
.modal-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
/* Full Menu Title Styling */

.modal-container h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 34px;
  font-weight: 700;
  color: #ffffff !important;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#footer {
  background: #1e1e1e;
  padding: 60px 0;
}

#footer .sidebar_widget.four {
  max-width: 1200px;     /* keeps it centered like the picture */
  margin: 0 auto;       /* removes right gap */
  padding: 0 20px;
  display: flex;        /* proper professional layout */
  justify-content: space-between;
  gap: 50px;
}

/* each column */
#footer .sidebar_widget.four > li {
  flex: 1;
}

/* first column a bit wider (logo + text) */
#footer .sidebar_widget.four > li:first-child {
  flex: 1.3;
}

/* text style */
#footer p,
#footer a {
  color: #aaa;
  font-size: 14px;
  line-height: 1.7;
}

#footer .widgettitle {
  color: #fff;
  margin-bottom: 15px;
}

/* social icons in a row */
.social_wrapper ul {
  display: flex;
  gap: 15px;
  padding: 0;
}

/* recent posts spacing */
.posts li {
  margin-bottom: 12px;
}

/* contact icon spacing */
#footer i {
  margin-right: 8px;
}

/* prevent right overflow */
body {
  overflow-x: hidden;
}
#copyright {
  float: none !important;
  position: static !important;
  text-align: center;
}
#copyright {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}
#gallery {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#gallery + .one {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.photo_wall_wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ===== MODAL MENU LAYOUT ONLY ===== */
#menuModal .modal-menu-grid {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}

/* EACH COURSE (STEAK, RICE BOWLS, ETC.) */
#menuModal .menu-section {
  margin-bottom: 60px;
}

/* COURSE TITLE */
#menuModal .menu-section-title {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 20px;
  color: #fff;
  border-bottom: 2px solid #444;
  padding-bottom: 8px;
}

/* ITEMS PER COURSE → HORIZONTAL */
#menuModal .menu-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;   /* wrap instead of scroll */
  gap: 25px;
}

/* CARD */
#menuModal .blog-card {
  width: 260px;
  height: 180px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

#menuModal .blog-card:hover {
  transform: translateY(-6px);
}

/* IMAGE */
#menuModal .blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY TEXT */
#menuModal .text-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  color: #fff;
}

#menuModal .text-overlay h2 {
  font-size: 16px;
  margin: 0 0 4px 0;
}

#menuModal .text-overlay p {
  font-size: 13px;
  margin: 0;
}

#menuModal .text-overlay a {
  float: right;
  color: #ffd700;
  text-decoration: none;
  font-weight: bold;
}

/* MOBILE */
@media (max-width: 768px) {
  #menuModal .menu-items {
    justify-content: center;
  }

  #menuModal .blog-card {
    width: 100%;
    max-width: 320px;
  }
}
/* FORCE SECTIONS TO STACK VERTICALLY */
#menuModal .modal-menu-grid {
  display: block !important;
  width: 100%;
}

/* EACH COURSE BLOCK */
#menuModal .menu-section {
  width: 100%;
  margin-bottom: 60px;
  display: block;
}

/* TITLE */
#menuModal .menu-section-title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
  border-bottom: 2px solid #444;
  padding-bottom: 8px;
}

/* ITEMS HORIZONTAL */
#menuModal .menu-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;   /* wrap instead of scroll */
  gap: 25px;
}

/* CARD */
#menuModal .blog-card {
  width: 260px;
  height: 180px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
}

/* IMAGE */
#menuModal .blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY */
#menuModal .text-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  color: #fff;
}

/* MOBILE */
@media (max-width: 768px) {
  #menuModal .menu-items {
    justify-content: center;
  }

  #menuModal .blog-card {
    width: 100%;
    max-width: 320px;
  }
}
/* FORCE SECTIONS TO STACK */
#menuModal .modal-menu-grid {
  display: block !important;
  width: 100%;
}

/* EACH COURSE */
#menuModal .menu-section {
  width: 100%;
  margin-bottom: 50px;
}

/* TITLE */
#menuModal .menu-section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #fff;
  border-bottom: 2px solid #444;
  padding-bottom: 6px;
}

/* ITEMS GRID (3 PER ROW) */
#menuModal .menu-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* SMALLER CARD */
#menuModal .blog-card {
  position: relative;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
}

/* IMAGE */
#menuModal .blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TEXT OVERLAY */
#menuModal .text-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  color: #fff;
}

#menuModal .text-overlay h2 {
  font-size: 14px;
  margin: 0;
}

#menuModal .text-overlay p {
  font-size: 12px;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  #menuModal .menu-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  #menuModal .menu-items {
    grid-template-columns: 1fr;
  }
}
.gold-text {
  background: linear-gradient(45deg, #cfa670,#cfa670, #cfa670,#cfa670);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 1px#cfa670;
  font-weight: normal; 
}
/* =========================================
   FORCE "OUR MENU" TO MATCH "CHEF MENU"
   Paste at VERY bottom of your CSS
========================================= */

#menu h1.title.ppb_title {
  font-family: Lato, Helvetica, Arial, sans-serif !important;
  font-size: 60px !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  letter-spacing: -4px !important;
  line-height: 1.1 !important;
  color: #222222 !important; /* change to #ffffff if you want white */
}

/* First word (script gold style) */
#menu h1.title.ppb_title .ppb_title_first {
  font-family: Kristi, cursive !important;
  font-size: 70px !important;
  line-height: 50px !important;
}
/* Remove hover effects */
.blog-card:hover,
.blog-card:hover .text-overlay,
.blog-card:hover img {
  transform: none !important;
  opacity: 1 !important;
}

/* Card layout */
.blog-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

/* Image */
.blog-img {
  width: 100%;
  display: block;
}

/* Bottom overlay (always visible) */
.text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(80, 80, 80, 0.9); /* grey like picture */
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Left side (title + subtitle) */
.text-overlay h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  color: #fff;
}

.text-overlay p {
  margin: 5px 0 0 0;
  font-size: 16px;
  color: #ddd;
}

/* Make text stack on left */
.text-overlay > div {
  display: flex;
  flex-direction: column;
}

/* Price on right */
.text-overlay a {
  font-size: 28px;
  color: #fff;
  text-decoration: none;
  font-weight: 300;
  margin-left: 20px;
}
/* Remove any hover animation */
.blog-card:hover,
.blog-card:hover img,
.blog-card:hover .text-overlay {
  transform: none !important;
  opacity: 1 !important;
}

/* Card */
.blog-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

/* Image */
.blog-img {
  width: 100%;
  height: 320px;              /* controls image height */
  object-fit: cover;
  display: block;
}

/* Bottom grey bar */
.text-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #7a7a7a;        /* exact grey tone */
  padding: 30px 35px;         /* makes it tall like image */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

/* Left text container */
.menu-text {
  display: flex;
  flex-direction: column;
}

/* Title */
.menu-text h2 {
  margin: 0;
  font-size: 48px;            /* large title */
  font-weight: 300;
  color: #f1f1f1;
  line-height: 1;
}

/* Subtitle */
.menu-text p {
  margin: 10px 0 0 0;
  font-size: 24px;
  font-weight: 300;
  color: #e0e0e0;
}

/* Price */
.menu-price {
  font-size: 48px;
  font-weight: 300;
  color: #f1f1f1;
}


/* =========================================
   FORCE MENU CARD TO LOOK LIKE YOUR IMAGE
   Paste at VERY BOTTOM (last lines)
========================================= */

/* Stop hover zoom + overlay hover growth */
.blog-card:hover,
.blog-card:hover .blog-img,
.blog-card:hover .text-overlay{
  transform: none !important;
  height: auto !important;
  box-shadow: inherit !important;
}

/* Card */
.blog-card{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  height: 350px !important;      /* adjust if you want taller */
}

/* Image */
.blog-card .blog-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: none !important;
}

/* Overlay = thick grey bar at bottom */
.blog-card .text-overlay{
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;

  /* IMPORTANT: kill your gradient rules */
  background: #777777 !important;
  background-image: none !important;
  backdrop-filter: none !important;

  /* IMPORTANT: kill your centered column rules */
  text-align: left !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;

  padding: 28px 32px !important;  /* thickness like your sample image */
  z-index: 5 !important;
  transition: none !important;
}

/* Left side */
.blog-card .menu-text{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Title */
.blog-card .menu-text h2{
  margin: 0 !important;
  font-size: 54px !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

/* Subtitle */
.blog-card .menu-text p{
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  color: #f0f0f0 !important;
  line-height: 1.2 !important;
}

/* Price */
.blog-card .menu-price{
  font-size: 54px !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* ============================
   FIX CARD TEXT SIZE
   (Paste at very bottom)
============================ */

/* Card height consistent */
.blog-card{
  height: 320px !important;
}

/* Overlay thickness */
.blog-card .text-overlay{
  padding: 22px 28px !important;
}

/* Title */
.blog-card .menu-text h2{
  font-size: 24px !important;   /* was 54px — too big */
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* Subtitle */
.blog-card .menu-text p{
  font-size: 14px !important;
  margin-top: 6px !important;
}

/* Price */
.blog-card .menu-price{
  font-size: 28px !important;   /* proportional to title */
  font-weight: 500 !important;
}
/* Transparent black bottom bar */
.blog-card .text-overlay{
  background: rgba(0, 0, 0, 0.75) !important;  /* transparent black */
  backdrop-filter: blur(2px); /* optional soft glass effect */
}
/* Make price gold */
.blog-card .menu-price{
  color: #cfa670 !important;
}
/* FIX View All button text cutting */
.open-menu-modal{
  display: inline-block !important;
  width: auto !important;
  min-width: 140px !important;   /* ensures full text fits */
  padding: 14px 32px !important;
  white-space: nowrap !important; /* prevents text wrapping */
  overflow: visible !important;
  text-align: center !important;
}
/* =========================================
   BIGGER SLIDER TEXT ON MOBILE
========================================= */

@media (max-width: 767px) {

  /* Welcome to */
  #slide-2-layer-1 {
    font-size: 48px !important;
    line-height: 1 !important;
  }

  /* WAGYU HAVEN */
  #slide-2-layer-2 {
    font-size: 72px !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
  }

  /* Japanese Wagyu Restaurant */
  #slide-2-layer-3 {
    font-size: 20px !important;
    letter-spacing: 3px !important;
  }

}
/* =========================================
   BIG WAGYU HAVEN ONLY ON MOBILE
========================================= */

@media (max-width: 767px) {

  #slide-2-layer-2 {
    font-size: 80px !important;   /* make big */
    line-height: 1 !important;
    letter-spacing: 2px !important;
  }

}
/* =========================================
   REV SLIDER: MOBILE HERO EXACT LIKE SAMPLE
========================================= */
@media (max-width: 767px){

  /* Center + stack all 3 layers */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    white-space: normal !important;
  }

  /* Place the block higher (so it matches the sample) */
  #slide-2-layer-1{ top: 28% !important; }
  #slide-2-layer-2{ top: 36% !important; }
  #slide-2-layer-3{ top: 48% !important; }

  /* "Welcome to" */
  #slide-2-layer-1{
    font-size: 44px !important;
    line-height: 1 !important;
  }

  /* WAGYU HAVEN */
  #slide-2-layer-2{
    font-size: 72px !important;
    line-height: 0.95 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
  }

  /* JAPANESE WAGYU RESTAURANT (fit on mobile) */
  #slide-2-layer-3{
    font-size: 16px !important;
    line-height: 1.3 !important;
    letter-spacing: 2px !important;   /* reduce so it doesn't cut */
    text-transform: uppercase !important;
  }

}
/* =======================================================
   REV SLIDER (WELCOME) - PROFESSIONAL MOBILE FIX
   Works with Revolution Slider 5.4.5.1
======================================================= */
@media (max-width: 767px){

  /* keep the fullscreen slider truly full on mobile */
  #rev_slider_2_1_wrapper,
  #rev_slider_2_1{
    width: 100% !important;
    height: 100vh !important;
  }

  /* center + clean width + allow wrapping */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    left: 50% !important;
    top: auto !important; /* we'll set tops individually */
    transform: translateX(-50%) !important;

    width: min(92vw, 520px) !important;
    max-width: 92vw !important;

    text-align: center !important;
    white-space: normal !important;      /* IMPORTANT: stop cutting */
    line-height: 1.1 !important;

    margin: 0 !important;
    padding: 0 !important;

    /* stronger readability */
    text-shadow: 0 2px 10px rgba(0,0,0,0.85) !important;
  }

  /* --- Professional stacking positions (tune if needed) --- */
  #slide-2-layer-1{ top: 30% !important; } /* Welcome to */
  #slide-2-layer-2{ top: 38% !important; } /* WAGYU HAVEN */
  #slide-2-layer-3{ top: 50% !important; } /* subtitle */

  /* --- Typography (mobile) --- */
  #slide-2-layer-1{
    font-size: 40px !important;
    line-height: 1 !important;
    letter-spacing: 0.5px !important;
  }

  #slide-2-layer-2{
    font-size: 66px !important;
    line-height: 0.95 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
  }

  #slide-2-layer-2 strong{
    font-size: inherit !important;
    font-weight: 300 !important;
  }

  #slide-2-layer-3{
    font-size: 15px !important;
    line-height: 1.3 !important;
    letter-spacing: 1.5px !important;  /* reduced so it fits */
    text-transform: uppercase !important;
  }

}
/* =======================================================
   REV SLIDER MOBILE: LEFT-ALIGNED LIKE YOUR SAMPLE
   (Welcome to / WAGYU HAVEN / Subtitle)
======================================================= */
@media (max-width: 767px){

  /* Safe fullscreen + no horizontal scroll */
  #rev_slider_2_1_wrapper,
  #rev_slider_2_1{
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* LEFT align block with padding */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    left: 20px !important;          /* left padding */
    transform: none !important;
    text-align: left !important;

    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;

    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Stack spacing (adjust if needed) */
  #slide-2-layer-1{ top: 26% !important; }
  #slide-2-layer-2{ top: 34% !important; }
  #slide-2-layer-3{ top: 47% !important; }

  /* Welcome to (script) */
  #slide-2-layer-1{
    font-size: 42px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* WAGYU HAVEN (big + one line) */
  #slide-2-layer-2{
    font-size: 66px !important;
    line-height: .95 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  #slide-2-layer-2 strong{
    font-size: inherit !important;
    font-weight: 300 !important;
    display: inline !important;
  }

  /* Subtitle (one line) */
  #slide-2-layer-3{
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
    letter-spacing: 1px !important;
  }

  /* readability */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    text-shadow: 0 2px 10px rgba(0,0,0,0.85) !important;
  }
}
/* =======================================================
   REV SLIDER MOBILE: FIX TITLE SIZE (NO OVERLAP)
======================================================= */
@media (max-width: 767px){

  /* LEFT aligned like your sample */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    left: 20px !important;
    transform: none !important;
    text-align: left !important;

    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Stack (more space so they never collide) */
  #slide-2-layer-1{ top: 24% !important; }
  #slide-2-layer-2{ top: 33% !important; }
  #slide-2-layer-3{ top: 46% !important; }

  /* Welcome to */
  #slide-2-layer-1{
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* WAGYU HAVEN (auto size to screen, prevent overflow) */
  #slide-2-layer-2{
    font-size: clamp(38px, 11vw, 64px) !important; /* <-- KEY FIX */
    line-height: .95 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;     /* keep one line */
    max-width: 92vw !important;         /* don't exceed screen */
  }

  #slide-2-layer-2 strong{
    font-size: inherit !important;
    font-weight: 300 !important;
    display: inline !important;
    line-height: inherit !important;
  }

  /* Subtitle */
  #slide-2-layer-3{
    font-size: clamp(12px, 3.6vw, 15px) !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
  }
}
/* =======================================================
   HARD FIX: RevSlider mobile inline styles override
   (Stops overlap + restores clean layout)
======================================================= */
@media (max-width: 767px){

  /* Kill RevSlider scaling/transform that causes huge stretched text */
  #rev_slider_2_1 .tp-caption,
  #rev_slider_2_1 .tp-resizeme{
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
  }

  /* Force captions to be positioned normally */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    position: absolute !important;
    left: 18px !important;
    right: auto !important;

    width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;

    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.85) !important;
  }

  /* Exact stacking like your sample */
  #slide-2-layer-1{ top: 160px !important; }  /* Welcome to */
  #slide-2-layer-2{ top: 215px !important; }  /* WAGYU HAVEN */
  #slide-2-layer-3{ top: 300px !important; }  /* Subtitle */

  /* Typography */
  #slide-2-layer-1{
    font-size: 44px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #slide-2-layer-2{
    font-size: 68px !important;
    line-height: .95 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;      /* keep on one line */
  }

  #slide-2-layer-2 strong{
    font-size: inherit !important;
    font-weight: 300 !important;
    line-height: inherit !important;
    display: inline !important;
  }

  #slide-2-layer-3{
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Optional: shift background left to show steak */
  #rev_slider_2_1 .rev-slidebg{
    background-position: 25% center !important;
  }
}
/* =======================================================
   REV SLIDER MOBILE – CENTERED CLEAN LAYOUT
======================================================= */
@media (max-width: 767px){

  /* Stop RevSlider weird scaling */
  #rev_slider_2_1 .tp-caption,
  #rev_slider_2_1 .tp-resizeme{
    transform: none !important;
  }

  /* Center all 3 layers */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: 92vw !important;
    max-width: 92vw !important;

    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.85) !important;
  }

  /* Clean vertical spacing */
  #slide-2-layer-1{ top: 28% !important; }
  #slide-2-layer-2{ top: 36% !important; }
  #slide-2-layer-3{ top: 48% !important; }

  /* Welcome to */
  #slide-2-layer-1{
    font-size: 40px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* WAGYU HAVEN */
  #slide-2-layer-2{
    font-size: clamp(42px, 11vw, 64px) !important;
    line-height: .95 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  #slide-2-layer-2 strong{
    font-size: inherit !important;
    font-weight: 300 !important;
    display: inline !important;
  }

  /* Subtitle */
  #slide-2-layer-3{
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
  }
}
/* =========================================
   MOBILE – MAKE WAGYU HAVEN SMALLER
========================================= */
@media (max-width: 767px){

  #slide-2-layer-2{
    font-size: clamp(34px, 9vw, 52px) !important;  /* smaller + responsive */
    line-height: 1 !important;
    letter-spacing: 1px !important;
  }

}
/* =========================================
   MOBILE – Move subtitle lower
========================================= */
@media (max-width: 767px){

  #slide-2-layer-3{
    top: 52% !important;   /* was around 48% – now lower */
  }

}

/* =========================================
   MOBILE – PERFECT VERTICAL SPACING
========================================= */
@media (max-width: 767px){

  /* Base alignment stays centered */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: 92vw !important;
  }

  /* Welcome to */
  #slide-2-layer-1{
    top: 27% !important;
    margin-bottom: 5px !important;
  }

  /* WAGYU HAVEN (closer to Welcome) */
  #slide-2-layer-2{
    top: 34% !important;   /* slightly below welcome */
  }

  /* Subtitle (bigger gap below title like your image) */
  #slide-2-layer-3{
    top: 47% !important;   /* creates that clean space */
  }

}
/* =========================================
   MOBILE – CLEAN SPACING (NOT TOO CLOSE)
========================================= */
@media (max-width: 767px){

  /* Keep centered layout */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: 92vw !important;
  }

  /* Welcome to */
  #slide-2-layer-1{
    top: 26% !important;
  }

  /* WAGYU HAVEN (more space from welcome) */
  #slide-2-layer-2{
    top: 36% !important;   /* increased gap */
  }

  /* Subtitle (comfortable distance below title) */
  #slide-2-layer-3{
    top: 50% !important;   /* more breathing room */
  }

}
/* =========================================
   MOBILE – Move subtitle lower
========================================= */
@media (max-width: 767px){

  #slide-2-layer-3{
    top: 105% !important;   /* pushes it further down */
  }

}
/* =========================================
   MOBILE – MORE SPACE BETWEEN LINES
========================================= */
@media (max-width: 767px){

  /* Keep centered */
  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: 92vw !important;
  }

  /* Welcome to */
  #slide-2-layer-1{
    top: 24% !important;
  }

  /* WAGYU HAVEN – more distance from Welcome */
  #slide-2-layer-2{
    top: 36% !important;   /* increased spacing */
  }

  /* Subtitle – clearly separated */
  #slide-2-layer-3{
    top: 56% !important;   /* much lower */
  }

}
/* =========================================
   MOBILE – Move subtitle slightly lower
========================================= */
@media (max-width: 767px){

  #slide-2-layer-3{
    top: 60% !important;   /* increase this if you want it lower */
  }

}
/* =======================================================
   FINAL REV SLIDER MOBILE OVERRIDE (KEEP THIS LAST)
   Goal:
   - "Welcome to" stays where it is (left)
   - "WAGYU HAVEN" centered
   - "Japanese Wagyu Restaurant" centered
======================================================= */
@media (max-width: 767px) {

  /* keep slider fullscreen */
  #rev_slider_2_1_wrapper,
  #rev_slider_2_1 {
    height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* IMPORTANT:
     Remove any global mobile transform rules you had for:
     #rev_slider_2_1 .tp-caption / .rs-layer
     We do NOT center all captions globally.
  */
  #rev_slider_2_1 .tp-caption,
  #rev_slider_2_1 .rs-layer {
    left: auto !important;
    top: auto !important;
    transform: none !important;
    text-align: inherit !important;
  }

  /* 1) Welcome to = stay left */
  #slide-2-layer-1 {
    left: 90px !important;
    top: 50% !important;
    transform: translateY(-120px) !important; /* keeps it in the same vertical "area" */
    text-align: left !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 2) WAGYU HAVEN = centered */
  #slide-2-layer-2 {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -20%) !important;
    text-align: center !important;
    white-space: nowrap !important;
    width: 92vw !important;
    max-width: 92vw !important;
  }

  /* 3) Subtitle = centered + lower */
  #slide-2-layer-3 {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, 60%) !important;
    text-align: center !important;
    white-space: nowrap !important;
    width: 92vw !important;
    max-width: 92vw !important;
  }
}
@media (max-width: 767px){

  #slide-2-layer-3{
    margin-top: 20px !important;
  }

}
/* =========================================
   REV SLIDER MOBILE – TEXT LAYOUT LIKE SAMPLE
========================================= */
@media (max-width: 767px){

  /* Remove transforms */
  #rev_slider_2_1 .tp-caption,
  #rev_slider_2_1 .rs-layer{
    transform: none !important;
  }

  #slide-2-layer-1,
  #slide-2-layer-2,
  #slide-2-layer-3{
    left: 20px !important;
    width: calc(100vw - 40px) !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  /* Base vertical position */
  #slide-2-layer-1{
    top: 28% !important;
    font-size: 40px !important;
    line-height: 1 !important;
  }

  /* Add clean spacing */
#slide-2-layer-2{
  top: 28% !important;
  margin-top: 45px !important;

  font-size: clamp(36px, 10vw, 58px) !important;
  font-weight: 800 !important;   /* Bold */

  line-height: 1 !important;
  letter-spacing: 1.5px !important;
}

  #slide-2-layer-3{
    top: 28% !important;      
    margin-top: 90px !important;  /* spacing below main title */
    font-size: 14px !important;
    letter-spacing: 2px !important;
  }

}

@media (max-width: 767px) {
  /* Fix the overlapping "OUR STORY" */
  .ppb_card_two_cols_with_image .ppb_title {
    font-size: 54px !important;     /* adjust if you want smaller/bigger */
    line-height: 1.05 !important;   /* THIS stops the overlap */
    letter-spacing: 0.02em !important;
    word-spacing: 0 !important;
    margin: 0 0 10px 0 !important;
    white-space: normal !important;
  }

  /* "Discover" script line */
  .ppb_card_two_cols_with_image .ppb_title .ppb_title_first {
    display: block !important;
    font-size: 34px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
  }
}@media (max-width: 767px) {
  /* Fix the overlapping "OUR STORY" */
  .ppb_card_two_cols_with_image .ppb_title {
    font-size: 54px !important;     /* adjust if you want smaller/bigger */
    line-height: 1.05 !important;   /* THIS stops the overlap */
    letter-spacing: 0.02em !important;
    word-spacing: 0 !important;
    margin: 0 0 10px 0 !important;
    white-space: normal !important;
  }

  /* "Discover" script line */
  .ppb_card_two_cols_with_image .ppb_title .ppb_title_first {
    display: block !important;
    font-size: 34px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
  }
}
.one {
    margin: 0 !important;
}

.ppb_card_two_cols_with_image {
    margin-bottom: 0 !important;
}

.page_content_wrapper,
.standard_wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.one {
    margin-bottom: 0 !important;
}

.ppb_card_two_cols_with_image {
    margin-bottom: 0 !important;
}
@media (max-width: 767px){

  /* 1) remove the big reserved space under ABOUT section */
  .ppb_card_two_cols_with_image{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* theme wrappers often add spacing */
  .ppb_card_two_cols_with_image .standard_wrapper,
  .ppb_card_two_cols_with_image .page_content_wrapper,
  .ppb_card_two_cols_with_image .inner{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 2) the REAL cause: absolute box doesn't affect height */
  .ppb_card_two_cols_with_image .one_half.last.parallax_scroll{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* 3) make the image column full width */
  .ppb_card_two_cols_with_image .one_half.parallax_scroll_image{
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  /* 4) make next section touch immediately */
  .fullwidth_image{
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 768px) {

  .fullwidth_image {
    height: 450px !important;
    background-size: cover !important;
    background-position: 80% center !important;
  }

}
/* Remove hover animations */
.blog-card,
.blog-card * {
  transition: none !important;
}

/* Stop image zoom on hover */
.blog-card:hover .blog-img {
  transform: none !important;
}

/* Stop card lift or shadow */
.blog-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Stop overlay animation */
.blog-card:hover .text-overlay {
  opacity: 1 !important;
}
/* =======================================================
   MENU ITEMS: HARD DISABLE ALL HOVER EFFECTS
   Paste at VERY BOTTOM of your CSS
======================================================= */

/* 1) Kill transitions/animations so nothing “moves” */
.card-wrapper .blog-card,
.card-wrapper .blog-card *,
#menuModal .blog-card,
#menuModal .blog-card *{
  transition: none !important;
  animation: none !important;
}

/* 2) Kill hover transforms/zoom/lift */
.card-wrapper .blog-card:hover,
.card-wrapper .blog-card:hover * ,
#menuModal .blog-card:hover,
#menuModal .blog-card:hover *{
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 3) Stop the image zoom rules you already have */
.card-wrapper .blog-card:hover .blog-img,
#menuModal .blog-card:hover .blog-img{
  transform: none !important;
}

/* 4) Stop overlay expanding (you have height changes on hover) */
.card-wrapper .blog-card:hover .text-overlay,
#menuModal .blog-card:hover .text-overlay{
  height: auto !important;     /* cancels “height: 100%” / “55%” hover */
  opacity: 1 !important;
}

/* 5) If any link/text was hidden on hover, force it visible */
.card-wrapper .text-overlay a,
#menuModal .text-overlay a{
  visibility: visible !important;
  opacity: 1 !important;
}
/* =======================================================
   MOBILE MENU CARDS = EXACT STYLE (2 columns, like screenshot)
   Paste at VERY BOTTOM of your CSS
======================================================= */
@media (max-width: 767px){

  /* 2 columns */
  .card-wrapper{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 0 14px !important;
    width: 100% !important;
  }

  /* Card size + shape (matches screenshot proportion) */
  .card-wrapper .blog-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    aspect-ratio: 4 / 3 !important;  /* close to your screenshot card shape */
    height: auto !important;

    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.18) !important;
    position: relative !important;
    background: #000 !important;
  }

  /* Image fills the card */
  .card-wrapper .blog-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transform: none !important;
    transition: none !important;
  }

  /* Bottom dark bar */
  .card-wrapper .text-overlay{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    background: rgba(45,45,45,.95) !important; /* dark grey bar */
    backdrop-filter: none !important;
    background-image: none !important;

    padding: 14px 14px !important;
    height: 34% !important;           /* bar thickness like screenshot */
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;

    text-align: left !important;
    transition: none !important;
  }

  /* Left text block */
  .card-wrapper .menu-text{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Title */
  .card-wrapper .menu-text h2{
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #ffffff !important;

    /* prevent ugly vertical breaking */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Subtitle */
  .card-wrapper .menu-text p{
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,.85) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Price */
  .card-wrapper .menu-price{
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #cfa670 !important; /* gold like yours */
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* HARD remove hover effects (mobile taps can trigger hover) */
  .card-wrapper .blog-card,
  .card-wrapper .blog-card *{
    transition: none !important;
    animation: none !important;
  }
  .card-wrapper .blog-card:hover,
  .card-wrapper .blog-card:hover *{
    transform: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.18) !important;
  }
  .card-wrapper .blog-card:hover .text-overlay{
    height: 34% !important;  /* stop overlay expanding */
  }
}
/* =======================================================
   MOBILE MENU: FIX CARD SIZE + TEXT (2 columns)
   Paste at VERY BOTTOM
======================================================= */
@media (max-width: 767px){

  /* 2 columns grid */
  .card-wrapper{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 14px !important;
    width: 100% !important;
  }

  /* Make cards bigger + consistent */
  .card-wrapper .blog-card{
    width: 100% !important;
    margin: 0 !important;
    max-width: none !important;

    aspect-ratio: 1 / 1 !important;     /* bigger squares on mobile */
    min-height: 170px !important;       /* prevents tiny cards */

    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #000 !important;
  }

  /* Image fills card */
  .card-wrapper .blog-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Bottom bar (fixed, not expanding) */
  .card-wrapper .text-overlay{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 44% !important;             /* enough space for 2 lines + price */
    padding: 10px 12px !important;

    background: rgba(35,35,35,.92) !important;
    background-image: none !important;
    backdrop-filter: none !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 10px !important;

    text-align: left !important;
  }

  /* Left text block */
  .card-wrapper .menu-text{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Title: max 2 lines, no weird vertical breaking */
  .card-wrapper .menu-text h2{
    margin: 0 0 6px 0 !important;
    color: #fff !important;
    font-weight: 700 !important;

    font-size: clamp(13px, 3.7vw, 16px) !important;
    line-height: 1.15 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;   /* 2 lines only */
    overflow: hidden !important;
  }

  /* Subtitle: single line with ellipsis */
  .card-wrapper .menu-text p{
    margin: 0 !important;
    color: rgba(255,255,255,.85) !important;
    font-size: clamp(10px, 3vw, 12px) !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Price: readable but not huge */
  .card-wrapper .menu-price{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    color: #cfa670 !important;
    font-weight: 700 !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1 !important;
    padding-bottom: 2px !important;
  }

  /* Kill hover/tap effects that cause “glitch” on mobile */
  .card-wrapper .blog-card,
  .card-wrapper .blog-card *{
    transition: none !important;
    animation: none !important;
  }
  .card-wrapper .blog-card:hover,
  .card-wrapper .blog-card:hover *{
    transform: none !important;
    box-shadow: none !important;
  }
  .card-wrapper .blog-card:hover .text-overlay{
    height: 44% !important; /* prevents your old hover expand */
  }
}
/* =======================================================
   REMOVE ALL HOVER EFFECTS FROM MENU CARDS
   Paste at VERY BOTTOM
======================================================= */

/* Remove transitions & animations */
.blog-card,
.blog-card *{
  transition: none !important;
  animation: none !important;
}

/* Remove hover transforms (zoom, lift, etc.) */
.blog-card:hover,
.blog-card:hover *{
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Stop image zoom specifically */
.blog-card:hover .blog-img{
  transform: none !important;
}

/* Stop overlay expanding on hover */
.blog-card:hover .text-overlay{
  height: auto !important;
  opacity: 1 !important;
}

/* If any link/text was hidden on hover */
.blog-card .text-overlay a{
  visibility: visible !important;
  opacity: 1 !important;
}
/* =======================================================
   HARD REMOVE ALL HOVER EFFECTS (DESKTOP + MOBILE)
   Paste at VERY BOTTOM
======================================================= */

/* Disable transitions & animations everywhere */
.blog-card,
.blog-card *,
#menuModal .blog-card,
#menuModal .blog-card *{
  transition: none !important;
  animation: none !important;
}

/* Remove any hover/tap transform */
.blog-card:hover,
.blog-card:hover *,
.blog-card:active,
.blog-card:focus,
#menuModal .blog-card:hover,
#menuModal .blog-card:active,
#menuModal .blog-card:focus{
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Stop image zoom */
.blog-card:hover .blog-img,
.blog-card:active .blog-img,
#menuModal .blog-card:hover .blog-img{
  transform: none !important;
}

/* Stop overlay expanding */
.blog-card:hover .text-overlay,
.blog-card:active .text-overlay,
#menuModal .blog-card:hover .text-overlay{
  height: auto !important;
  opacity: 1 !important;
}

/* Prevent mobile tap highlight glow */
.blog-card{
  -webkit-tap-highlight-color: transparent !important;
}

/* kill any zoom coming from hover on card OR image OR link wrappers */
.blog-card:hover .blog-img,
.blog-card:hover img,
.blog-card img:hover,
.blog-card a:hover img,
.blog-card:hover a img,
.blog-card:active .blog-img,
.blog-card:active img,
.blog-card:focus .blog-img,
.blog-card:focus img,
.blog-card:focus-within .blog-img,
.blog-card:focus-within img,
#menuModal .blog-card:hover .blog-img,
#menuModal .blog-card:hover img,
#menuModal .blog-card img:hover,
#menuModal .blog-card a:hover img,
#menuModal .blog-card:active img,
#menuModal .blog-card:focus img,
#menuModal .blog-card:focus-within img{
  transform: none !important;
  scale: 1 !important;              /* extra safety for modern CSS */
}

/* remove transitions so it can’t animate even if transform is applied */
.blog-card .blog-img,
.blog-card img,
#menuModal .blog-img,
#menuModal img{
  transition: none !important;
  will-change: auto !important;
}
/* =======================================================
   REMOVE ALL HOVER EFFECTS – #menu SECTION ONLY
   (Main cards + Modal cards)
======================================================= */

/* 1) Remove all transitions & animations */
#menu .blog-card,
#menu .blog-card *{
  transition: none !important;
  animation: none !important;
}

/* 2) Kill hover / active / focus states */
#menu .blog-card:hover,
#menu .blog-card:active,
#menu .blog-card:focus,
#menu .blog-card:focus-within,
#menu .blog-card:hover *,
#menu .blog-card:active *,
#menu .blog-card:focus *,
#menu .blog-card:focus-within *{
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 3) HARD stop image zoom */
#menu .blog-card .blog-img,
#menu .blog-card img{
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
  will-change: auto !important;
}

/* 4) Override any zoom rule like: .blog-card:hover .blog-img */
#menu .blog-card:hover .blog-img,
#menu .blog-card:hover img,
#menu .blog-card:active .blog-img,
#menu .blog-card:focus .blog-img{
  transform: none !important;
  scale: 1 !important;
}

/* 5) Stop overlay expanding on hover */
#menu .blog-card:hover .text-overlay,
#menu .blog-card:active .text-overlay,
#menu .blog-card:focus .text-overlay{
  height: auto !important;
  opacity: 1 !important;
}

/* 6) Remove mobile tap highlight */
#menu .blog-card{
  -webkit-tap-highlight-color: transparent !important;
}
/* Remove transition from overlay */
#menu .text-overlay{
  transition: none !important;
  animation: none !important;
}

/* Stop overlay changing on hover */
#menu .blog-card:hover .text-overlay,
#menu .blog-card:active .text-overlay,
#menu .blog-card:focus .text-overlay{
  height: inherit !important;
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.75) !important; /* keep same dark level */
}

/* Make sure overlay background never changes */
#menu .blog-card .text-overlay{
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: none !important;
  background-image: none !important;
}
/* ===== MENU: REMOVE OVERLAY HOVER EXPAND (HARD FIX) ===== */

/* Make overlay height fixed always */
#menu .blog-card .text-overlay{
  height: 44% !important;          /* choose your preferred bar height */
  transition: none !important;
  animation: none !important;
}

/* On hover/active/focus keep SAME height */
#menu .blog-card:hover .text-overlay,
#menu .blog-card:active .text-overlay,
#menu .blog-card:focus .text-overlay,
#menu .blog-card:focus-within .text-overlay{
  height: 44% !important;
}

/* Also stop image zoom just in case */
#menu .blog-card .blog-img{
  transform: none !important;
  transition: none !important;
}
#menu .blog-card:hover .blog-img,
#menu .blog-card:active .blog-img,
#menu .blog-card:focus .blog-img{
  transform: none !important;
}
/* Remove any transitions/animations that enable “hover movement” */
#menu .blog-img,
#menu img,
#menuModal .blog-img,
#menuModal img{
  transition: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  scale: 1 !important;
}

/* Kill every hover path that could affect the image */
#menu .blog-card:hover .blog-img,
#menu .blog-card:hover img,
#menu .blog-card:active .blog-img,
#menu .blog-card:active img,
#menu .blog-card:focus .blog-img,
#menu .blog-card:focus img,
#menu .blog-card:focus-within .blog-img,
#menu .blog-card:focus-within img,
#menuModal .blog-card:hover .blog-img,
#menuModal .blog-card:hover img,
#menuModal .blog-card:active .blog-img,
#menuModal .blog-card:active img,
#menuModal .blog-card:focus .blog-img,
#menuModal .blog-card:focus img,
#menuModal .blog-card:focus-within .blog-img,
#menuModal .blog-card:focus-within img{
  transform: none !important;
  filter: none !important;
  scale: 1 !important;
}

/* (Optional) stop mobile “tap hover” highlight */
#menu .blog-card,
#menuModal .blog-card{
  -webkit-tap-highlight-color: transparent !important;
}
@media (max-width: 767px){

  /* Card size stays clean */
  #menu .blog-card{
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* Overlay bar (same look, just smaller) */
  #menu .blog-card .text-overlay{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 14px 14px !important;            /* smaller padding */
    background: rgba(0,0,0,0.75) !important;  /* same dark overlay */
    background-image: none !important;
    backdrop-filter: none !important;

    height: auto !important;                   /* let text decide */
    min-height: 84px !important;               /* consistent bar height */
    text-align: left !important;
    gap: 12px !important;
  }

  /* Left block */
  #menu .blog-card .menu-text{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Title (same style, smaller) */
  #menu .blog-card .menu-text h2{
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #ffffff !important;

    /* keep it neat on mobile */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;  /* max 2 lines */
    overflow: hidden !important;
  }

  /* Subtitle */
  #menu .blog-card .menu-text p{
    margin: 6px 0 0 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,0.85) !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Price on right */
  #menu .blog-card .menu-price{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #cfa670 !important; /* gold */
    line-height: 1 !important;
  }

  /* Stop any hover/tap overlay expansion on mobile */
  #menu .blog-card:hover .text-overlay,
  #menu .blog-card:active .text-overlay,
  #menu .blog-card:focus .text-overlay,
  #menu .blog-card:focus-within .text-overlay{
    height: auto !important;
    min-height: 84px !important;
  }
}
/* =======================================================
   MOBILE: overlay same style as desktop, just smaller
   (Paste at VERY BOTTOM of CSS)
======================================================= */
@media (max-width: 767px){

  /* Card size stays clean */
  #menu .blog-card{
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* Overlay bar (same look, just smaller) */
  #menu .blog-card .text-overlay{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 14px 14px !important;            /* smaller padding */
    background: rgba(0,0,0,0.75) !important;  /* same dark overlay */
    background-image: none !important;
    backdrop-filter: none !important;

    height: auto !important;                   /* let text decide */
    min-height: 84px !important;               /* consistent bar height */
    text-align: left !important;
    gap: 12px !important;
  }

  /* Left block */
  #menu .blog-card .menu-text{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Title (same style, smaller) */
  #menu .blog-card .menu-text h2{
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #ffffff !important;

    /* keep it neat on mobile */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;  /* max 2 lines */
    overflow: hidden !important;
  }

  /* Subtitle */
  #menu .blog-card .menu-text p{
    margin: 6px 0 0 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,0.85) !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Price on right */
  #menu .blog-card .menu-price{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #cfa670 !important; /* gold */
    line-height: 1 !important;
  }

  /* Stop any hover/tap overlay expansion on mobile */
  #menu .blog-card:hover .text-overlay,
  #menu .blog-card:active .text-overlay,
  #menu .blog-card:focus .text-overlay,
  #menu .blog-card:focus-within .text-overlay{
    height: auto !important;
    min-height: 84px !important;
  }
}
/* =========================================
   MOBILE: Remove subtitle (keep title + price only)
========================================= */
@media (max-width: 767px){

  #menu .menu-text p{
    display: none !important;
  }

  /* Optional: tighten spacing since subtitle is gone */
  #menu .text-overlay{
    padding: 14px 16px !important;
  }

  #menu .menu-text h2{
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  #menu .menu-price{
    font-size: 18px !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 767px){

  #menu .menu-text p{
    display: none !important;
  }

  /* Optional: tighten spacing since subtitle is gone */
  #menu .text-overlay{
    padding: 14px 16px !important;
  }

  #menu .menu-text h2{
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  #menu .menu-price{
    font-size: 18px !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 767px){

  /* Remove any line clamp / truncation */
  #menu .menu-text h2{
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  /* Make overlay grow with content */
  #menu .text-overlay{
    height: auto !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }

  /* Keep price aligned right */
  #menu .menu-price{
    align-self: flex-start !important;
  }
}
/* =========================================
   MOBILE ONLY: View Button + Modal
========================================= */
@media (max-width: 767px){

  /* Hide subtitle on mobile */
  #menu .menu-text p{
    display: none !important;
  }

  /* Stack price + button */
  #menu .text-overlay{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Style view button */
  .mobile-view-btn{
    background: #cfa670;
    border: none;
    color: #111;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
  }
}

/* ================= MODAL STYLE ================= */

#mobileItemModal{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.mobile-item-box{
  background: #111;
  width: 92%;
  max-width: 500px;
  padding: 20px;
  border-radius: 14px;
  text-align: center;
  color: #fff;
  position: relative;
}

.mobile-item-box img{
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

#mobileItemTitle{
  font-size: 22px;
  margin-bottom: 10px;
}

#mobileItemSubtitle{
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 15px;
}

#mobileItemPrice{
  font-size: 22px;
  font-weight: bold;
  color: #cfa670;
}

.close-mobile-item{
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
}
@media (max-width: 767px){

  /* Hide subtitle */
  #menu .menu-text p{
    display: none !important;
  }

  /* Hide price */
  #menu .menu-price{
    display: none !important;
  }

  /* Overlay layout */
  #menu .text-overlay{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px !important;
  }

  /* Title full width */
  #menu .menu-text h2{
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* View button style */
  .mobile-view-btn{
    align-self: flex-start !important;
  }
}
@media (max-width: 767px){

  /* Hide subtitle */
  #menu .menu-text p{
    display: none !important;
  }

  /* Hide price */
  #menu .menu-price{
    display: none !important;
  }

  /* Overlay layout */
  #menu .text-overlay{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 18px 14px !important;
  }

  /* Full title display */
  #menu .menu-text{
    width: 100% !important;
  }

  #menu .menu-text h2{
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Center the view button */
  .mobile-view-btn{
    align-self: center !important;
  }
}
/* MOBILE ITEM MODAL IMAGE SIZE ADJUSTMENT */
#mobileItemModal img,
#mobileItemImg {
  width: 85%;          /* smaller than full width */
  max-width: 320px;    /* prevents it from being too large */
  height: auto;
  margin: 20px auto;   /* center it */
  display: block;
  border-radius: 12px; /* smooth corners */
}
#mobileItemTitle {
  color: #ffffff !important;
}
/* Hide View button by default (desktop) */
.mobile-view-btn {
  display: none;
}

/* Show ONLY in responsive */
@media (max-width: 767px) {
  .mobile-view-btn {
    display: inline-block;
    padding: 8px 18px;
    background: #cfa670;
    color: #000;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
  }
}
@media (max-width: 767px){

  /* Force square layout */
  #menuModal .blog-card{
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;   /* ✅ square */
    height: auto !important;          /* kill fixed height */
    min-height: unset !important;
    max-height: unset !important;

    border-radius: 22px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  /* Image fills the square */
  #menuModal .blog-card .blog-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Bottom overlay (keep your style) */
  #menuModal .blog-card .text-overlay{
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;

    padding: 16px !important;
    background: rgba(0,0,0,0.75) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Title styling */
  #menuModal .blog-card .menu-text h2{
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }
}
@media (max-width: 767px){

  /* 2-column grid like your screenshot */
  #menu .card-wrapper{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  /* Square cards */
  #menu .blog-card{
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* Image fills the square */
  #menu .blog-card .blog-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Bottom overlay bar (centered layout like the picture) */
  #menu .blog-card .text-overlay{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    background: rgba(0,0,0,0.55) !important;
    padding: 14px 12px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    gap: 10px !important;
    min-height: 42% !important; /* makes the bar tall like your screenshot */
  }

  /* Title centered + full (no ellipsis) */
  #menu .blog-card .menu-text h2{
    margin: 0 !important;
    color: #fff !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* Hide subtitle + price (since screenshot shows only title + button) */
  #menu .blog-card .menu-text p,
  #menu .blog-card .menu-price{
    display: none !important;
  }

  /* View button (if your JS adds .mobile-view-btn) */
  #menu .blog-card .mobile-view-btn{
    display: inline-block !important;
    padding: 10px 22px !important;
    border-radius: 6px !important;
    border: none !important;
    background: rgba(255,255,255,0.65) !important;
    color: #111 !important;
    font-size: 14px !important;
    cursor: pointer !important;
  }

  /* If you don't have .mobile-view-btn yet, but you want any button inside overlay to look same */
  #menu .blog-card .text-overlay button{
    padding: 10px 22px !important;
    border-radius: 6px !important;
    border: none !important;
    background: rgba(255,255,255,0.65) !important;
    color: #111 !important;
  }
}
@media (max-width: 767px){

  #menu .blog-card .menu-text h2{
    margin: 0 !important;
    color: #fff !important;
    font-size: 10px !important;   /* ✅ smaller */
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

}
@media (max-width: 767px){

  #menu .blog-card .mobile-view-btn,
  #menu .blog-card .text-overlay button{
    padding: 5px 12px !important;   /* smaller padding */
    font-size: 11px !important;     /* smaller text */
    border-radius: 4px !important;  /* slightly tighter corners */
    background: rgba(255,255,255,0.7) !important;
    color: #111 !important;
    font-weight: 500 !important;
  }

}
.menu-filter{
  width: 100%;
  max-width: 420px;
  margin: 14px auto 18px auto;
}

.menu-filter select{
  width: 100%;
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 12px 14px;
  border-radius: 10px;
  outline: none;
  font-size: 14px;
}

@media (min-width: 768px){

  /* Make items grid clean */
  #menuModal .menu-items{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  /* Square cards */
  #menuModal .blog-card{
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* Image fills */
  #menuModal .blog-card .blog-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Bottom overlay */
  #menuModal .blog-card .text-overlay{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 20px 24px !important;
    background: rgba(0,0,0,0.75) !important;

    min-height: 110px !important;
    gap: 20px !important;

    text-align: left !important;
  }

  /* Left text */
  #menuModal .menu-text{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  /* Title LEFT aligned even if long */
  #menuModal .menu-text h2{
    margin: 0 !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;

    white-space: normal !important;
    word-break: break-word !important;

    text-align: left !important;
  }

  /* Subtitle */
  #menuModal .menu-text p{
    margin: 8px 0 0 0 !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px !important;
    text-align: left !important;
  }

  /* Price RIGHT */
  #menuModal .menu-price{
    flex: 0 0 auto !important;
    color: #cfa670 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

}
#menuModal .modal-bottom-actions{
  display: flex;
  justify-content: flex-end;
  padding: 25px 0 10px 0;
}

/* Back To Top Button */
#menuModal .back-to-top-inline{
  padding: 8px 16px;
  font-size: 13px;
  letter-spacing: 0.5px;

  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: #fff;

  cursor: pointer;
  transition: 0.25s ease;
}

#menuModal .back-to-top-inline:hover{
  background: #cfa670;   /* your gold color */
  color: #000;
  border-color: #cfa670;
}
@media only screen and (max-width: 768px) {

  #findus .map_shortcode_wrapper {
    width: 100% !important;
    height: 300px !important;
    float: none !important;
  }

  #findus .one_half.last.parallax_scroll {
    position: relative !important;
    width: 100% !important;
    right: auto !important;
    left: auto !important;
    margin-top: 0 !important;
    padding: 30px 20px !important;
  }

  #findus .inner {
    display: flex;
    flex-direction: column;
  }

}
/* ===== FOOTER RESPONSIVE FIX ===== */

@media only screen and (max-width: 768px) {

    /* Stack footer columns */
    #footer ul.sidebar_widget.four {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
    }

    #footer ul.sidebar_widget.four li.widget {
        width: 100% !important;
        margin-bottom: 40px;
    }

    /* Center logo + text */
    #footer .textwidget {
        text-align: center;
    }

    #footer .textwidget img {
        margin: 0 auto 20px;
        display: block;
    }

    /* Contact Info spacing */
    #footer .widgettitle {
        text-align: center;
        margin-bottom: 20px;
    }

    #footer .textwidget p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    /* Social Icons Center */
    .social_wrapper ul {
        display: flex;
        justify-content: center;
        gap: 12px;
        padding: 0;
    }

    .social_wrapper ul li {
        display: inline-block;
    }

    /* Copyright section */
    .footer_bar_wrapper {
        text-align: center;
        padding: 20px;
    }

    #copyright {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Back to top button positioning */
    #toTop {
        right: 20px;
        bottom: 20px;
    }
}
/* =======================================================
   GLOBAL RESPONSIVE PATCH (ALL SECTIONS THAT DON'T APPLY)
   Fix: absolute boxes, two-col layouts, parallax boxes,
        fullwidth images, and unwanted white gaps on mobile
   Paste at VERY BOTTOM
======================================================= */

/* Stop horizontal overflow from absolute positioned elements */
html, body {
  overflow-x: hidden !important;
}

/* ---------- TABLET + MOBILE (<= 1024px) ---------- */
@media (max-width: 1024px){

  /* Any section that uses absolute overlay boxes must become normal flow */
  .ppb_card_two_cols_with_image,
  .ppb_card_two_cols_with_image .inner,
  .ppb_card_two_cols_with_image .standard_wrapper,
  .ppb_card_two_cols_with_image .page_content_wrapper,
  .ppb_card_two_cols_with_image .one,
  .ppb_card_two_cols_with_image .one_half,
  .ppb_card_two_cols_with_image .one_half.last,
  .ppb_card_two_cols_with_image .one_half.parallax_scroll_image,
  .ppb_card_two_cols_with_image .one_half.parallax_scroll{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    clear: both !important;
  }

  /* Remove the fake space created by desktop paddings */
  .ppb_card_two_cols_with_image{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin: 0 !important;
  }

  /* Make overlay/box sit UNDER image with clean spacing */
  .ppb_card_two_cols_with_image .one_half.last.parallax_scroll{
    margin-top: 0 !important;
    padding: 26px 18px !important; /* adjust if you want */
    z-index: 2 !important;
  }

  /* Image column full width */
  .ppb_card_two_cols_with_image .one_half.parallax_scroll_image{
    margin: 0 !important;
  }

  /* Ensure image scales correctly */
  .ppb_card_two_cols_with_image img,
  .ppb_card_two_cols_with_image .image_wrapper img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Fullwidth background-image blocks (like your .fullwidth_image) */
  .fullwidth_image{
    width: 100% !important;
    min-height: 340px !important;
    height: auto !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }
}

/* ---------- PHONE (<= 767px) ---------- */
@media (max-width: 767px){

  /* Kill leftover bottom gaps between stacked sections */
  .one,
  .standard_wrapper,
  .page_content_wrapper,
  .inner{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Headings not overlapping on mobile */
  .ppb_title{
    font-size: clamp(34px, 9vw, 54px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .ppb_title .ppb_title_first{
    display: block !important;
    font-size: clamp(26px, 8vw, 40px) !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
  }

  /* Make any parallax/absolute “info box” not create white space */
  .one_half.last.parallax_scroll{
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Background image focus for mobile (show more of the important part) */
  .fullwidth_image{
    min-height: 420px !important;
    background-position: 80% center !important; /* tweak (50%/70%/90%) */
  }
}
/* =======================================================
   FIX "CHEF MENU" CARD (MOBILE)
   - removes white left space
   - makes the menu card full width
   - stacks card under the image
======================================================= */
@media (max-width: 768px){

  /* make the section behave like a normal stacked block */
  .fullwidth_image{
    width: 100% !important;
    height: 420px !important;                 /* adjust if needed */
    background-size: cover !important;
    background-position: 70% center !important;
    display: block !important;
  }

  /* the wrapper that holds the background image */
  .image_classic_frame.expand,
  .image_classic_frame.expand .fullwidth_image{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* IMPORTANT: the menu card is positioned absolute on desktop.
     On mobile we must turn it into normal flow */
  .one_half.last.parallax_scroll{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;

    float: none !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 22px 18px !important;            /* nicer mobile padding */
    box-sizing: border-box !important;

    z-index: 2 !important;
  }

  /* remove any “half column” behavior that creates empty space */
  .one_half,
  .one_half.last{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* prevent text cutting */
  .one_half.last.parallax_scroll,
  .one_half.last.parallax_scroll *{
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1366px) {

  #slide-2-layer-1 {
    font-size: 40px !important;
    line-height: 48px !important;
  }

  #slide-2-layer-2 {
    font-size: 70px !important;
    line-height: 80px !important;
  }

  #slide-2-layer-3 {
    font-size: 28px !important;
    line-height: 36px !important;
  }

}
@media only screen and (max-width: 767px) {

  .card-wrapper {
    margin-top: 30px !important; 
  }

}

@media (hover: none) and (pointer: coarse) {
  .blog-card:hover {
    transform: none !important;
  }
  .blog-card:hover .text-overlay {
    transform: none !important;
  }
}
.blog-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;

  
  transform: translate3d(0,0,0);
  will-change: transform;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: scale(1.03);
}


.blog-card * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


.blog-img {
  display: block;
  width: 100%;
  height: auto;
  transform: translate3d(0,0,0);
}


.text-overlay {
  transform: none !important;
  will-change: auto !important;
}

#menu .blog-card,
#menu .blog-card *,
#menu .blog-card *::before,
#menu .blog-card *::after,
#menuModal .blog-card,
#menuModal .blog-card *,
#menuModal .blog-card *::before,
#menuModal .blog-card *::after{
  transition: none !important;
  animation: none !important;
}


#menu .blog-card:hover,
#menu .blog-card:active,
#menu .blog-card:focus,
#menu .blog-card:focus-within,
#menu .blog-card:hover *,
#menu .blog-card:active *,
#menu .blog-card:focus *,
#menu .blog-card:focus-within *,
#menuModal .blog-card:hover,
#menuModal .blog-card:active,
#menuModal .blog-card:focus,
#menuModal .blog-card:focus-within,
#menuModal .blog-card:hover *,
#menuModal .blog-card:active *,
#menuModal .blog-card:focus *,
#menuModal .blog-card:focus-within *{
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}


#menu .blog-card a:hover img,
#menu .blog-card:hover a img,
#menu .blog-card img:hover,
#menu .blog-card:hover img,
#menu .blog-card:hover .blog-img,
#menuModal .blog-card a:hover img,
#menuModal .blog-card:hover a img,
#menuModal .blog-card img:hover,
#menuModal .blog-card:hover img,
#menuModal .blog-card:hover .blog-img{
  transform: none !important;
  filter: none !important;
  scale: 1 !important;
}


#menu .blog-card,
#menu .blog-card .blog-img,
#menu .blog-card .text-overlay,
#menuModal .blog-card,
#menuModal .blog-card .blog-img,
#menuModal .blog-card .text-overlay{
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}


#menu .text-overlay,
#menuModal .text-overlay{
  backdrop-filter: none !important;
}


@media (min-width: 1200px){

  .card-wrapper{
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;             
    justify-items: stretch !important;
  }

  .card-wrapper .blog-card{
    width: 100% !important;
    max-width: none !important;  
    margin: 0 !important;
  }

}

#menu .blog-card,
#menu .blog-card *,
#menuModal .blog-card,
#menuModal .blog-card *{
  transition: none !important;
  animation: none !important;
}


#menu .blog-card,
#menu .blog-card:hover,
#menu .blog-card:active,
#menu .blog-card:focus,
#menu .blog-card:focus-within,
#menuModal .blog-card,
#menuModal .blog-card:hover,
#menuModal .blog-card:active,
#menuModal .blog-card:focus,
#menuModal .blog-card:focus-within{
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}


#menu .blog-img,
#menu img,
#menu .blog-card:hover .blog-img,
#menu .blog-card:hover img,
#menuModal .blog-img,
#menuModal img,
#menuModal .blog-card:hover .blog-img,
#menuModal .blog-card:hover img{
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
  will-change: auto !important;
}


#menu .text-overlay,
#menu .blog-card:hover .text-overlay,
#menuModal .text-overlay,
#menuModal .blog-card:hover .text-overlay{
  height: auto !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}


#menu .text-overlay,
#menuModal .text-overlay{
  backdrop-filter: none !important;
}


.card-wrapper .blog-card,
.card-wrapper .blog-card *,
.card-wrapper .blog-card *::before,
.card-wrapper .blog-card *::after{
  transition: none !important;
  animation: none !important;
}


.card-wrapper .blog-card:hover,
.card-wrapper .blog-card:active,
.card-wrapper .blog-card:focus,
.card-wrapper .blog-card:focus-within,
.card-wrapper .blog-card:hover *,
.card-wrapper .blog-card:active *,
.card-wrapper .blog-card:focus *,
.card-wrapper .blog-card:focus-within *{
  transform: none !important;
  filter: none !important;
  box-shadow: inherit !important; 
  opacity: 1 !important;
}


.card-wrapper .blog-card:hover .blog-img{
  transform: none !important;
  scale: 1 !important;
}


.card-wrapper .blog-card .text-overlay{
  height: auto !important;
  backdrop-filter: none !important;  
}
.card-wrapper .blog-card:hover .text-overlay{
  height: auto !important;
}


.card-wrapper .blog-card,
.card-wrapper .blog-img,
.card-wrapper .text-overlay{
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

@media (min-width: 992px){

  .card-wrapper .blog-card{
    pointer-events: none;
    cursor: default;
  }

  
  .card-wrapper .blog-card button{
    pointer-events: auto;
  }

}

:root{
  --gold: #cfa670;
  --ink: #111;
  --overlay: rgba(0,0,0,.72);
  --overlay-2: rgba(0,0,0,.35);
  --radius: 18px;
  --shadow: 0 12px 30px rgba(0,0,0,.18);
}


#menu .title{
  letter-spacing: 1px !important;
  text-transform: uppercase;
  margin-bottom: 26px !important;
}


#menu .card-wrapper{
  width: min(1200px, 92vw) !important;
  margin: 0 auto !important;
  gap: 22px !important;
}


#menu .blog-card{
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  background: #000 !important;
}


#menu .blog-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transform: none !important;
  transition: none !important;
}


#menu .text-overlay{
  background: linear-gradient(
    to top,
    var(--overlay),
    var(--overlay-2),
    transparent
  ) !important;

  backdrop-filter: none !important;    
  padding: 18px 18px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
}


#menu .menu-text{
  min-width: 0 !important;
}


#menu .menu-text h2{
  margin: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: .2px !important;

  
  word-break: normal !important;
  overflow-wrap: break-word !important;
}


#menu .menu-text p{
  margin: 8px 0 0 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


#menu .menu-price{
  color: var(--gold) !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}


@media (min-width: 992px){
  #menu .card-wrapper .blog-card{
    pointer-events: none !important;
    cursor: default !important;
  }
  #menu .card-wrapper .blog-card button{
    pointer-events: auto !important;
  }
}


@media (max-width: 767px){

  #menu .card-wrapper{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: calc(100% - 28px) !important;
  }

  #menu .blog-card{
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 16px !important;
  }

  #menu .text-overlay{
    padding: 12px 12px !important;
    align-items: center !important;
  }

  #menu .menu-text h2{
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  #menu .menu-text p{
    display: none !important; 
  }

  #menu .menu-price{
    font-size: 16px !important;
  }
}

.menu-modal .menu-filter {
    text-align: left !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin: 20px 0 40px 0 !important;
}

.menu-modal .menu-filter select {
    width: 260px !important;  
    max-width: 100%;
}


.menu-modal .menu-filter select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 260px;
  max-width: 100%;

  background-color: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;

  padding: 12px 40px 12px 16px; 

  font-size: 14px;
  cursor: pointer;

}

.menu-modal .menu-filter select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 260px;
  max-width: 100%;

  background-color: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;

  padding: 12px 40px 12px 16px; 

  font-size: 14px;
  cursor: pointer;

 
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23cfa670'>\
  <path d='M7 10l5 5 5-5z'/></svg>");
  
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}


.menu-modal .menu-filter select::-ms-expand{
  display: none;
}

@media (max-width: 767px) {

  
  .photo_wall_wrapper.shortcode{
    overflow: hidden !important;
    width: 100% !important;
    padding: 0 !important;
  }

  
  .photo_wall_wrapper.shortcode .gallery-track{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    will-change: transform;
    animation: galleryLoop var(--loopDur, 18s) linear infinite;
  }

  
  .photo_wall_wrapper.shortcode .wall_entry{
    flex: 0 0 auto !important;
    width: 78vw;              /* size like your screenshot */
    max-width: 360px;
  }

  
  .photo_wall_wrapper.shortcode .wall_thumbnail,
  .photo_wall_wrapper.shortcode .wall_thumbnail a,
  .photo_wall_wrapper.shortcode .wall_thumbnail img{
    display: block;
    width: 100%;
  }

  .photo_wall_wrapper.shortcode .wall_thumbnail img{
    height: 210px;            /* adjust if you want taller/shorter */
    object-fit: cover;
    border-radius: 10px;
  }

  
  @keyframes galleryLoop{
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--loopDist, 1000px))); }
  }

  
  .photo_wall_wrapper.shortcode{
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
}
@media (max-width: 767px){

  .photo_wall_wrapper.shortcode{
    overflow: hidden !important;
    width: 100% !important;
  }

  
  .photo_wall_wrapper.shortcode .wall_entry{
    float: none !important;
    clear: none !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  .photo_wall_wrapper.shortcode .gallery-track{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    will-change: transform;
    animation: galleryLoop var(--loopDur, 18s) linear infinite;
  }

  .photo_wall_wrapper.shortcode .wall_entry{
    flex: 0 0 auto !important;
    width: 78vw !important;
    max-width: 360px !important;
  }

  .photo_wall_wrapper.shortcode img{
    width: 100% !important;
    height: 210px !important;
    object-fit: cover !important;
    border-radius: 10px;
    display:block;
  }

  @keyframes galleryLoop{
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--loopDist, 1000px))); }
  }
}
@media (max-width: 767px){

  .photo_wall_wrapper,
  .photo_wall_wrapper.shortcode{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  
  .photo_wall_wrapper.shortcode,
  .photo_wall_wrapper.shortcode *{
    max-height: none !important;
  }

  
  .photo_wall_wrapper .wall_entry{
    margin-bottom: 0 !important;
  }

  
  .photo_wall_wrapper.shortcode{
    display: block !important;
    line-height: 0 !important;  
  }

  
  .photo_wall_wrapper.shortcode .gallery-track{
    align-items: center;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}
.blog-card .text-overlay{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.blog-card .menu-text{
  flex: 1 1 auto;
  min-width: 0;
}

.blog-card .menu-text h2,
.blog-card .menu-text p,
.blog-card .menu-price{
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}

.blog-card .menu-text h2{
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 6px 0;
}

.blog-card .menu-text p{
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

.blog-card .menu-price{
  flex: 0 0 auto;
  white-space: nowrap !important;
  font-size: 16px;
  line-height: 1.2;
  text-align: right;
}
.menu-section[data-category="SOUPS"] .menu-price{
  font-size:18px;
  font-weight:600;
  color:#c8a96a;
  text-align:right;
  line-height:1.2;
}

.menu-section[data-category="SOUPS"] .menu-price .sharing{
  display:block;
  font-size:13px;
  font-weight:400;
  opacity:0.8;
}
.text-overlay{
  position:absolute;
  bottom:40px; /* moves everything slightly upward */
  left:0;
  right:0;
  padding:0 28px;
}

.menu-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.menu-row h2{
  margin:0;
  font-size:22px;
  letter-spacing:1px;
}

.menu-info p{
  margin-top:8px;
  font-size:14px;
  opacity:0.85;
}

.menu-price{
  font-size:22px;
  font-weight:700;
  color:#c8a96a;
}
/* Remove hover effects inside Menu Modal */
#menuModal .blog-card:hover,
#menuModal .blog-card:hover img,
#menuModal .blog-card:hover .blog-img,
#menuModal .blog-card:hover .text-overlay {
  transform: none !important;
  scale: 1 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Disable all transitions */
#menuModal .blog-card,
#menuModal .blog-card * {
  transition: none !important;
}
/* Disable clicking in Menu Modal on desktop */
@media (min-width:1024px){

  #menuModal .blog-card,
  #menuModal .blog-card a{
    pointer-events: none;
    cursor: default;
  }

}
/* ===== FORCE RECTANGLE MENU CARDS (MAIN + MODAL) ===== */

.card-wrapper .blog-card,
.modal-menu-grid .blog-card,
.menu-items .blog-card{
    border-radius: 0 !important;
    overflow: hidden;
    height: 420px !important;
    position: relative;
}

/* Image fills card */
.card-wrapper .blog-card .blog-img,
.modal-menu-grid .blog-card .blog-img,
.menu-items .blog-card .blog-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Overlay stays at bottom */
.card-wrapper .blog-card .text-overlay,
.modal-menu-grid .blog-card .text-overlay,
.menu-items .blog-card .text-overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
}

/* Text layout */
.menu-text h2{
    font-size: 18px;
    margin: 0;
}

.menu-text p{
    font-size: 13px;
    margin: 4px 0 0 0;
}

.menu-price{
    font-weight: bold;
    font-size: 16px;
    margin-top: 6px;
}
/* Reduce menu card overlay height */
#menu .blog-card .text-overlay,
.card-wrapper .blog-card .text-overlay {
  min-height: 0 !important;
  height: auto !important;
  padding: 14px 16px !important;   /* smaller top/bottom padding */
  bottom: 0 !important;
}

/* Keep title/desc/price tighter */
#menu .blog-card .menu-text h2,
.card-wrapper .blog-card .menu-text h2 {
  margin: 0 0 4px 0 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

#menu .blog-card .menu-text p,
.card-wrapper .blog-card .menu-text p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

#menu .blog-card .menu-price,
.card-wrapper .blog-card .menu-price {
  font-size: 18px !important;
  line-height: 1 !important;
}
/* FORCE overlay to fade from bottom to top */
#menu .blog-card .text-overlay,
.card-wrapper .blog-card .text-overlay,
#menuModal .blog-card .text-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.78) 75%,
    rgba(0, 0, 0, 0.45) 88%,
    rgba(0, 0, 0, 0) 100%
  ) !important;

  background-color: transparent !important;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.78) 75%,
    rgba(0, 0, 0, 0.45) 88%,
    rgba(0, 0, 0, 0) 100%
  ) !important;

  backdrop-filter: none !important;
}
/* ===== FIX MENU CARD SUBTITLES ===== */

.menu-text p{
  font-size:14px;
  line-height:1.4;
  color:#e6e6e6;

  /* allow full subtitle */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;

  display:block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* make overlay slightly taller for long text */
.text-overlay{
  padding:18px 20px 22px;
  align-items:flex-end;
}

/* keep price aligned right */
.menu-price{
  font-size:18px;
  font-weight:600;
  color:#d6a45c;
  white-space:nowrap;
  margin-left:10px;
}

/* make sure text area can grow */
.menu-text{
  flex:1;
  min-width:0;
}

/* allow card to handle longer text */
.blog-card{
  overflow:hidden;
}
/* ===== FULL SUBTITLE FIX ===== */

/* card size */
.blog-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 520px !important;
  height: auto !important;
}

/* image fills card */
.blog-card .blog-img{
  width: 100%;
  height: 520px !important;
  object-fit: cover;
  display: block;
}

/* darker overlay with more room for text */
.blog-card .text-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 18px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.82) 45%, rgba(0,0,0,0.15) 100%);
}

/* text area */
.blog-card .menu-text{
  flex: 1;
  min-width: 0;
}

/* title */
.blog-card .menu-text h2{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.15;
  color: #fff;
}

/* subtitle */
.blog-card .menu-text p{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: block !important;
  max-height: none !important;
  height: auto !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* price */
.blog-card .menu-price{
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  color: #d6a45c;
  margin-left: 8px;
}

/* modal cards grid */
.modal-menu-grid .blog-card,
.card-wrapper .blog-card{
  min-height: 520px !important;
}

/* mobile */
@media (max-width: 768px){
  .blog-card{
    min-height: 460px !important;
  }

  .blog-card .blog-img{
    height: 460px !important;
  }

  .blog-card .text-overlay{
    padding: 16px 14px 14px;
  }

  .blog-card .menu-text h2{
    font-size: 16px;
  }

  .blog-card .menu-text p{
    font-size: 12px;
    line-height: 1.4;
  }

  .blog-card .menu-price{
    font-size: 14px;
  }
}
/* ===== FORCE SUBTITLE TO 2 LINES ===== */

.blog-card .text-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:block !important;
  padding:16px 18px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 55%, rgba(0,0,0,0) 100%);
}

.blog-card .menu-text{
  width:100% !important;
}

.blog-card .menu-text h2{
  margin:0 0 8px 0;
}

.blog-card .menu-text p{
  margin:0;
  font-size:14px;
  line-height:1.4;
  color:#e6e6e6 !important;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:normal !important;

  max-width:100% !important;
  width:100% !important;
}

/* put price below text so subtitle gets full width */
.blog-card .menu-price{
  display:block !important;
  margin-top:10px;
  margin-left:0 !important;
  text-align:right;
  white-space:nowrap;
  font-size:18px;
  font-weight:700;
  color:#d6a45c;
}

/* mobile */
@media (max-width:768px){
  .blog-card .text-overlay{
    padding:14px 14px 16px;
  }

  .blog-card .menu-text h2{
    font-size:16px;
  }

  .blog-card .menu-text p{
    font-size:12px;
    line-height:1.35;
  }

  .blog-card .menu-price{
    font-size:15px;
    margin-top:8px;
  }
}
/* ===== FIX SUBTITLE WRAP BESIDE PRICE ===== */

.blog-card .text-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px 18px 18px;
  box-sizing:border-box;
}

/* title takes full width */
.blog-card .menu-text h2{
  display:block;
  width:100%;
  margin:0 0 8px 0;
}

/* subtitle gets space before the price */
.blog-card .menu-text p{
  margin:0;
  padding-right:110px !important;
  font-size:14px;
  line-height:1.4;
  color:#e6e6e6;

  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;

  word-break:break-word;
}

/* keep price fixed in lower right */
.blog-card .menu-price{
  position:absolute !important;
  right:18px;
  bottom:18px;
  font-size:18px;
  font-weight:700;
  color:#d6a45c;
  white-space:nowrap;
  z-index:2;
}

/* make sure text wrapper spans whole card */
.blog-card .menu-text{
  display:block;
  width:100% !important;
  max-width:100% !important;
}
.blog-card .menu-text p,
.blog-card .text-overlay p{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
}
/* ===== FINAL FIX FOR SUBTITLE + PRICE OVERLAP ===== */

.blog-card .text-overlay{
  position:absolute !important;
  left:0;
  right:0;
  bottom:0;
  padding:16px 18px 18px !important;
  box-sizing:border-box;
  display:block !important;
}

/* make the text block fill the card */
.blog-card .menu-text{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

/* title */
.blog-card .menu-text h2{
  display:block !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  width:100% !important;
  line-height:1.15;
}

/* subtitle */
.blog-card .menu-text p{
  display:block !important;
  margin:0 !important;
  padding:0 120px 0 0 !important; /* reserve space for price */
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;

  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;
  word-break:break-word !important;
  line-height:1.4 !important;
}

/* price stays bottom right */
.blog-card .menu-price{
  position:absolute !important;
  right:18px !important;
  bottom:18px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:3 !important;
  white-space:nowrap !important;
  font-weight:700;
}

/* remove any flex squeezing from old styles */
.blog-card .text-overlay,
.blog-card .menu-text,
.blog-card .menu-price{
  float:none !important;
}
/* =========================================
   FINAL OVERRIDE — SHOW FULL SUBTITLE TEXT
   Paste at the VERY BOTTOM
========================================= */

#menu .blog-card .text-overlay,
.card-wrapper .blog-card .text-overlay,
#menuModal .blog-card .text-overlay,
.blog-card .text-overlay{
  height: auto !important;
  min-height: unset !important;
  display: block !important;
  padding: 16px 18px 18px !important;
  box-sizing: border-box !important;
}

/* title */
#menu .blog-card .menu-text h2,
.card-wrapper .blog-card .menu-text h2,
#menuModal .blog-card .menu-text h2,
.blog-card .menu-text h2{
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important;
}

/* subtitle: show ALL text */
#menu .blog-card .menu-text p,
.card-wrapper .blog-card .menu-text p,
#menuModal .blog-card .menu-text p,
.blog-card .menu-text p,
.blog-card .text-overlay p{
  display: block !important;
  margin: 0 !important;
  padding: 0 120px 0 0 !important;   /* keeps text away from price */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;

  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* price stays bottom-right */
#menu .blog-card .menu-price,
.card-wrapper .blog-card .menu-price,
#menuModal .blog-card .menu-price,
.blog-card .menu-price{
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  z-index: 3 !important;
}

/* let the card hold more text */
#menu .blog-card,
.card-wrapper .blog-card,
#menuModal .blog-card,
.blog-card{
  min-height: 520px !important;
  height: auto !important;
}

#menu .blog-card .blog-img,
.card-wrapper .blog-card .blog-img,
#menuModal .blog-card .blog-img,
.blog-card .blog-img{
  height: 520px !important;
}


.blog-card .text-overlay{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  width:100% !important;
  height:auto !important;
  min-height:unset !important;

  padding:18px 18px 20px !important;
  box-sizing:border-box !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;

  /* gradient that expands with text */
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.95) 0%,
    rgba(0,0,0,0.80) 35%,
    rgba(0,0,0,0.45) 65%,
    rgba(0,0,0,0.0) 100%
  ) !important;
}

/* title */
.blog-card .menu-text h2{
  margin:0 0 6px 0 !important;
  line-height:1.25 !important;
}

/* subtitle fully visible */
.blog-card .menu-text p{
  margin:0 !important;
  line-height:1.45 !important;

  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;

  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
}

/* keep price bottom right */
.blog-card .menu-price{
  position:absolute !important;
  right:18px !important;
  bottom:18px !important;
  margin:0 !important;
  white-space:nowrap !important;
}

/* keep subtitle from hitting the price */
.blog-card .menu-text p{
  padding-right:110px !important;
}



/* =========================================
   LANDSCAPE MENU CARDS
   Paste at VERY BOTTOM
========================================= */

/* MAIN MENU CARDS */
#menu .card-wrapper{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

#menu .blog-card{
  aspect-ratio: 16 / 10 !important;   /* landscape */
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  position: relative !important;
}

#menu .blog-card .blog-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#menu .blog-card .text-overlay{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 14px 16px !important;
  min-height: auto !important;
  height: auto !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* MODAL MENU CARDS */
#menuModal .menu-items{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

#menuModal .blog-card{
  aspect-ratio: 16 / 10 !important;   /* landscape */
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  position: relative !important;
}

#menuModal .blog-card .blog-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#menuModal .blog-card .text-overlay{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 12px 14px !important;
  min-height: auto !important;
  height: auto !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* TEXT SIZING FOR LANDSCAPE */
#menu .blog-card .menu-text h2,
#menuModal .blog-card .menu-text h2{
  font-size: 18px !important;
  line-height: 1.2 !important;
  margin: 0 0 4px 0 !important;
}

#menu .blog-card .menu-text p,
#menuModal .blog-card .menu-text p{
  font-size: 13px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

#menu .blog-card .menu-price,
#menuModal .blog-card .menu-price{
  font-size: 18px !important;
  right: 14px !important;
  bottom: 14px !important;
}

/* MOBILE */
@media (max-width: 767px){
  #menu .card-wrapper,
  #menuModal .menu-items{
    grid-template-columns: 1fr !important;
  }

  #menu .blog-card,
  #menuModal .blog-card{
    aspect-ratio: 16 / 10 !important;
  }
}

/* Modal backdrop */
#menuModal.menu-modal{
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 24px !important;
}

/* Main modal box */
#menuModal .modal-container{
  width: min(1200px, 94vw) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;

  background: #0d0d0d !important;
  color: #fff !important;

  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45) !important;

  padding: 32px 32px 26px !important;
}

/* Custom scrollbar */
#menuModal .modal-container::-webkit-scrollbar{
  width: 10px;
}
#menuModal .modal-container::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
#menuModal .modal-container::-webkit-scrollbar-thumb{
  background: rgba(207,166,112,0.65);
  border-radius: 10px;
}

/* Close button */
#menuModal .close-modal{
  top: 18px !important;
  right: 22px !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

/* Modal heading */
#menuModal .modal-container h2{
  font-size: 30px !important;
  line-height: 1.1 !important;
  letter-spacing: 2px !important;
  margin: 0 0 22px 0 !important;
  text-align: center !important;
  color: #fff !important;
}

/* Filter area */
#menuModal .menu-filter{
  display: flex !important;
  justify-content: center !important;
  margin: 0 0 28px 0 !important;
}

#menuModal .menu-filter select{
  width: min(320px, 100%) !important;
  height: 46px !important;
  padding: 0 42px 0 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background-color: #151515 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* Each section */
#menuModal .menu-section{
  margin-bottom: 42px !important;
}

/* Section title */
#menuModal .menu-section-title{
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #f5f5f5 !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* Grid */
#menuModal .menu-items{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

/* Card */
#menuModal .blog-card{
  position: relative !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #000 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.26) !important;
}

/* Image */
#menuModal .blog-card .blog-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Overlay – elegant fading */
#menuModal .blog-card .text-overlay{
  position: absolute !important;
  inset: auto 0 0 0 !important;
  padding: 18px 18px 16px !important;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.96) 0%,
    rgba(0,0,0,0.84) 34%,
    rgba(0,0,0,0.58) 58%,
    rgba(0,0,0,0.24) 80%,
    rgba(0,0,0,0.00) 100%
  ) !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 16px !important;
}

/* Text block */
#menuModal .menu-text{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Dish name */
#menuModal .menu-text h2{
  margin: 0 0 6px 0 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-align: left !important;
  letter-spacing: 0.2px !important;
}

/* Description */
#menuModal .menu-text p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,0.82) !important;
  text-align: left !important;
}

/* Price */
#menuModal .menu-price{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #cfa670 !important;
  text-align: right !important;
}

/* Sharing text under price */
#menuModal .menu-price .sharing{
  display: block !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.70) !important;
}

/* Bottom action area */
#menuModal .modal-bottom-actions{
  padding-top: 8px !important;
}

#menuModal .back-to-top-inline{
  border-radius: 10px !important;
  padding: 10px 16px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* Tablet */
@media (max-width: 991px){
  #menuModal .menu-items{
    grid-template-columns: 1fr !important;
  }

  #menuModal .blog-card{
    aspect-ratio: 16 / 10 !important;
  }
}

/* Mobile */
@media (max-width: 767px){
  #menuModal.menu-modal{
    padding: 12px !important;
  }

  #menuModal .modal-container{
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 18px !important;
    padding: 22px 16px 18px !important;
  }

  #menuModal .modal-container h2{
    font-size: 24px !important;
    margin-bottom: 18px !important;
  }

  #menuModal .menu-section-title{
    font-size: 15px !important;
    letter-spacing: 2px !important;
  }

  #menuModal .blog-card .text-overlay{
    padding: 14px 14px 12px !important;
  }

  #menuModal .menu-text h2{
    font-size: 18px !important;
  }

  #menuModal .menu-text p{
    font-size: 12px !important;
  }

  #menuModal .menu-price{
    font-size: 18px !important;
  }
}
#menuModal .blog-card .text-overlay{
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.95) 23%,
    rgba(0,0,0,0.85) 55%,
    rgba(0,0,0,0.65) 75%,
    rgba(0,0,0,0.40) 85%,
    rgba(0,0,0,0.18) 92%,
    rgba(0,0,0,0.00) 100%
  ) !important;
}
/* =========================================
   LOCK MOBILE MENU SIZE + PLACEMENT
   Paste at VERY BOTTOM of CSS
========================================= */
@media (max-width: 767px){

  /* keep menu section width and position */
  #menu .card-wrapper{
    width: calc(100% - 32px) !important;
    max-width: 360px !important;
    margin: 30px auto 0 !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    justify-items: stretch !important;
    align-items: start !important;
  }

  /* keep card size exactly consistent */
  #menu .blog-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    height: auto !important;

    border-radius: 18px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* image fills the card */
  #menu .blog-card .blog-img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* keep overlay placement like screenshot */
  #menu .blog-card .text-overlay{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    min-height: 42% !important;
    height: auto !important;
    padding: 12px 10px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    text-align: center !important;
    background: rgba(0,0,0,0.55) !important;
    background-image: none !important;
    backdrop-filter: none !important;
  }

  /* keep title size/placement */
  #menu .blog-card .menu-text{
    width: 100% !important;
    min-width: 0 !important;
  }

  #menu .blog-card .menu-text h2{
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-align: center !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* keep subtitle and price hidden on mobile */
  #menu .blog-card .menu-text p,
  #menu .blog-card .menu-price{
    display: none !important;
  }

  /* keep button size/placement */
  #menu .blog-card .mobile-view-btn,
  #menu .blog-card .text-overlay button{
    display: inline-block !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
    border: none !important;
    background: rgba(255,255,255,0.7) !important;
    color: #111 !important;
    font-weight: 500 !important;
    margin: 0 auto !important;
  }

  /* stop any mobile rules from resizing cards */
  #menu .blog-card:hover,
  #menu .blog-card:hover *{
    transform: none !important;
    box-shadow: none !important;
  }
}
#menuModal .blog-card .text-overlay{
  min-height: 28% !important;   /* smaller overlay */
  padding: 8px 10px !important; /* tighter spacing */
}

/* tighten title spacing */
#menuModal .blog-card .menu-text h2{
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* reduce button spacing */
#menuModal .blog-card .text-overlay button{
  margin-top: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
}
/* =========================================
   REDUCE OVERLAY HEIGHT IN MODAL MENU
   ========================================= */

#menuModal .blog-card .text-overlay{
  min-height: auto !important;   /* remove forced tall overlay */
  padding: 10px 16px 12px !important; /* tighter spacing */
}

/* tighten text spacing */
#menuModal .blog-card .menu-text h2{
  margin-bottom: 4px !important;
}

#menuModal .blog-card .menu-text p{
  margin: 0 !important;
}

/* keep price aligned but closer */
#menuModal .blog-card .menu-price{
  bottom: 12px !important;
}
#menuModal .blog-card .menu-text h2{
  font-size: 22px !important;   /* increase title size */
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
#menuModal.menu-modal{
  background:
    radial-gradient(circle at 20% 20%, rgba(207,166,112,0.15), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(207,166,112,0.12), transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(207,166,112,0.10), transparent 50%),
    linear-gradient(
      180deg,
      rgba(10,10,10,0.92) 0%,
      rgba(5,5,5,0.96) 100%
    ) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
#menu .blog-card,
#menuModal .blog-card {
  border: 1.5px solid #cfa670 !important;
}
/* =========================
   MENU MODAL DECOR BACKGROUND
   Paste below your CSS
========================= */

.menu-modal .modal-container{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(207,166,112,0.14), transparent 22%),
    radial-gradient(circle at bottom left, rgba(133,0,0,0.18), transparent 24%),
    linear-gradient(180deg, #070707 0%, #0d0d0d 100%);
  border: 1px solid rgba(207,166,112,0.18);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* soft ingredient/icon pattern layer */
.menu-modal .modal-container::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d4aa70' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 28c10-12 25-13 33-4 9 10 7 25-8 37-13 10-30 10-38 0-8-10-2-23 13-33z'/%3E%3Cpath d='M34 32c7 7 12 16 13 28'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23b53a3a' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M70 23c13 0 23 10 23 23S83 69 70 90C57 69 47 59 47 46s10-23 23-23z'/%3E%3Cpath d='M70 23c0 21-3 42-11 58'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23d4aa70' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M44 34l42 42'/%3E%3Cpath d='M51 27l42 42'/%3E%3Cpath d='M84 76c7 8 9 15 6 18-3 3-10 1-18-6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%23cfc3a3' stroke-width='2'%3E%3Cpath d='M32 67c0-15 11-26 24-26s24 11 24 26'/%3E%3Cpath d='M39 67c0-11 7-19 17-19s17 8 17 19'/%3E%3Cpath d='M46 67c0-6 4-11 10-11s10 5 10 11'/%3E%3Cpath d='M27 71h58'/%3E%3C/g%3E%3C/svg%3E");
  background-position:
    18px 40px,
    right 30px top 120px,
    left 35px bottom 180px,
    right 80px bottom 60px;
  background-size:
    110px 110px,
    120px 120px,
    115px 115px,
    90px 90px;
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y;
}

/* subtle paper/grain texture */
.menu-modal .modal-container::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  mix-blend-mode: soft-light;
}

/* keep all real content above the decorative layers */
.menu-modal .modal-container > *{
  position: relative;
  z-index: 1;
}

/* optional: make title/filter look more premium */
.menu-modal h2{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.menu-modal h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, #cfa670, rgba(207,166,112,0));
}

/* optional: make cards blend better with new background */
.menu-modal .blog-card{
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(207,166,112,0.10);
  backdrop-filter: blur(2px);
}

/* modal container */
.menu-modal .modal-container{
  position: relative;
  overflow-y: auto;
  background: transparent;
}

/* sticky background image */
.menu-modal .modal-container .modal-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
  opacity: 0.22;

  z-index: 0;
  pointer-events: none;
}

/* dark overlay for readability */
.menu-modal .modal-container::before{
  content: "";
  position: fixed;
  inset: 0;

  background:
    linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.85)),
    radial-gradient(circle at top right, rgba(207,166,112,0.15), transparent 25%),
    radial-gradient(circle at bottom left, rgba(133,0,0,0.18), transparent 30%);

  z-index: 1;
  pointer-events: none;
}

/* keep content above */
.menu-modal .modal-container > *:not(.modal-bg){
  position: relative;
  z-index: 2;
}

.menu-modal .modal-container{
  position: relative !important;
}

.menu-modal .close-modal{
  position: absolute !important;
  top: 20px !important;
  right: 25px !important;
  left: auto !important;

  width: 44px !important;
  height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;
  background: rgba(0,0,0,0.6) !important;
  color: #fff !important;

  font-size: 22px !important;
  cursor: pointer !important;

  z-index: 9999 !important;
  transition: all 0.3s ease !important;
}

.menu-modal .close-modal:hover{
  background: #cfa670 !important;
  color: #000 !important;
}

.menu-modal .modal-container{
  position: relative !important;
}

.modal-bottom-actions{
  position: sticky !important;
  bottom: 20px !important;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

#backToTop{
  pointer-events: auto;
  margin-right: 20px;

  padding: 12px 18px;

  background: #cfa670;
  color: #000;

  border: none;
  border-radius: 30px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  box-shadow: 0 8px 25px rgba(0,0,0,0.4);

  transition: all 0.3s ease;
}

#backToTop:hover{
  background: #e0b97a;
  transform: translateY(-2px);
}
/* ===== STEAKS SINGLE BIG CARD ===== */
.menu-section[data-category="STEAKS"] .menu-items{
  display: block !important;
}

.menu-section[data-category="STEAKS"] .single-menu-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  width: 100%;
  min-height: 520px;
}

.menu-section[data-category="STEAKS"] .big-menu-img{
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

.menu-section[data-category="STEAKS"] .single-menu-card .text-overlay{
  position: absolute;
  inset: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.72) 45%,
    rgba(0,0,0,0.25) 75%,
    rgba(0,0,0,0) 100%
  ) !important;
}

.menu-section[data-category="STEAKS"] .menu-content{
  width: 100%;
  max-width: 700px;
}

.menu-section[data-category="STEAKS"] .menu-content h2{
  margin: 0 0 14px 0;
  color: #fff;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1px;
}

.menu-section[data-category="STEAKS"] .menu-list{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.menu-section[data-category="STEAKS"] .menu-list-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.22);
}

.menu-section[data-category="STEAKS"] .menu-list-item span:first-child{
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}

.menu-section[data-category="STEAKS"] .menu-list-item span:last-child{
  color: #cfa670;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 767px){
  .menu-section[data-category="STEAKS"] .single-menu-card{
    min-height: 460px;
  }

  .menu-section[data-category="STEAKS"] .big-menu-img{
    height: 460px;
  }

  .menu-section[data-category="STEAKS"] .single-menu-card .text-overlay{
    padding: 18px;
  }

  .menu-section[data-category="STEAKS"] .menu-content h2{
    font-size: 22px;
    margin-bottom: 10px;
  }

  .menu-section[data-category="STEAKS"] .menu-list-item{
    padding: 8px 0;
    gap: 14px;
  }

  .menu-section[data-category="STEAKS"] .menu-list-item span:first-child,
  .menu-section[data-category="STEAKS"] .menu-list-item span:last-child{
    font-size: 14px;
  }
}
/* ===== FIX STEAKS SECTION OVERLAYING OTHER CATEGORIES ===== */
.menu-section[data-category="STEAKS"] .menu-items{
  display: block !important;
}

.menu-section[data-category="STEAKS"] .single-menu-card{
  position: relative !important;
  width: 100% !important;
  min-height: 520px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.menu-section[data-category="STEAKS"] .big-menu-img{
  width: 100% !important;
  height: 520px !important;
  object-fit: cover !important;
  display: block !important;
}

/* IMPORTANT: overlay stays only inside the steak card */
.menu-section[data-category="STEAKS"] .single-menu-card .text-overlay{
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  padding: 24px !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.90) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0) 100%
  ) !important;

  z-index: 2 !important;
}

/* prevent old modal/card rules from affecting the steak list */
.menu-section[data-category="STEAKS"] .menu-content{
  width: 100% !important;
  max-width: 100% !important;
}

.menu-section[data-category="STEAKS"] .menu-list{
  display: block !important;
  margin-top: 12px !important;
}

.menu-section[data-category="STEAKS"] .menu-list-item{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

.menu-section[data-category="STEAKS"] .menu-list-item span:first-child{
  color: #fff !important;
}

.menu-section[data-category="STEAKS"] .menu-list-item span:last-child{
  color: #cfa670 !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
}


.menu-section[data-category="STEAKS"]{
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 40px !important;
}

.menu-section[data-category="STEAKS"] .menu-items{
  display: flex !important;
  justify-content: center !important;
}


.menu-section[data-category="STEAKS"] .single-menu-card{
  width: 90% !important;        /* increase width */
  max-width: 1100px !important; /* control max size */
  margin: 0 auto !important;    /* center horizontally */
}

.menu-section[data-category="STEAKS"] .big-menu-img{
  height: 600px !important;
}
.menu-section[data-category="STEAKS"] .single-menu-card{
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
/* =========================
   FINAL STEAKS WIDTH + CENTER FIX
   Paste at VERY BOTTOM
========================= */

#menuModal .menu-section[data-category="STEAKS"]{
  width: 100% !important;
  max-width: 100% !important;
}

#menuModal .menu-section[data-category="STEAKS"] .menu-items{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

#menuModal .menu-section[data-category="STEAKS"] .single-menu-card{
  display: block !important;
  position: relative !important;

  width: min(1100px, 92%) !important;
  max-width: 1100px !important;
  margin: 0 auto !important;

  min-height: 620px !important;
  height: 620px !important;

  border-radius: 22px !important;
  overflow: hidden !important;
}

#menuModal .menu-section[data-category="STEAKS"] .big-menu-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#menuModal .menu-section[data-category="STEAKS"] .single-menu-card .text-overlay{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;

  padding: 28px !important;
  box-sizing: border-box !important;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.58) 42%,
    rgba(0,0,0,0.18) 72%,
    rgba(0,0,0,0) 100%
  ) !important;
}

#menuModal .menu-section[data-category="STEAKS"] .menu-content{
  width: 100% !important;
  max-width: 100% !important;
}

#menuModal .menu-section[data-category="STEAKS"] .menu-content h2{
  margin: 0 0 14px 0 !important;
  font-size: 28px !important;
  text-align: center !important;
  color: #fff !important;
}

#menuModal .menu-section[data-category="STEAKS"] .menu-list{
  width: 100% !important;
}

#menuModal .menu-section[data-category="STEAKS"] .menu-list-item{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.20) !important;
}

#menuModal .menu-section[data-category="STEAKS"] .menu-list-item span:first-child{
  color: #fff !important;
  font-size: 16px !important;
}

#menuModal .menu-section[data-category="STEAKS"] .menu-list-item span:last-child{
  color: #cfa670 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* mobile */
@media (max-width: 767px){
  #menuModal .menu-section[data-category="STEAKS"] .single-menu-card{
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
  }

  #menuModal .menu-section[data-category="STEAKS"] .single-menu-card .text-overlay{
    padding: 18px !important;
  }

  #menuModal .menu-section[data-category="STEAKS"] .menu-content h2{
    font-size: 22px !important;
  }

  #menuModal .menu-section[data-category="STEAKS"] .menu-list-item span:first-child,
  #menuModal .menu-section[data-category="STEAKS"] .menu-list-item span:last-child{
    font-size: 14px !important;
  }
}
/* GOLD BORDER STYLE */
.blog-card,
.single-menu-card {
  border: 1.5px solid rgba(207, 166, 112, 0.8); /* gold */
  border-radius: 18px;
  overflow: hidden;

  /* subtle glow */
  box-shadow: 0 0 0 1px rgba(207, 166, 112, 0.2),
              0 10px 30px rgba(0,0,0,0.6);
}
@media only screen and (max-width: 767px) {

  #menu .blog-card .text-overlay,
  #menuModal .blog-card .text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    padding: 14px 18px !important;

    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(4px) !important;
  }

  /* TITLE */
  #menu .blog-card .menu-text,
  #menuModal .blog-card .menu-text {
    margin: 0 !important;
    text-align: left !important;
  }

  #menu .blog-card .menu-text h2,
  #menuModal .blog-card .menu-text h2 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    text-transform: uppercase !important;
  }

  /* REMOVE DESCRIPTION */
  #menu .blog-card .menu-text p,
  #menuModal .blog-card .menu-text p {
    display: none !important;
  }

  /* REMOVE PRICE */
  #menu .blog-card .menu-price,
  #menuModal .blog-card .menu-price {
    display: none !important;
  }

  /* VIEW TEXT (RIGHT SIDE) */
  #menu .blog-card .text-overlay::after,
  #menuModal .blog-card .text-overlay::after {
    content: "View" !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #cfa670 !important;
  }
}
@media only screen and (max-width: 767px) {

  /* Remove gold underline / line */
  #menu .blog-card .menu-text h2,
  #menuModal .blog-card .menu-text h2 {
    border: none !important;
    text-decoration: none !important;
  }

  /* Remove pseudo line (very common in themes) */
  #menu .blog-card .menu-text h2::after,
  #menu .blog-card .menu-text h2::before,
  #menuModal .blog-card .menu-text h2::after,
  #menuModal .blog-card .menu-text h2::before {
    display: none !important;
    content: none !important;
  }

  /* In case theme uses span for the line */
  #menu .blog-card .menu-text span,
  #menuModal .blog-card .menu-text span {
    border: none !important;
  }
}
@media only screen and (max-width: 767px) {

  #menu .blog-card,
  #menuModal .blog-card {
    position: relative !important;
    overflow: hidden !important;
  }

  #menu .blog-card .blog-img,
  #menuModal .blog-card .blog-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
  }

  #menu .blog-card .text-overlay,
  #menuModal .blog-card .text-overlay {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    inset: auto 0 0 0 !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 14px !important;

    padding: 16px 18px !important;
    min-height: 96px !important;
    height: auto !important;

    text-align: left !important;
    box-sizing: border-box !important;

    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.82) 38%,
      rgba(0, 0, 0, 0.50) 68%,
      rgba(0, 0, 0, 0.18) 86%,
      rgba(0, 0, 0, 0.00) 100%
    ) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* left text block */
  #menu .blog-card .menu-text,
  #menuModal .blog-card .menu-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* title */
  #menu .blog-card .menu-text h2,
  #menuModal .blog-card .menu-text h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border: none !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  /* remove any gold line / pseudo line */
  #menu .blog-card .menu-text h2::before,
  #menu .blog-card .menu-text h2::after,
  #menuModal .blog-card .menu-text h2::before,
  #menuModal .blog-card .menu-text h2::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
  }

  /* hide subtitle */
  #menu .blog-card .menu-text p,
  #menuModal .blog-card .menu-text p {
    display: none !important;
  }

  /* hide price */
  #menu .blog-card .menu-price,
  #menuModal .blog-card .menu-price {
    display: none !important;
  }

  /* remove real mobile button if still present */
  #menu .blog-card .mobile-view-btn,
  #menuModal .blog-card .mobile-view-btn,
  #menu .blog-card .text-overlay button,
  #menuModal .blog-card .text-overlay button {
    display: none !important;
  }

  /* fake View text on right */
  #menu .blog-card .text-overlay::after,
  #menuModal .blog-card .text-overlay::after {
    content: "View" !important;
    display: block !important;
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    margin: 0 !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: #cfa670 !important;
    white-space: nowrap !important;
  }

  /* prevent old full-card overlay rules from taking over */
  #menu .blog-card:hover .text-overlay,
  #menu .blog-card:active .text-overlay,
  #menu .blog-card:focus .text-overlay,
  #menuModal .blog-card:hover .text-overlay,
  #menuModal .blog-card:active .text-overlay,
  #menuModal .blog-card:focus .text-overlay {
    inset: auto 0 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    min-height: 96px !important;
    height: auto !important;
    opacity: 1 !important;
  }

  /* make sure image never blurs */
  #menu .blog-card:hover .blog-img,
  #menuModal .blog-card:hover .blog-img,
  #menu .blog-card img,
  #menuModal .blog-card img {
    filter: none !important;
    transform: none !important;
  }
}
@media only screen and (max-width: 767px) {

  /* spread items to edges */
  #menu .blog-card .text-overlay,
  #menuModal .blog-card .text-overlay {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
  }

  /* title stays left */
  #menu .blog-card .menu-text,
  #menuModal .blog-card .menu-text {
    flex: 1 !important;
    text-align: left !important;
  }

  #menu .blog-card .menu-text h2,
  #menuModal .blog-card .menu-text h2 {
    text-align: left !important;
  }

  /* View stays right */
  #menu .blog-card .text-overlay::after,
  #menuModal .blog-card .text-overlay::after {
    margin-left: auto !important;
  }
}
/* =========================================
   FIX: TITLE + VIEW SAME BOTTOM LINE
   ========================================= */
@media only screen and (max-width: 767px) {

  /* make overlay fill card */
  #menu .blog-card .text-overlay,
  #menuModal .blog-card .text-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 15px !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
  }

  /* remove weird spacing above title */
  #menu .blog-card .menu-text,
  #menuModal .blog-card .menu-text {
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  #menu .blog-card .menu-text h2,
  #menuModal .blog-card .menu-text h2 {
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* push View to right */
  #menu .blog-card .text-overlay::after,
  #menuModal .blog-card .text-overlay::after {
    margin-left: auto !important;
  }
}
/* =========================================
   HARD FIX: TITLE + VIEW SAME LINE
   ========================================= */
@media only screen and (max-width: 767px) {

  #menu .blog-card .text-overlay,
  #menuModal .blog-card .text-overlay {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 14px !important;
    width: auto !important;

    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;

    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #menu .blog-card .menu-text,
  #menuModal .blog-card .menu-text {
    width: auto !important;
    max-width: calc(100% - 70px) !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    text-align: left !important;
  }

  #menu .blog-card .menu-text h2,
  #menuModal .blog-card .menu-text h2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: block !important;
  }

  #menu .blog-card .text-overlay::after,
  #menuModal .blog-card .text-overlay::after {
    content: "View" !important;
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    line-height: 1 !important;
    align-self: flex-end !important;
  }

  #menu .blog-card .menu-text p,
  #menuModal .blog-card .menu-text p,
  #menu .blog-card .menu-price,
  #menuModal .blog-card .menu-price {
    display: none !important;
  }
}
/* =========================================
   KEEP OVERLAY BACKGROUND + FIX TITLE
   ========================================= */
@media only screen and (max-width: 767px) {

  #menu .blog-card .text-overlay,
  #menuModal .blog-card .text-overlay {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    padding: 16px 18px !important;
    min-height: 110px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;

    /* keep your overlay background */
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.72) 38%,
      rgba(0,0,0,0.35) 72%,
      rgba(0,0,0,0.00) 100%
    ) !important;
  }

  /* title block stays inside overlay */
  #menu .blog-card .menu-text,
  #menuModal .blog-card .menu-text {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 68% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    text-align: left !important;
  }

  #menu .blog-card .menu-text h2,
  #menuModal .blog-card .menu-text h2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  /* keep subtitle and price hidden if that's your current mobile style */
  #menu .blog-card .menu-text p,
  #menuModal .blog-card .menu-text p,
  #menu .blog-card .menu-price,
  #menuModal .blog-card .menu-price {
    display: none !important;
  }

  /* keep View at bottom-right */
  #menu .blog-card .text-overlay::after,
  #menuModal .blog-card .text-overlay::after {
    content: "View" !important;
    display: block !important;
    margin-left: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    align-self: flex-end !important;
    color: #cfa670 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}
@media only screen and (max-width: 767px) {
  #menu .blog-card,
  #menuModal .blog-card {
    cursor: pointer !important;
    pointer-events: auto !important;
  }
}
.photo_wall_wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 per row */
    gap: 10px;
}

.wall_entry {
    width: 100%;
}

.wall_thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1; /* makes all items square */
    overflow: hidden;
}

.wall_thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops image nicely */
    display: block;
}


/* MOBILE SLIDER HIDDEN ON DESKTOP */
#gallery-slider {
    display: none;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#gallery-slider .slides li {
    margin: 0;
}

#gallery-slider .flex-direction-nav a:before {
    font-size: 24px;
}

#gallery-slider .flex-control-nav {
    bottom: -30px;
}

/* MOBILE */
@media (max-width: 767px) {
    #gallery-grid {
        display: none !important;
    }

    #gallery-slider {
        display: block;
    }

    #gallery-slider .wall_thumbnail {
        aspect-ratio: 1 / 1;
    }
}
@media (max-width: 768px) {
  #gallery.parallax.title {
    height: 130px !important;
    min-height: 130px;
    position: relative;
  }

  #gallery .parallax_title {
    position: absolute;
    bottom: 10px; /* 👈 pushes text to bottom */
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    text-align: center;
    width: 100%;
  }

  #gallery h2 {
    font-size: 22px;
    margin: 0;
  }
}
/* hide title on desktop */
.mobile-title {
  display: none;
}

/* mobile only */
@media (max-width: 768px) {
  .mobile-title {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
    margin-left: 8px; /* space from logo */
    vertical-align: middle;
  }
}
@media (max-width: 768px) {
  .mobile-title {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;

    /* ✅ vertical alignment fix */
    vertical-align: middle;
    line-height: normal;
  }
}
@media (max-width: 768px) {
  .mobile-title {
    position: relative;
    top: -20px; 
  }
}
/* ABOUT SECTION - MOBILE TEXT ALWAYS FULLY VISIBLE */
#about.about-section,
#about {
  text-align: center !important;
  padding: 50px 20px !important;
  overflow: visible !important;
}

#about .standard_wrapper,
#about .page_content_wrapper,
#about .inner,
#about .about-text-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

#about .about-text-wrap {
  max-width: 900px !important;
}

#about .about-text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  font-size: clamp(20px, 5vw, 30px) !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;

  letter-spacing: 0 !important;
  word-spacing: 0 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;

  color: #222 !important;
}

@media (max-width: 767px) {
  #about {
    padding: 28px 16px !important;
  }

  #about .about-text-wrap {
    max-width: 100% !important;
  }

  #about .about-text {
    font-size: clamp(16px, 6vw, 22px) !important;
    line-height: 1.6 !important;
  }
}
@media (max-width: 767px) {
  #about {
    margin-top: 40px !important;   
    padding-top: 50px !important;  
  }
}