* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-padding-start:0px;
	margin: 0px;
	padding: 0px;
	max-width: 100%;
    box-sizing: border-box;
}

*:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* resets */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0px;
	padding: 0px;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing:antialiased;
	-webkit-overflow-scrolling:touch;
	font-family: "Signika", Verdana, Arial, sans-serif;
}

body {
	background-color: #FAF6ED;
}

/* Make sure the anchor links stop where they are supposed to */
html {
	scroll-padding-top: 170px;
}

.alert-warning, .alert-info {
  background-color: #88dedd;
  border-color: #0cb4cf;
  color: #0170c9;
}

#map {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

#map h5 {
  font-weight: bold;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

#map .col-lg-12,
#map .col-lg-6,
#map .col-lg-4 {
  position: relative;
}

#map .map-wrapper > div {
  position: static !important;
}

.map-wrapper {
  position: relative;
  height: 400px;
  overflow: hidden;
  padding: 0;
}

.map-popup {
  min-width: 300px;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.4;
}

.pointer {
	cursor: pointer !important;
}

.mt-150 {
	margin-top: 150px;
}

.min-height-150 {
	min-height: 150px;
}

.cart-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* COLORS */
.v-yellow-bg {
	background: #FFCC00;
}

.v-blue-bg {
	background: #00247D;
}

.v-red-txt {
	color: #00247D;
}

.v-red-bg {
	background: #CF142B;
}

.aqua-text {
	color: #14CFB8;
}

.am-red-bg {
	background: #B31942;
}

.am-blue-bg {
	background: #0A3161;
}

.navbar-toggler {
    border: 1px solid white !important;
    outline: none !important;
    color: #00247D !important;
}

.navbar-toggler:focus, 
.navbar-toggler:active {
    border: 2px solid #00247D !important;
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.8) !important;
}

/* Change the color of the three bars */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%2300247D'%3E%3Cpath stroke='rgba(0,36,125,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Initial header styling */
.navbar {
	transition: all 0.3s ease-in-out;
	padding: 20px 0;
	min-height: 97px;
	color: #ffffff;
	background-color: #ffffff;
}

/* Shrink Effect */
.navbar.shrink {
	padding: 10px 0;
}

/* Logo Styling */
.navbar-brand img {
	height: 90px;
	transition: height 0.3s ease-in-out;
}

.navbar.shrink .navbar-brand img {
	height: 50px; /* Shrunk logo */
}

/* Address Styling */
.navbar .nav-address {
	font-size: 1.2rem;
	color: #00247D;
	transition: font-size 0.3s ease-in-out;
}

.navbar.shrink .nav-address {
	font-size: 0.9rem; /* Shrinks on scroll */
}

/* Icon Size */
.nav-icons {
	font-size: 1.5rem;
	transition: font-size 0.3s ease-in-out;
}

.navbar.shrink .nav-icons {
	font-size: 1.3rem;
}

/* Order Button */
.btn-order {
	background-color: #ffffff;
	color: #4d4d4d;
	border: 2px solid #4d4d4d;
	transition: all 0.3s ease-in-out;
}

.btn-order:hover {
	background-color: #ffdb80;
	color: #302a1d;
	border-radius: 2px solid #302a1d;
}

.navbar.shrink .btn-order {
	transform: scale(0.9);
}

.hero-section-bg {
	background-color: #00247D;
}

.hero-section {
    position: relative;
    background: url('/assets/images/home-page-splatter.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100vh;
}

@supports (-webkit-touch-callout: none) {
    .hero-section {
        background-attachment: scroll; /* Fix for iOS */
    }
}

.gluten-free-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 15px 15px;
    font-weight: bold;
    font-size: 1.2rem;
    white-space: nowrap;
    width: auto;
    max-width: none;
    text-align: center;
    background-color: #800020;
	color: rgba(255, 255, 255, 1.0);
}

.gluten-free-badge:hover {
	background-color: rgba(254, 101, 85, 0.7);
	color: rgba(255, 255, 255, 1.0);
}

/* Mobile Fix: Adjusts height & background scaling */
@media (max-width: 768px) {
    .hero-section {
       	width: 100%;
        background-position: center center;
    }
}

/* Ensure Content Stays Above the Overlay */
.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section .welcome-text {
  	font-optical-sizing: auto;
  	font-weight: 300;
  	font-style: normal;
  	font-variation-settings: "GRAD" 0;
	font-size: 190px;
	letter-spacing: 10px;
	line-height: 1;
	color: #FFD700;
	text-transform: uppercase;
}

.hero-section h1 {
	font-size: 75px;
	font-weight: 300;
	letter-spacing: 10px;
	line-height: 1;
	color: #ffffff;
	text-transform: uppercase;
}

.welcome-text-h2 {
	font-optical-sizing: auto;
  	font-weight: 300;
  	font-style: normal;
  	font-variation-settings: "GRAD" 0;
	font-size: 75px;
	letter-spacing: 10px;
	line-height: 1;
	color: #FFD700;
	text-transform: uppercase;
}

.home-menu-btn {
	background-color: #800020;
	color: rgba(255, 255, 255, 1.0);
}

.home-menu-btn:hover {
	background-color: rgba(128, 0, 32, 0.7);
	color: rgba(255, 255, 255, 1.0);
}

.home-catering-btn {
	background-color: #800020;
	color: rgba(255, 255, 255, 1.0);
}

.home-catering-btn:hover {
	background-color: rgba(128, 0, 32, 0.7);
	color: rgba(255, 255, 255, 1.0);
}

.sub-menu {
    width: 100%;
    position: relative;
    transition: all 0.3s ease-in-out;
    z-index: 999;
    background: rgba(0, 36, 125, 1.0);
}

.sub-menu.navbar {
	min-height: 40px;
}

/* Shrinking Effect */
.sub-menu.sticky {
    position: fixed;
    top: 96px;
    left: 0;
    width: 100%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
    padding: 10px 0;
    background: rgba(0, 36, 125, 0.97);
}

.sub-menu a, .sub-menu a:link {
	color: rgba(255, 215, 0, 1.0);
}

.sub-menu a:hover, .sub-menu a:link:hover {
	color: rgba(255, 255, 255, 1.0);
}

.sub-menu a:not(:first-child), .sub-menu a:link:not(:first-child) {
	padding-left: 10px;
}

/* Shrink the Font Size in Sticky Mode */
.sub-menu.sticky .navbar-nav {
    font-size: 0.9rem; /* Make the text smaller */
    transition: font-size 0.3s ease-in-out;
}

.sub-menu.sticky .fs-5 {
	font-size: 1.10rem !important;
}

.sub-menu .nav-link.active {
	color: rgba(255, 255, 255, 1.0);
}

.section-header {
	color: #00247D;
	font-size: 28px;
	line-height: 32px;
}

.card-title {
	color: #00247D;
	font-size: 16px;
	line-height: 22px;
}

.card-price {
	color: #00247D;
	font-size: 16px;
}

.btn-add-to-order {
	color: rgba(255, 255, 255, 1.0);
	background-color: rgba(128, 0, 32, 1.0);
	border-radius: 0;
	text-align: center; 
}

.btn-add-to-order:hover {
	background-color: rgba(128, 0, 32, 0.7);
	color: rgba(255, 255, 255, 1.0);
	text-align: center; 
}

.card img {
	aspect-ratio: 1/1;
	object-fit: cover;
}

.marketing-section-header {
	font-size: 28px;
	line-height: 38px;
	color: #00247D;
}

#footer {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
	font-size: 14px;
	background-color: #0033A0;
	color: #ffffff;
}

#footer a, #footer a:link {
	color: #302a1d;
	text-decoration: none;
}

#footer a:hover, #footer a:link:hover {
	text-decoration: underline;
}

.footer_header {
	font-weight: 700;
	font-size: 50px;
	letter-spacing: 4px;
	text-align: left;
	text-transform: uppercase;
	line-height: 70px;
	color: #ffffff;
}

.under_footer_header {
	font-weight: 400px;
	font-size: 20px;
	text-align: left;
	word-wrap: break-word;
	line-height: 26px;
	color: #ffffff;
}

.under_footer_header a {
	font-weight: 400px !important;
	font-size: 20px !important;
	text-align: left !important;
	word-wrap: break-word !important;
	line-height: 26px !important;
	color: #ffffff !important;
}

.under_footer_header a:hover {
	text-decoration: underline;
}

.list-group-item, .list-group-item a, .list-group-item a:link, .list-group-item i {
	border: none !important;
	background-color: #0033A0;
	color: #ffffff;
	font-size: 26px;
	line-height: 26px;
}

.list-group-item a:hover, .list-group-item a:link:hover, .list-group-item i:hover {
	color:  #FFCC00;
}

#under_footer {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 14px;
	background-color: #00247D;
	color: #ffffff;
	text-align: center;
}

#under_footer a, #under_footer a:link {
	color: #ffffff;
	text-decoration: none;
}

#under_footer a:hover, #under_footer a:link:hover {
	text-decoration: underline;
}

.badge {
    font-size: 12px; 
    padding: 4px 7px; 
}

/* Adjust font size for small screens (mobile) */
@media (max-width: 576px) {
    .hero-section h1 {
        font-size: 24px;
    }
    
    .hero-section .welcome-text {
    	/* padding-top: 25px; */
		font-size: 95px;
		letter-spacing: 10px;
	}
	
	.footer_header {
		font-size: 30px;
		line-height: 50px;
	}
	
	.under_footer_header {
		font-size: 16px;
		line-height: 22px;
	}
}

/* Adjust for lg screens */
@media (max-width: 992px) {
    .hero-section h1 {
        font-size: 36px;
    }
    
    .hero-section .welcome-text {
    	/* padding-top: 25px; */
		font-size: 136px;
		letter-spacing: 10px;
	}
	
	.welcome-text-h2 {
		font-size: 36px;
	}
}

/* Adjust for medium screen */
@media (max-width: 768px) {
	 .hero-section {
    	padding-top: 120px;
    	padding-bottom: 80px;
    	min-height: auto;
  	}

  	.hero-section h1 {
    	font-size: 24px;
  	}
    
    .hero-section .welcome-text {
    	/* padding-top: 25px */;
		font-size: 95px;
		letter-spacing: 10px;
	}
	
	.welcome-text-h2 {
		font-size: 24px;
	}
	
	.mt-150 {
		margin-top: 120px;
	}
}

@media only screen and (max-device-width: 812px) and (orientation: landscape) {
	.hero-section {
    	padding-top: 320px;
    	padding-bottom: 50px;
    	padding-bottom: 80px;
    	min-height: auto;
  	}
  	
  	.gluten-free-badge {
		position: absolute;
		bottom: 120px;
		right: 20px;
	}
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) {
	.hero-section {
    	padding-top: 320px;
    	padding-bottom: 50px;
    	padding-bottom: 80px;
    	min-height: auto;
  	}
}