@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

:root {
  --black-color: #000;
  --white-color: #FFF;
  --ball-color: #000;
  --cream_l-color: #FEFAEF;
  --cream_m-color: #FCF5E3;  
  
  --dark-red-color: #720F20; 
  --red-color: #D82541;  

}
*
{
	font-family: "Fraunces", serif;
	font-weight: 400;
	font-size:16px;
	color:var(--dark-red-color)

}
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

.font_1 , .font_1 *
{
	font-family: "Lisu Bosa", serif;
}
html , body
{
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;

}
.transition , footer p
{
	transition:all 0.5s ease-in-out;
}
body{}
a {
	color:var(--black-color);
	text-decoration:none;
	transition:0.8s;
	-webkit-transition:0.8s;
	-moz-transition:0.8s;
	-o-transition:0.8s;
}
a:hover , a:hover *{
	color:var(--red-color)
}
.weight-200 , .weight-200 * { font-weight: 200; }
.weight-300 , .weight-300 * { font-weight: 300; }
.weight-500 , .weight-500 * { font-weight: 500; }
.weight-600 , .weight-600 * { font-weight: 600; }
.weight-700 , .weight-700 * { font-weight: 700; }
.weight-800 , .weight-800 * { font-weight: 800; }
.weight-900 , .weight-900 * { font-weight: 900; }

.displaynone { display:none !important }
.dnone { display:none !important }
.d-inline-block { display:inline-block }
.d-block { display:block }
.d-flex { display:flex; flex-wrap: wrap; }
.d-flex1 { display:flex; }
.inline-block { display:inline-block }
.vError { border-color:red !important }
.form-error , .form-error * { color: red;font-size: 11px !important;font-style: italic; }
.h100 { height:100% }
.FormResult, .FormResult1, .FormResult *, .FormResult1 *, .FormResult2 * { color:green; }
.ajax-loader {
	display: block;
	width: 40px;
	height: 40px;
	margin: 10px auto;
	object-fit: contain;
}
.italic { font-style:italic }
.white { color:#FFF }
.white , .white * { color:#FFF }
.black , .black * { color:#000 }
.blur { background: transparent !important; }
.cur { cursor:pointer }
.trigger { cursor: pointer; }
.relative { position:relative; }
b, strong { font-weight:700; }
.txt-justify { text-align:justify }
.text-center { text-align:center }
.underline { text-decoration:underline }
.uppercase { text-transform:uppercase }
.capitalize{text-transform:capitalize}
.overflow_hidden , .overflow-hidden  { overflow:hidden }

/* Font sizes */
.font-10, .font-10 * { font-size:0.625rem }
.font-11, .font-11 * { font-size:0.6875rem }
.font-12, .font-12 * { font-size:0.75rem }
.font-13, .font-13 * { font-size:0.8125rem }
.font-14, .font-14 * { font-size:0.875rem }
.font-15, .font-15 * { font-size:0.9375rem }
.font-16, .font-16 * { font-size:1rem }
.font-17, .font-17 * { font-size:1.0625rem }
.font-18, .font-18 * { font-size:1.125rem }
.font-20, .font-20 * { font-size:1.25rem }
.font-22, .font-22 * { font-size:1.375rem }
.font-24, .font-24 * { font-size:1.5rem }
.font-25, .font-25 * { font-size:1.5625rem }
.font-26, .font-26 * { font-size:1.625rem }
.font-28, .font-28 * { font-size:1.75rem }
.font-30, .font-30 * { font-size:1.875rem }
.font-32, .font-32 * { font-size:2rem }
.font-35, .font-35 * { font-size:2.1875rem }
.font-36, .font-36 * { font-size:2.25rem }
.font-40, .font-40 * { font-size:2.5rem }
.font-42, .font-42 * { font-size:2.625rem }
.font-45, .font-45 * { font-size:2.8125rem }
.font-50, .font-50 * { font-size:3.125rem }
.font-52, .font-52 * { font-size:3.25rem }
.font-55, .font-55 * { font-size:3.437rem }
.font-60, .font-60 * { font-size:3.75rem }
.font-62, .font-62 * { font-size:3.875rem }
.font-70, .font-70 * { font-size:4.375rem }
.font-80, .font-80 * { font-size:5rem }
.font-90, .font-90 * { font-size:4.375rem }
.font-100, .font-100 * { font-size:6.25rem }
.font-120, .font-120 * { font-size:7.5rem }
.font-200, .font-200 * { font-size: 12.5rem }

/* Line heights */
.line-height13 { line-height:1.3rem }
.line-height14 { line-height:1.4rem }
.line-height15 { line-height:1.5rem }
.line-height2  { line-height:2rem }
.line-height3  { line-height:3rem }
.line-height4  { line-height:4rem }
.line-height-1 { line-height:1 }
.line-100 { line-height:6.25rem }
.line-20, .line-20 * { line-height:1.25rem }
.line-22, .line-22 * { line-height:1.375rem }
.line-24, .line-24 * { line-height:1.5rem }
.line-25, .line-25 * { line-height:1.5625rem }
.line-27, .line-27 * { line-height:1.6875rem }
.line-30, .line-30 * { line-height:1.875rem }
.line-35, .line-35 * { line-height:2.1875rem }
.line-40, .line-40 * { line-height:2.5rem }
.line-45, .line-45 * { line-height:2.8125rem }
.line-50, .line-50 * { line-height:3.125rem }
.line-60, .line-60 * { line-height:3.75rem }
.line-70, .line-70 * { line-height:4.375rem }
.line-80, .line-80 * { line-height:4.8rem }

/* Spacing */
.mb-0 { margin-bottom:0 }
.mt-130 { margin-top:8.125rem }
.py-75  { padding-top:4.6875rem; padding-bottom:4.6875rem }
.px-75  { padding-right:4.6875rem; padding-left:4.6875rem }
.py-100 { padding-top:6.25rem; padding-bottom:6.25rem }
.pt-100 { padding-top:6.25rem }
.px-100 { padding-right:6.25rem; padding-left:6.25rem }
.pl-100 { padding-left:6.25rem }
.py-60 { padding-top:3.75rem; padding-bottom:3.75rem }
.px-60 { padding-right:3.75rem; padding-left:3.75rem }
/* Flex */
.flex-row {
    display: flex !important;
    justify-content: center;
    flex-direction: row;
    align-content: center;
    align-items: center;
}
.flex-column {
    display: flex !important;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.flex0 { flex: 0 0 auto; }
.flex1 { flex: 1; }
.ai-fs  { align-items:flex-start }
.ai-fe  { align-items:flex-end }
.ai-c   { align-items:center }
.ai-initial { align-items:initial }
.ac-sb  { align-content:space-between }
.ac-fs  { align-content:flex-start }
.jc-c   { justify-content: center }
.jc-fe  { justify-content: flex-end }
.jc-fs  { justify-content: flex-start !important }
.jc-sb  { justify-content: space-between !important }
.jc-sa  { justify-content: space-around !important }
.fd-c   { flex-direction:column }
.gap-5   { gap:0.3125rem }
.gap-10  { gap:0.725rem }
.gap-15  { gap:0.9375rem }
.gap-20  { gap:1.25rem }
.gap-25  { gap:1.5625rem }
.gap-30  { gap:1.875rem }
.gap-40  { gap:2.5rem }
.gap-50  { gap:3.125rem }
.gap-75  { gap:4.6875rem }
.gap-100 { gap:6.250rem }

.row-gap-20  { row-gap:1.25rem}
.row-gap-50  { row-gap:3.125rem }

.mx_1100
{
	max-width:1000px;
	margin:0 auto
}
/* Z-index */
.z-5   { z-index:5 }
.z-50  { z-index:50 }
.z-70  { z-index:70 }
.z-100 { z-index:100 }
.br-40{border-radius:40px;}

.opacity-70{opacity:70%}
/* Colors */
.color_0 , .color_0 *{color:var(--red-color)}
.color_0_mix, .color_0_mix * {color: color-mix(in srgb, var(--red-color) , black 20%);}
.color_1 , .color_1 *{color:var(--dark-red-color)}
.color_l , .color_l *{color:var(--cream_l-color)}

/* Borders */
.box_shadow_1{box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.06);}
/* Backgrounds */
.bg_white{background:#FFF}
.bg_l{background:var(--cream_l-color)}
.bg_m{background:var(--cream_m-color)}
.bg_0_mix{background:color-mix(in srgb, var(--red-color) , black 20%);}
.catering_bg{background:url('../img/catering_bg.png')no-repeat center center  / cover color-mix(in srgb, var(--red-color) , black 20%);}
.bg_dar_red{background:var(--dark-red-color)}


.w-100{width:100%}
/* Height */

.desc p
{
	margin-bottom:1rem;
}
.desc p:last-child
{
	margin-bottom:0
}
.desc ol  , .desc ul 
{
   padding-left:20px;
   margin-top:1rem;
   margin-bottom:1rem;
}
.desc ol li
{
    display: list-item;
    list-style: numeric;
}
.desc ul li
{
    display: list-item;
    list-style:disc;
}
.desc h2 , .desc h3 , .desc h4 , .desc h5 , .desc h6
{
	font-size:1.875rem;
	font-weight:700;
	margin-bottom:1rem;
}


.button-link a{ border:1px solid var(--red-color);background:var(--red-color);height:33px }
.button-link a:hover { color:#FFF;background:var(--dark-red-color);border-color:var(--dark-red-color)}
.button-link a:hover *{color:#FFF}

.button-link-1 a{ border:1px solid var(--dark-red-color);height:33px}
.button-link-1 a:hover { color: #FFF;background:var(--dark-red-color);border-color:var(--dark-red-color)}


.button-link-2 a{ background: color-mix(in srgb, black 20%, var(--red-color));}
.button-link-2 a:hover { color:#FFF;background:var(--dark-red-color);}


.letter_spacing_1{letter-spacing:15%;}
.letter_spacing_2{letter-spacing:17.5%;}
.d-inline-flex{display:inline-flex}
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
header
{
	background:var(--cream_l-color)
}
.stellarnav>ul>li>a
{
	padding:0
}
.stellarnav a:hover
{
	
}
footer
{
	background:var(--dark-red-color)
}
.footer_logo img
{
	max-width:255px;
}
.footer_address svg
{
    position: absolute;
    top: 5px;
    left: -30px;
    z-index: 5;
}
.footer_address_box
{
	max-width:190px;
}
.footer_first_box
{
	justify-content: space-between;
    display: flex;
    flex-direction: column;
}
.faq_box
{
	border-bottom:2px solid var(--dark-red-color)
}
.faq_box_title
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	cursor:pointer;
}
.faq_box_arrow
{
	flex-shrink:0;
	transition:transform .3s ease;
}
.faq_box.active .faq_box_arrow
{
	transform:rotate(180deg);
}
.faq_box_desc
{
	display:none;
}
.frame_box .bg_w_ba:nth-child(2n+2).bg_m
{
	background:var(--cream_l-color)
}
.frame_box .bg_w_ba:before , .frame_box .bg_w_ba:after
{
	content:"";
	position:absolute;
	top:15px;
	left:0;
	width:133px;
	height:301px;
	transform:rotate(180deg);
	background:url("../img/frame.svg") no-repeat right top / contain;
	pointer-events:none;
	opacity:0.5;
}
.frame_box .bg_w_ba:after
{
	transform:rotate(0);
	right:0;
	left:auto;
	background:url("../img/frame.svg") no-repeat right top / contain;
}
.frame_box .bg_w_ba:nth-child(2n+2):before , .frame_box .bg_w_ba:nth-child(2n+2):after 
{
	opacity:0.45;
}
.home_page .frame_box .bg_w_ba.catering_bg:after ,.home_page  .frame_box .bg_w_ba.catering_bg:before
{
	background:url("../img/frame_1.svg") no-repeat right top / contain;
	opacity:1;
	top:50%;
	transform:translateY(-50%);
}
.home_page  .frame_box .bg_w_ba.catering_bg:before
{
	background:url("../img/frame_1.svg") no-repeat right top / contain;
	opacity:1;
	top:50%;
	transform:translateY(-50%) rotate(180deg);
}
.frame_box .bg_w_ba > .container
{
	position:relative;
	z-index:1;
}
.locations_box_svg
{
	height:30px;
}
.home_locations .bg_hover:before
{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:10%;
	z-index:1;
	pointer-events:none;
	transition:opacity .5s ease-in-out;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.home_locations .h_vector
{
	z-index:2;
}
.home_locations:hover .bg_hover:before
{
	opacity:1;
}

.h_vector
{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:281px;
	height:46px;
	display:flex;
	justify-content:center;
	align-items:center
}
.banners_main .h_vector
{
    width: 162px;
    height: 26px;
    position: inherit;
    transform: translate(0);
}
.h_vector_svg
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.h_vector_svg path
{
	transition:fill .5s ease-in-out;
}
.h_vector_text
{
	position:relative;
	transition:color .5s ease-in-out;
}
.banners_main .vector_hover:hover .h_vector_svg path
{
	fill:var(--dark-red-color);
}
.banners_main .vector_hover:hover .h_vector .h_vector_text
{
	color:var(--cream_l-color);
}
.v_vector span
{
	width:281px;
	height:46px;
	background:url('../img/h_vector.svg') no-repeat center center;
	display:flex;
	justify-content:center;
	align-items:center	
}
.reviews_box
{
	max-width:923px;
	margin:0 auto;
	padding:0 80px;
}
.reviews_box:before , .reviews_box:after
{
	content:"";
	position:absolute;
	width:47px;
	height:35px;
	background-repeat:no-repeat;
	background-size:contain;
	pointer-events:none;
}
.reviews_box:before
{
	top:30px;
	left:0;
	background-image:url("../img/quote_1.svg");
}
.reviews_box:after
{
	bottom:30px;
	right:0;
	background-image:url("../img/quote_2.svg");
}

@media (max-width:767px)
{
	.reviews_box .reviews_swiper{ padding:0 }
	.reviews_box:before , .reviews_box:after{ }
}
/******************************************************************************/
/* OUR STORY TIMELINE (center line + dots) */
/******************************************************************************/
.our_story_timeline
{
	position:relative;
}
.our_story_timeline_track
{
	position:absolute;
	top:9px;
	bottom:0;
	left:50%;
	width:2px;
	margin-left:-1px;
	background:color-mix(in srgb, var(--red-color) , black 20%);
	opacity:0.2;
}
.our_story_timeline_line
{
	position:absolute;
	top:9px;
	bottom:0;
	left:50%;
	width:2px;
	margin-left:-1px;
	background:color-mix(in srgb, var(--red-color) , black 20%);
	transform-origin:top;
	transform:scaleY(0);
}
.our_story_item
{
	position:relative;
}
.our_story_item:before
{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	width:26px;
	height:26px;
	margin-left:-13px;
	border-radius:50%;
	background:color-mix(in srgb, var(--red-color) , black 20%);
	z-index:1;
	transform:scale(0);
	transition:transform .4s ease .2s;
}
.our_story_item.aos-animate:before
{
	transform:scale(1);
}
.our_story_timeline .our_story_item:nth-child(2n+2) .order_1
{
	order:2
}
.our_story_timeline .our_story_item:nth-child(2n+2) .order_2
{
	order:1
}



.box_parallax
{
	position:relative
}
.box_parallax_text
{
	position:relative;
	z-index:5;
	width:100%;
}
.box_parallax_img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;  	
}

.box_parallax_img:before
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.4); 	
}
.box_parallax_img .jarallax , .box_parallax_img .img-bg {
    width: 100%;
    height: 100%;
}
.box_parallax.story_parallax{min-height:400px;}

/* OUR STORY - fading background gallery */
.story_swiper,
.story_swiper .swiper-wrapper,
.story_swiper .swiper-slide
{
	width:100%;
	height:100%;
}
.story_swiper .swiper-slide .img-bg
{
	background-size:cover;
	background-position:center;
}

.reels-slider img.ww-100
{
	width:100%
}
.reels-slider svg
{
    position: absolute;
    top: 50%;
    left: 50%;
	transform:translate(-50%,-50%);
    z-index: 1;  	
}
.reels-slider .bg_hover:hover svg rect
{
	fill:var(--dark-red-color)
}
.mx-760
{
	max-width:760px;
	margin:0 auto
}
.home_facts .colw-20
{
	max-width:230px
}
/* HOME FACTS - white divider between columns (sits on the boundary between equal flex slots) */
.home_facts
{
	position:relative;
}
.fact_box:not(:last-child):after
{
	content:"";
	position:absolute;
	top:50%;
	left:calc(100% / var(--n) * var(--i));
	width:1px;
	height:40px;
	transform:translateY(-50%);
	background:#fff;
}

/* HOME REVIEWS - pagination bullets */
.reviews_pagination.swiper-pagination
{
	position:static;
	display:flex;
	justify-content:center;
	gap:10px;
	margin-top:10px;
}
.reviews_pagination .swiper-pagination-bullet
{
	width:12px;
	height:12px;
	margin:0 !important;
	opacity:1;
	background:#F5E2C2;
	transition:background .3s ease;
}
.reviews_pagination .swiper-pagination-bullet-active
{
	background:#F0BEAD;
}


/******************************************************************************/
/* HOME / BANNER */
/******************************************************************************/
.banners_main, .banners_main_box { position: relative; height:710px;}
.banners_bg {
	height:100%; width:100%;
	background-size:cover;
	background-position: bottom center;
}

.banners_text {
	position:absolute;
	bottom:0; left:0;
	width:100%;
	height:100%;
	content:'';
	z-index:150;
}
.banners-slider .swiper-slide-active .slider-title   { animation: fadeInUp 1.5s;color:#FFF }
.banners-slider .swiper-slide-active .slider-sub-title { animation: fadeInUp 2.5s; }
.banners-slider .swiper-slide-active .slider-button-home  { animation: fadeInUp 3.5s; }
.banners_main .swiper-pagination{bottom:25px !important;}
.banners_main .swiper-pagination-bullet {
	width:40px; height:2px;
	background:#FFF;
	border:0;
	margin:0 10px !important;
	opacity:1;
	
}
.banners_main .swiper-pagination-bullet i { opacity:0; transition:all 0.5s ease-in-out; display:none; }
.banners_main .swiper-pagination-bullet.swiper-pagination-bullet-active { background:var(--red-color); }
.banners_main .swiper-pagination-bullet.swiper-pagination-bullet-active i { opacity:0; display:none; }
.banners_main .swiper-button-next:after, .banners_main .swiper-button-prev:after { display:none }
.banners_main .swiper-button-next,
.banners_main .swiper-button-prev,
.banners_main .swiper-button-next img,
.banners_main .swiper-button-prev img { width:145px; }
.banners_main .swiper-button-next { right:80px; top:50%; }
.banners_main .swiper-button-prev { left:80px; top:50%; }
.banners_desc p {
	background:rgba(49,72,99,0.6);
	padding:0.625rem 0.9375rem;
	border-radius:40px;
	margin-bottom:5px;
	display:block
}





/******************************************************************************/
/* MARQUEE (text_slider) - continuous CSS scroll, no Swiper */
/******************************************************************************/
.marquee-slider
{
	overflow:hidden;
	width:100%;
}
.marquee-track
{
	display:flex;
	width:max-content;
	animation:marquee-scroll 25s linear infinite;
}
.marquee-slider:hover .marquee-track
{
	animation-play-state:paused;
}
.marquee-group
{
	display:flex;
	flex-shrink:0;
	align-items:center;
}
.marquee-group .marquee_text
{
	white-space:nowrap;
	padding:0 25px;
	position:relative;
}
.marquee-group .marquee_text:after
{
	content:"-";
	position:absolute;
	right:-2px;
}
@keyframes marquee-scroll
{
	from { transform:translateX(0); }
	to   { transform:translateX(-50%); }
}
.menu_categories_listing
{
	gap:4.6875rem
}
.filter_shadow_1
{
	box-shadow:1px 14px 24px rgba(0, 0, 0, 0.12);
}

/******************************************************************************/
/* IMAGE HOVER */
/******************************************************************************/
@media (min-width: 768px) {
    .tt-gallery-item-inner {
        clip-path: inset(0 0 0 0);
        overflow: hidden;
        transition: clip-path 0.8s cubic-bezier(0.07, 0.72, 0.29, 0.96);
    }
    .tt-gallery-item:hover .tt-gallery-item-inner { clip-path: inset(3% 3% 3% 3%); }
}
.stellarnav.mobile{position:relative}
.stellarnav .menu-toggle span.bars span {width: 32px;height: 5px;background:var(--green-color)}
.stellarnav.mobile li{display:block}
.stellarnav.mobile li a{font-size:18px;}
.stellarnav .icon-close:after, .stellarnav .icon-close:before{width:20px;border-color:var(--green-color)}
.stellarnav .icon-close{width:20px;height:20px;}
.stellarnav.mobile ul {background: var(--cream_l-color);}
.stellarnav.mobile li a{color:var(--green-color)}


/******************************************************************************/
/* MENU PRODUCTS LIST - card hover + filter badges */
/******************************************************************************/
.menu_product_card
{
	transition:transform .35s ease, box-shadow .35s ease;
}
.menu_product_card:hover
{
	transform:translateY(-8px);
	box-shadow:1px 14px 24px rgba(0, 0, 0, 0.12);
}
.menu_product_card:hover .menu_product_arrow svg
{
	transform:translateX(4px);
}
.menu_product_arrow svg
{
	transition:transform .35s ease;
}
.product_filters_list
{
	gap:8px;
}
.product_filter_badge
{
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	border-radius:50%;
	flex-shrink:0;
}
.product_filter_badge img
{
	width:16px;
	height:16px;
	object-fit:contain;
}

/******************************************************************************/
/* PRODUCT POPUP (glightbox) */
/******************************************************************************/
.popup
{
	display:none;
}
.product_open
{
	cursor:pointer;
}
.product_popup_box
{
	position:relative;
}
.product_popup_close
{
	position:absolute;
	top:2.125rem;
	left:3.125rem;
	z-index:2;
	cursor:pointer;
	color:var(--dark-red-color);
	
}
.product_popup_close i
{
	font-size:24px;
}
.product_popup_filter_badge
{
	display:flex;
	align-items:center;
	gap:6px;
	padding:8px 16px;
	border-radius:30px;
	margin-right:10px;
}
.product_popup_filter_badge img
{
	width:16px;
	height:16px;
	object-fit:contain;
}
.product_popup_box
{
	min-height:555px;
}

/* Lets a tall "simple card" popup (product popup, catering quote form) scroll as a
   whole, instead of being silently cut off: GLightbox pins .glightbox-container and
   .gslider to exactly 100% of the viewport height with overflow:hidden, which is fine
   for a popup shorter than the screen but clips - with no way to scroll - anything
   taller. Scoped to .popup_scrollable/.product_popup_slide (added in custom.js only for
   these two popups) so it never touches an actual multi-slide GLightbox gallery
   elsewhere on the site. */
.product_popup_slide
{
	box-shadow:none !important;
	overflow:visible !important;
	max-height:none !important;
}
.glightbox-container.popup_scrollable,
.popup_scrollable .gslider
{
	overflow-y:auto !important;
}
.popup_scrollable .gslider
{
	align-items:flex-start !important;
}
.popup_scrollable .gslide
{
	position:relative !important;
	margin:auto 0;
	padding:40px 0;
}

/* Mobile: GLightbox has no built-in side/edge margin for an inline popup, so on a
   narrow screen the card can span edge-to-edge with nothing exposed to tap - the
   dark backdrop (.goverlay) is what the outside-click-to-close handler in custom.js
   listens on, and GLightbox's own closeOnOutsideClick is skipped on mobile regardless
   of its value (its own code checks for the glightbox-mobile class it adds to <body>),
   so without this gutter there would be no way to close the popup by tapping outside. */
@media (max-width:767px)
{
	.popup_scrollable .gslide-inline
	{
		max-width:calc(100% - 30px) !important;
		margin:20px auto !important;
	}
}

/******************************************************************************/
/* MENU CATEGORY FILTER PILLS */
/******************************************************************************/
.menu_category_filters
{
	gap:35px;
	justify-content: center;
}
.menu_category_pill
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:14px 26px;
	border-radius:30px;
	border:1px solid var(--dark-red-color);
	color:var(--dark-red-color);
	background:transparent;
	cursor:pointer;
	transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.menu_category_pill:hover
{
	background:rgba(114, 15, 32, 0.08);
}
.menu_category_pill.active
{
	background:var(--dark-red-color);
	border-color:var(--dark-red-color);
	color:var(--cream_l-color);
}
.menu_category_pill.active:hover
{
	background:var(--dark-red-color);
}

/* MENU CATEGORY FILTERING - smooth crossfade when switching category */
.menu_categories_wrap
{
	transition:opacity .3s ease;
}
.menu_categories_wrap.is_filtering
{
	opacity:0;
}

/******************************************************************************/
/* MENU FILTERS BUTTON (placeholder - design to follow) */
/******************************************************************************/
.menu_filters_btn
{
	--filter-green-color:#39B54A;
	gap:8px;
	padding:14px 26px;
	border-radius:30px;
	border:1px solid var(--dark-red-color);
	color:var(--dark-red-color);
	background:transparent;
	cursor:pointer;
	transition:background .3s ease, color .3s ease;
}
.menu_filters_btn:hover
{
	background:var(--dark-red-color);
	color:var(--cream_l-color);
}
.menu_filters_btn:hover span{color:var(--cream_l-color);}
.menu_filters_btn:hover svg path
{

	stroke:var(--cream_l-color);
}
/******************************************************************************/
/* MENU FILTERS PANEL (dropdown under the Filters button) */
/******************************************************************************/
.menu_filters_panel
{
	position:absolute;
	top:calc(100% + 15px);
	right:0;
	width:260px;
	background:var(--cream_l-color);
	border:1px solid var(--dark-red-color);
	border-radius:20px;
	padding:25px 15px 10px 15px;
	box-shadow:0 10px 30px rgba(0,0,0,0.08);
	z-index:20;
	opacity:0;
	visibility:hidden;
	transform:translateY(10px);
	transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.menu_filters_wrap.active .menu_filters_panel
{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.menu_filters_panel_item
{
	gap:12px;
	cursor:pointer;
	padding:8px 0;
}
.menu_filters_checkbox
{
	position:absolute;
	opacity:0;
	width:0;
	height:0;
}
.menu_filters_panel_box
{
	position:relative;
	flex-shrink:0;
	width:20px;
	height:20px;
	border:1px solid var(--dark-red-color);
	border-radius:5px;
	transition:background .2s ease;
}
.menu_filters_panel_box:after
{
	content:"";
	position:absolute;
	display:none;
	left:6px;
	top:2px;
	width:5px;
	height:10px;
	border:solid var(--cream_l-color);
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
}
.menu_filters_checkbox:checked ~ .menu_filters_panel_box
{
	background:var(--dark-red-color);
}
.menu_filters_checkbox:checked ~ .menu_filters_panel_box:after
{
	display:block;
}
.menu_filters_panel_actions
{
	margin-top:5px;
}
.menu_filters_apply
{
	padding: 12px 30px;
    border-radius: 5px;
    background: var(--red-color);
    color: var(--cream_l-color);
    cursor: pointer;
    transition: opacity .2s ease;
}
.menu_filters_apply:hover
{
	opacity:0.85;
}
.menu_filters_reset
{
	cursor:pointer;
	color:var(--dark-red-color);
}

/* MENU HEADER ROW - title stays centered on the row regardless of the controls' width */
.menu_header_row
{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:20px;
}
.menu_header_controls
{
	justify-self:end;
	gap:15px;
}

/* Categories dropdown (mobile only - see breakpoint below): same chrome as the
   Filters dropdown, reusing .menu_filters_btn/.menu_filters_panel so both controls
   match exactly. Hidden above the breakpoint; the plain pill row below the header
   is what desktop shows instead. */
.menu_category_filters_wrap
{
	display:none;
}
.menu_category_filters_wrap.active .menu_category_filters_panel
{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.menu_category_filters_panel .menu_category_filters
{
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
}
.menu_category_filters_panel .menu_category_pill
{
	width:100%;
}

@media (max-width:878px)
{
	.menu_header_row
	{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:15px;
	}
	.menu_header_row > span
	{
		display:none;
	}
	.menu_header_controls
	{
		justify-self:auto;
	}
	.menu_category_filters_wrap
	{
		display:block;
	}
	.menu_category_filters_row
	{
		display:none;
	}
	/* The dropdown panels are wider than their own toggle button, and the toggles no
	   longer sit at the right edge of the page (they're centered under the title), so
	   right:0 from the desktop layout pushes the panel off the left of the screen.
	   Center each panel under its own toggle instead, and clamp its width so it never
	   overflows a narrow viewport. */
	.menu_filters_panel
	{
		left:50%;
		right:auto;
		transform:translate(-50%, 10px);
		width:min(260px, calc(100vw - 40px));
	}
	.menu_filters_wrap.active .menu_filters_panel,
	.menu_category_filters_wrap.active .menu_category_filters_panel
	{
		transform:translate(-50%, 0);
	}
}






/******************************************************************************/
/* MEDIA QUERIES */
/******************************************************************************/


/*m*/
@media all and (max-width: 1035px){
	.d-none-m{display:none !important}
	.mt-25-m { margin-top:1.5625rem }
	.stellarnav .gap-100{gap:3.125rem}
	.banners_main, .banners_main_box{height:500px}
}
/*xm*/
@media all and (max-width: 878px){
  .flex-row-xm { flex-direction: inherit; flex-wrap: wrap; }
  .flex-row-xm > div { width:33.33% }
  .flex-row-xm div:first-child { width:100%; align-items:center; display:flex; justify-content:center; }
  .flex-row-xm div .appointment_box { width:270px }
  .mt-25-xm { margin-top:1.5625rem }
  .mb-25-xm { margin-bottom:1.5625rem }
  .mt-50-xm { margin-top:3.125rem }
  .mb-50-xm { margin-bottom:3.125rem }
  .ai-fs-xm { align-items:flex-start }
  .ai-c-xm  { align-items:center }
  .txt-cntr-xm { text-align:center }
  .pb-25-xm { padding-bottom:1.5625rem }
  .py-25-xm { padding-bottom:1.5625rem; padding-top:1.5625rem }
  .py-50-xm { padding-bottom:3.125rem; padding-top:3.125rem }
  .d-none-xm { display:none !important }
  .jc-c-xm  { justify-content:center }
  .pl-0-xm  { padding-left:0 }
  .order-2-xm { order:2 }
  .order-1-xm { order:1 }
  .pt-50-xm { padding-top:3.125rem }
  .footer_address svg{left:0}
  .footer_address_box.relative{padding-left:30px;}
}

@media (max-width: 777px) {
	.footer_first_box{width:100%;margin-bottom:1.5625rem}
	.reviews_box:before{top:-30px}
	.reviews_box:after{bottom:-30px;}
}

@media (max-width: 600px) {
	.contact_boxes_all{flex-direction: column;gap: 25px;}
	.with_social{width:100%;margin-top:1.5625rem}
	.frame_box .bg_w_ba:before, .frame_box .bg_w_ba:after {width: 84px;height: 195px;}
	.p_main_img img{width:100%}
	.menu_category_section .colw-33{width:100%}
	.home_locations_main .colw-48{width:100%;margin-bottom:1.5625rem}
	.reviews_box {padding: 0px 20px;}
	.stellarnav .menu-toggle{padding:0}
	.stellarnav .menu-toggle span.bars{margin-right:0}
	.stellarnav .menu-toggle span.bars span{width:5px;}
	
}

/*s Mobile */
@media (max-width: 480px) {
  html, body { font-size:16px }
  .flex-row-s { flex-direction:column }
  .ai-fs-s { align-items:flex-start }
  .ai-c-s  { align-items:center }
  .mt-25-s { margin-top:1.5625rem }
  .pt-25-s { padding-top:1.5625rem }
  .py-25-s { padding-top:1.5625rem; padding-bottom:1.5625rem }
  .pb-25-s { padding-bottom:1.5625rem }
  .mb-25-s { margin-bottom:1.5625rem }
  .ml-25-s { margin-left:1.5625rem }
  .mt-50-s { margin-top:3.125rem }
  .pt-50-s { padding-top:3.125rem }
  .d-none-s { display:none !important }
  .pl-0-s  { padding-left:0 }
  .ml-0-s  { margin-left:0 }
  .mt-15-s{margin-top:0.9375rem}
  .txt-cntr-s { text-align:center }
  .txt-cntr-s img { display:inline-block }
  .px-25-s { padding-right:1.5625rem; padding-left:1.5625rem }
  .mt-0-s  { margin-top:0 }
  .pb-50-s { padding-bottom:3.125rem }
  .mb-50-s { margin-bottom:3.125rem }
  .py-0-s  { padding:0 }
  .px-0-s  { padding-left:0; padding-right:0 }
  .mt-20-s { margin-top:1.25rem }
  .pt-0-s  { padding-top:0 }
  .pb-0-s  { padding-bottom:0 }
  .pr-0-s  { padding-right:5px !important }
  .py-50-s { padding-top:3.125rem; padding-bottom:3.125rem }
  .ml-20-s { margin-left:20px }
  .w-50-s  { width:50% }
  .w-100-s { width:100% }
  .jc-c-s  { justify-content:center !important }
  .jc-fs-s { justify-content:flex-start !important }
  .jc-fe-s { justify-content:flex-end }
  .jc-sb-s { justify-content:space-between !important }
  .order-1-s { order:1 }
  .order-2-s { order:2 }
  .mb-40-s { margin-bottom:2.5rem }
  .mb-20-s { margin-bottom:1.25rem }
  .mt-5-s  { margin-top:0.3125rem }
  .order_1_s{order:1}
  .order_2_s{order:2}
  /* Spacing */
	.our_story_timeline .our_story_item:nth-child(2n+2) .order_2 {order: 2;}
	.our_story_item:before{top:-35px;}
	.our_story_timeline_line{opacity:0.1}
	.box_parallax.story_parallax{min-height:300px;}
	.fact_box:not(:last-child):after{display:none}
	.header_logo img{max-width:150px;}
}





/******************************************************************************/
/* SCROLL TO TOP BUTTON */
/******************************************************************************/
.scroll_top
{
	position:fixed;
	right:30px;
	bottom:30px;
	width:45px;
	height:45px;
	z-index:99;
	cursor:pointer;
	opacity:0;
	visibility:hidden;
	transform:translateY(15px);
	transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.scroll_top.show
{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.scroll_top:hover
{
	transform:translateY(-5px);
}
@media (max-width:767px)
{
	.scroll_top
	{
		right:15px;
		bottom:15px;
		width:38px;
		height:38px;
	}
}

/******************************************************************************/
/* HEADER BURGER (custom toggle for the stellarnav mobile menu, <=768px) */
/******************************************************************************/
.header_burger
{
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:6px;
	width:30px;
	cursor:pointer;
}
.header_burger span
{
	display:block;
	width:100%;
	height:3px;
	border-radius:2px;
	background:var(--dark-red-color);
}
@media (max-width:768px)
{
	.header_burger
	{
		display:flex;
	}
}

/******************************************************************************/
/* HOME PAGE LOADER */
/******************************************************************************/
html.is-loading, html.is-loading body
{
	overflow:hidden;
}
.page_loader
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--dark-red-color);
	opacity:1;
	visibility:visible;
	transition:opacity .6s ease, visibility .6s;
}
.page_loader.loaded
{
	opacity:0;
	visibility:hidden;
}
.page_loader_badge
{
	position:relative;
	width:180px;
	animation:page_loader_pulse 1.4s ease-in-out infinite;
}
.page_loader_svg
{
	width:100%;
	height:auto;
	display:block;
}
.page_loader_text
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--dark-red-color);
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:700;
	font-size:13px;
}
@keyframes page_loader_pulse
{
	0%, 100% { transform:scale(1); opacity:1; }
	50% { transform:scale(1.15); opacity:0.6; }
}

/******************************************************************************/
/* FRONT-END FORMS (catering quote, and any future front form) */
/******************************************************************************/
.form-control
{
	width:100%;
	padding:14px 16px;
	border:1px solid #E5DFD3;
	border-radius:10px;
	
	font-size:14px;
	color:var(--dark-red-color);
	transition:border-color .2s ease;
}
.form-control::placeholder
{
	color:#A9A398;
}
.form-control:focus
{
	outline:none;
	border-color:var(--dark-red-color);
}
select.form-control
{
	cursor:pointer;
}
.quote_required
{
	color:var(--red-color);
}

/* CATERING QUOTE POPUP */
.quote_popup_box
{
	position:relative;
}
.quote_popup_close
{
	position:absolute;
	top:2.125rem;
	right:3.125rem;
	z-index:2;
	cursor:pointer;
	color:var(--dark-red-color);
}
.quote_popup_close i
{
	font-size:24px;
}
.quote_popup_subtitle
{
	color:#8A8276;
}
.quote_optional
{
	color:#A9A398;
	font-weight:400;
	text-transform:none;
	letter-spacing:0;
}

/* an icon sitting inside the left edge of a field - wrap the icon + input/select
   together and give the control left padding to clear it */
.quote_field_icon
{
	position:relative;
}
.quote_field_icon > i
{
	position:absolute;
	top:50%;
	left:16px;
	transform:translateY(-50%);
	color:#A9A398;
	font-size:15px;
	pointer-events:none;
}
.quote_field_icon .form-control
{
	padding-left:44px;
}

/* Pickup / Delivery - two equal-width toggle buttons built from a pair of radios, each
   wrapping label is the clickable/tappable target; :has() drives the selected look so
   no JS is needed to keep it in sync. */
.quote_fulfillment_option
{
	flex:1 1 0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	padding:14px 10px;
	border:1px solid #E5DFD3;
	border-radius:10px;
	cursor:pointer;
	transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.quote_fulfillment_option , .quote_fulfillment_option *
{
	color:#A9A398;
}
.quote_fulfillment_option input
{
	position:absolute;
	opacity:0;
	width:0;
	height:0;
}
.quote_fulfillment_option:has(input:checked)
{
	background:color-mix(in srgb, var(--red-color) 10%, var(--cream_l-color));
	border-color:var(--dark-red-color);
}
.quote_fulfillment_option:has(input:checked) , .quote_fulfillment_option:has(input:checked) *
{
	color:var(--dark-red-color);
}
.quote_popup_hint
{
	color:#A9A398;
}
.quote_submit_btn
{
	width:100%;
	padding:16px;
	border:none;
	border-radius:30px;
	background:var(--dark-red-color);
	gap:10px;
	cursor:pointer;
	transition:opacity .2s ease;
}
.quote_submit_btn , .quote_submit_btn *
{
	color:#fff;
}
.quote_submit_btn:hover
{
	opacity:0.9;
}
.quote_submit_btn:disabled
{
	opacity:0.6;
	cursor:not-allowed;
}
/* ajax forms (same pattern as the casle project's jquery.form.validate.js): while the
   request runs the submit button is disabled and shows a spinner next to its label. The
   spinner takes the button's own text colour, so it's visible on both light and dark
   buttons. Scoped to .site-form so any future front-end form gets it too, not just the
   catering quote form. */
.site-form button[type=submit].is-loading,
.site-form button[type=submit].is-loading:disabled
{
	cursor:wait;
	opacity:0.85;
}
.site-form button[type=submit].is-loading::after
{
	content:'';
	display:inline-block;
	width:16px;
	height:16px;
	margin-inline-start:10px;
	vertical-align:middle;
	border:2px solid currentColor;
	border-top-color:transparent;
	border-radius:50%;
	animation:form-btn-spin .7s linear infinite;
}
@keyframes form-btn-spin
{
	to { transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce)
{
	.site-form button[type=submit].is-loading::after { animation-duration:1.8s; }
}
