html,
body {
	height: 100%; /* Ensures they take full viewport height */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column; /* Stack elements vertically */
}

.content {
	flex: 1; /* Takes up all available space, pushing the footer down */
	/* Ensure this div exists and wraps your main page content */
}

.hidden {
	display: none;
}

.visible {
	display: inline; /* or however you want to style it */
}
alert {
	padding: 10px;
	background-color: #f44336; /* Red */
	color: white;
}

.alert-danger {
	background-color: #e57373; /* Light Red */
	background-image: url("/assets/img/icons/error.png");
	background-repeat: no-repeat;
	background-size: 24px 24px;
	background-position: 10px center; /* Adjust according to your needs */
	padding-left: 44px; /* Adjust padding to ensure text does not overlap the icon */
}

.alert-success {
	background-color: #4caf50; /* Green */
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

/* Pagination for Gallery */
.pagination {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}

.pagination a {
	padding: 10px 15px;
	margin: 5px;
	text-decoration: none;
	background: #007bff;
	color: white;
	border-radius: 5px;
}

.pagination a:hover {
	background: #0056b3;
}

.pagination span {
	padding: 10px;
	font-weight: bold;
	font-size: 12px;
}
/* End Pagination for Gallery */

/* Mobile Menu */
/* Hamburger Menu Icon */
.hamburger-menu {
	display: none;
	flex-direction: column;
	cursor: pointer;
	margin-right: 20px;
	position: absolute;
	left: 5%;
	top: 71%;
	z-index: 1001;
}

.hamburger-menu .bar {
	width: 30px;
	height: 4px;
	background-color: white;
	margin: 5px 0;
	border-radius: 2px;
	transition: all 0.3s ease-in-out;
}

/* Mobile Navigation Menu */
.mobile-nav-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: rgba(0, 153, 255, 0.95);
	width: 200px;
	border-radius: 10px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
	flex-direction: column;
	text-align: center;
	z-index: 10000 !important;
}

.mobile-nav-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav-menu ul li {
	padding: 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-nav-menu ul li:last-child {
	border-bottom: none;
}

.mobile-nav-menu ul li a {
	text-decoration: none;
	color: white;
	font-size: 1.2rem;
	display: block;
}

/* Show Menu when Active */
.mobile-nav-menu.active {
	display: flex;
}

/* Animate Hamburger Icon */
.hamburger-menu.active .bar:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active .bar:nth-child(2) {
	opacity: 0;
}

.hamburger-menu.active .bar:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* /Mobile Menu */

/* Custom CSS */
.header-container {
	position: fixed;
	width: 100%;
	min-height: 200px; /* This can be adjusted based on the logo size */
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0; /* Padding to keep contents from touching the edges */
	background: #2f80ed url("/assets/img/grass.png") repeat-x bottom center; /* Adding back the background color and image */
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); /* Ensuring shadow is included */
	box-sizing: border-box; /* Include padding in the height calculation */
	margin: 0;
	z-index: 1; /* Ensuring proper stacking */
}

.sub-header {
	display: flex;
	width: 100%;
	height: 60px;
	justify-content: center;
	align-items: flex-start; /* Align items from the start vertically */
	flex-shrink: 0;
	position: fixed;

	background: var(--DaveyBs-Primary-75, rgba(0, 153, 255, 0.75));
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	margin: 0%;
	margin-top: 280px;
	z-index: 0 !important; /* Ensure it is on top if needed, adjust based on your layout */
}

.sub-header-col {
	flex: 1; /* Each column takes up equal space */
	display: flex;
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	height: 60px;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); /* Subtle shadow for borders */
	border: 1px solid rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle border line between columns */
}
.sub-header-col-phone {
	flex: 1; /* Each column takes up equal space */
	display: flex;
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	height: 60px;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); /* Subtle shadow for borders */
	border: 1px solid rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle border line between columns */
	z-index: 1 !important;
}

.sub-header-col img {
	max-width: 100%; /* Ensures the image is responsive and does not overflow */
	max-height: 100%; /* Ensures the image fits within the column height */
	z-index: 2;
}
.title-line {
	display: inline-flex;
	padding: 10px 0px 10px 0px;
	justify-content: center;
	align-items: center;
	width: 100%;
	background: #f2f2f2;
}

.title-txt {
	color: var(--DaveyBs-Shades-D, #008ae6);
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	-webkit-text-stroke-width: 1;
	-webkit-text-stroke-color: #fff;
	font-family: "Permanent Marker", sans-serif; /* Fallback font-family */
	font-size: 32px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-align: center;
}

.logo {
	position: relative; /* Changed to relative for better alignment control */
	max-width: 60%; /* Responsive width, adjustable as needed */
	max-height: 80%; /* Restrict height to prevent overflow */
	align-self: center; /* Centering within the flex container */
	z-index: 3; /* Ensuring the logo is on top of other elements */
}

.logo img {
	width: 80%; /* Full width of its parent */
	height: auto; /* Maintain aspect ratio */
	object-fit: contain; /* Prevent distortion while maintaining aspect ratio */
	padding-bottom: 15px;
	padding-left: 20px;
}

.body-logo img {
	width: 100%; /* Full width of its parent */
	min-width: 150px;
	display: block;
}
.header-links {
	position: absolute;
	bottom: 10px; /* Align at the bottom */
	display: flex;
	align-items: center;
	z-index: 1000; /* Lower than the grass to keep behind it */
}

.header-links.left {
	left: 10px; /* Adjust spacing as needed */
	margin-left: 50px;
}

.header-links.right {
	right: 10px; /* Adjust spacing as needed */
	margin-right: 50px;
}

.header-links .sign img {
	max-width: 130px; /* Adjust size as needed */
	height: auto; /* Maintain aspect ratio */
}

.header-links .sign {
	position: relative; /* Necessary to contain the absolute .sign-text within each sign */
	display: inline-block; /* Makes sure the signs are laid out in line */
	max-width: 130px; /* Consistent max-width for all signs */
	height: auto; /* Maintain aspect ratio */
	margin-right: 20px; /* Space between signs, adjust as needed */
}

.tree-beehive {
	position: absolute;
	left: 0; /* Glue to the left */
	top: 40%; /* Vertically center relative to header */
	transform: translateY(-50%); /* Adjust to ensure proper vertical centering */
	width: 100%; /* Adjust according to your image size */
	height: 60%; /* Adjust according to your image size */
	background-image: url("/assets/img/tree-bee-hive.png"); /* Path to your image */
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 2;
}
.head-bee {
	position: absolute;
	right: 0; /* Stick to the right side of the header */
	bottom: 0; /* Align with the bottom of the header */
	width: 100px; /* Adjust according to your image size */
	height: 60%; /* Maintain aspect ratio */
	background-image: url("/assets/img/head-bee.png"); /* Path to your image */
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 2;
}

.cloud-1 {
	position: absolute;
	top: -36px; /* Example position */
	left: 2%; /* Example position */
	width: 200px; /* Width of the cloud */
	height: 108px; /* Height of the cloud */
	background: url("/assets/img/cloud-1.png") no-repeat center center;
	background-size: cover; /* Cover the div with the cloud image */
	z-index: 1; /* Make sure it's visible within the header container */
}
.cloud-2 {
	position: absolute;
	top: -6px; /* Example position */
	left: 25%; /* Example position */
	width: 200px; /* Width of the cloud */
	height: 108px; /* Height of the cloud */
	background: url("/assets/img/cloud-2.png") no-repeat center center;
	background-size: cover; /* Cover the div with the cloud image */
	z-index: 1; /* Make sure it's visible within the header container */
}
.cloud-3 {
	position: absolute;
	top: -56px; /* Example position */
	left: 60%; /* Example position */
	width: 200px; /* Width of the cloud */
	height: 108px; /* Height of the cloud */
	background: url("/assets/img/cloud-3.png") no-repeat center center;
	background-size: cover; /* Cover the div with the cloud image */
	z-index: 1; /* Make sure it's visible within the header container */
}
.cloud-4 {
	position: absolute;
	top: 18px; /* Adjust as needed */
	left: 80%; /* Adjust as needed */
	width: 200px; /* Width of the cloud */
	height: 108px; /* Height of the cloud */
	background: url("/assets/img/cloud-5.png") no-repeat center center;
	background-size: cover; /* Cover the div with the cloud image */
	z-index: 3; /* Make sure it's visible within the header container */
}

.facebook-link {
	display: block; /* Make the link cover the area of its content */
	width: 100%; /* Full width of the cloud-4 container */
	height: 100%; /* Full height of the cloud-4 container */
	text-align: center; /* Center the image horizontally */
	line-height: 108px; /* Vertically center using line height equal to height of cloud-4 */
	z-index: 5; /* Above the cloud image */
}

.facebook-link img {
	vertical-align: middle; /* Helps center the image vertically */
}

.facebook {
	position: absolute;
	top: 25px; /* 35px from the top of .cloud-4 */
	left: 50%; /* Centered horizontally in .cloud-4 */
	transform: translateX(-50%); /* Ensures precise horizontal centering */
	width: 50px; /* Width of the Facebook icon */
	height: 50px; /* Height of the Facebook icon */
	z-index: 2; /* Above the cloud image */
}

/* Color Body Content */
/* Staggered Section - Two Column Layout */
.staggered-section {
	display: grid;
	grid-template-columns: 1fr 1fr; /* Two equal columns */
	align-items: stretch; /* Ensure both columns take full height */
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	gap: 0;
}

/* Ensure Content & Image Fill Their Column */
.staggered-content,
.staggered-img-container {
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border-radius: 5%;
	box-shadow: #000000 0px 2px 2px 0px;
}

/* 🔹 Correctly Assign Background Colors Using Class Names */
.bg-orange {
	background: linear-gradient(135deg, #ffb74d, #ff8c42); /* Soft Orange */
	color: white;
}

.bg-green {
	background: linear-gradient(135deg, #66bb6a, #43a047); /* Bright Green */
	color: white;
}

.bg-yellow {
	background: linear-gradient(135deg, #ffee58, #fdd835); /* Soft Yellow */
	color: #333; /* Dark text for contrast */
}

.bg-purple {
	background: linear-gradient(135deg, #ba68c8, #8e24aa); /* Light Purple */
	color: white;
}

.bg-blue {
	background: linear-gradient(135deg, #4fc3f7, #039be5); /* Sky Blue */
	color: white;
}

/* General Text Content Styles */
.staggered-content {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	height: 100%;
	border-radius: 5%;
}

.staggered-content h1 {
	font-size: 1.5rem;
	margin-bottom: 10px;
}

/* Image Container */
.staggered-img-container {
	overflow: hidden;
}

/* Image Styling */
.staggered-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5%;
}

/* Reverse layout on even sections */
.staggered-section:nth-child(even) {
	grid-template-columns: 1fr 1fr;
}

.staggered-section:nth-child(even) .staggered-content {
	order: 2;
}

.staggered-section:nth-child(even) .staggered-img-container {
	order: 1;
}

/* /Color Body Content */

.content-container {
	display: grid;
	grid-template-columns: repeat(12, 1fr); /* 12 equal columns */
	gap: 20px;
	padding: 20px;
	position: relative;
}
.full-content-container {
	display: grid;
	grid-template-columns: repeat(12, 1fr); /* 12 equal columns */
	padding: 20px;
	position: relative;
}

.main-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: left;
	padding: 50px 50px;
}

.text-block,
.text-block-right {
	display: flex;
	flex-direction: column; /* Makes the children stack vertically */
	align-items: center; /* Center children horizontally */
	justify-content: center; /* Center children vertically */
	align-items: center;
	justify-content: center;
	border: 2px solid #ccc;
	padding: 20px;
	border-radius: 10px;
	height: 200px; /* Fixed height */
	font-weight: 600;
}

.text-block,
.large-text-block {
	grid-column: 1 / span 6; /* Spans the first 6 columns */
}

.large-text-block-center {
	grid-column: 1 / span 12; /* Spans all 12 columns */
}

.text-block-right {
	grid-column: 7 / span 6; /* Spans the last 6 columns */
	display: flex;
	flex-direction: column; /* Makes the children stack vertically */
	align-items: center; /* Center children horizontally */
	justify-content: center; /* Center children vertically */
}

.large-text-block {
	display: flex;
	flex-direction: column; /* Makes the children stack vertically */
	align-items: center; /* Center children horizontally */
	justify-content: center; /* Center children vertically */
	align-items: center;
	justify-content: center;
	border: 2px solid #ccc;
	padding: 20px;
	border-radius: 10px;
	height: 400px; /* Fixed height */
	font-weight: 600;
}
.large-text-block-center {
	display: flex;
	flex-direction: column; /* Makes the children stack vertically */
	align-items: center; /* Center children horizontally */
	justify-content: center; /* Center children vertically */
	align-items: center;
	justify-content: center;
	border: 2px solid #ccc;
	padding: 20px;
	margin: 0px;
	border-radius: 10px;
	height: auto;
	min-height: 100px; /* Fixed height */
	font-weight: 600;
}

.text-block-right h1,
.text-block h1,
.large-text-block h1,
.large-text-block-center h1 {
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); /* Text shadow */
	font-style: normal;
	font-size: 24px;
	font-weight: 800;
	line-height: normal;
	margin: 5px; /* Remove default margin */
	text-align: center; /* Center text horizontally */
}

.image-block {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 7 / span 6; /* Spans the next 6 columns */
	height: 600px; /* Fixed height to be taller than the text block */
	position: relative;
}

.image-block img {
	max-width: 100%;
	max-height: 600px;
	object-fit: cover;
	border-radius: 10px;
}

.main-img {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: span 6; /* Spans all 12 columns */
	max-height: 600px; /* Fixed height to be taller than the text block */
	position: relative;
}

.main-img img {
	max-width: 100%;
	max-height: 600px;
	object-fit: cover;
	border-radius: 10px;
}

.image-block-left {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	grid-column: 1 / span 6; /* Spans the first 6 columns */
	height: 600px; /* Match the height of the .image-block */
	position: relative; /* Needed for absolute positioning */
	margin-top: -400px; /* Adjust to align the top with the center of the first image */
}

.image-block-left img {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	max-height: 600px;
	border-radius: 10px;
}

.banner-container {
	display: flex;
	background: #7fccff;
	width: auto;
	/* max-height: 350px; */
	padding: 0px 0px 0px 0px;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-top: 340px;
	/* overflow-x: auto; */

	/* position: sticky; */
}

.banner-item {
	justify-content: center;
	align-items: center;
}

.banner-item img {
	object-fit: cover;
	border-radius: 10px;
	width: 100%;
	flex: 1;
}

.center-banner {
	width: 100%;
	height: 350px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 10px;
	background: url("/assets/img/home/ice-cream-truck-rentals-banner-center.jpg")
		lightgray 50% / cover no-repeat;
	box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.25);
	margin-bottom: 10px;
	margin-top: 10px;
	opacity: 75%;
}

.center-banner-txt {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.center-banner-txt h1,
.center-banner-txt p {
	color: #fffd19; /* Fallback yellow color */
	-webkit-text-stroke-width: 1px; /* Text outline width */
	-webkit-text-stroke-color: #000; /* Text outline color */
	font-family: "Permanent Marker", sans-serif; /* Fallback font-family */
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 1); /* Text shadow */
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.center-banner-txt h1 {
	font-size: 32px;
}

.center-banner-txt p {
	font-size: 24px;
}

/* Gallery Styles */
.gallery-section {
	padding: 20px;
	background-color: #f2f2f2;
	z-index: -0;
}

.gallery-container {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(200px, 1fr)
	); /* Responsive grid layout */
	gap: 20px;
}

.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.gallery-item:hover img {
	transform: scale(1.1); /* Slight zoom on hover */
	cursor: pointer;
}

/* Modal Styles */
.modal {
	display: none; /* Hidden by default */
	position: fixed;
	z-index: 10;
	padding-top: 60px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.9);
	align-items: center; /* Center vertically */
	justify-content: center; /* Center horizontally */
}

.modal-content {
	margin: auto;
	display: block;
	padding-top: 150px;
	width: 80%;
	max-width: 700px;
}

.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Form for event and contact info */
.form-control {
	display: block;
	width: 100%;
	height: calc(1.5em + 1.56rem + 2px);
	padding: 0.78rem 1rem;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #dde4ea;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
	.form-control {
		transition: none;
	}
}
.form-control::-ms-expand {
	background-color: transparent;
	border: 0;
}
.form-control:focus {
	color: #495057;
	background-color: #fff;
	border-color: rgba(55, 125, 255, 0.5);
	outline: 0;
	box-shadow: 0 0 25px rgba(55, 125, 255, 0.1);
}
.form-control::-moz-placeholder {
	color: #95a4af;
	opacity: 1;
}
.form-control:-ms-input-placeholder {
	color: #95a4af;
	opacity: 1;
}
.form-control::placeholder {
	color: #95a4af;
	opacity: 1;
}
.form-control:disabled,
.form-control[readonly] {
	background-color: #e9ecef;
	opacity: 1;
}
.form-container {
	width: 90%;
	/* height: 50%; Consider adjusting or removing the height to allow the content to dictate the container size */
	/* position: absolute; */
	/* left: 53px; */
	/* bottom: 295px; */

	margin: 20px auto; /* Center the form container horizontally */
	padding: 20px; /* Add padding for aesthetics */
	border-radius: 20px;
	border: 1px solid rgba(0, 153, 255, 0.5);
	background: #f2f2f2;
	box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
}
.inputs-row {
	display: flex;
	justify-content: space-between; /* Adjust the spacing between input groups */
	flex-wrap: wrap; /* Allows items to wrap in smaller screens */
}

.input-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-basis: 30%; /* Adjust based on the parent container's width and desired spacing */
	padding-bottom: 10px;
}
.input-group-st {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-basis: 5%; /* Adjust based on the parent container's width and desired spacing */
}
.input-group-zip {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-basis: 20%; /* Adjust based on the parent container's width and desired spacing */
}

.input-title {
	color: #000;
	font-family: "Lato", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	margin-bottom: 8px;
	text-align: center;
	padding-top: 10px;
}

.input-title.required::before {
	content: "*";
	color: var(--PPR-Triad-B-100, #fa072f);
	font-family: "Lato", sans-serif;
	font-size: 14px;
	font-weight: 800;
	position: relative;
	top: 0px; /* Adjust based on your design needs */
	margin-left: 5px; /* Space between the title and the asterisk */
}
.memo-title.required::before {
	content: "*";
	color: var(--PPR-Triad-B-100, #fa072f);
	font-family: "Lato", sans-serif;
	font-size: 14px;
	font-weight: 800;
	position: relative;
	top: 0px; /* Adjust based on your design needs */
	margin-left: 5px; /* Space between the title and the asterisk */
}

.text-entry-box {
	width: 100%; /* Makes the input box fill the container */
	height: 32px;
	border-radius: 10px;
	border: 1px solid #09f; /* Example color, replace as needed */
	background: #f2f2f2;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	padding: 10px;
}
.number-entry-box {
	width: 70px; /* Makes the input box fill the container */
	height: 32px;
	border-radius: 10px;
	border: 1px solid #09f; /* Example color, replace as needed */
	background: #f2f2f2;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	padding: 10px;
}

.memo-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%; /* Ensures the group takes full width of its parent container */
	margin-top: 20px; /* Space from the preceding elements */
}

.memo-title {
	color: #000;
	font-family: "Lato", sans-serif;
	font-size: 14px;
	font-weight: 800;
	text-align: center;
	margin-bottom: 8px; /* Space between the title and the textarea */
}

.memo-textbox {
	width: calc(100% - 20px); /* Adjust width to allow for padding/margins */
	max-width: 1000px; /* Maximum width to ensure the textarea doesn't get too wide on larger screens */
	height: 225px; /* Fixed height as per requirement */
	align-items: center; /* This keeps children centered horizontally */
	border-radius: 10px;
	border: 1px solid var(--PPR-Primary-100, #09f);
	background: var(--Gray-6, #f2f2f2);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	padding: 10px; /* Padding inside the textarea */
	resize: vertical; /* Allows the user to resize the textarea vertically */
	font-family: "Lato", sans-serif; /* Optional: Matches the font style with other inputs */
}

.select-box {
	width: 100%; /* Ensures the select box takes full width of its container */
	padding: 10px;
	border-radius: 10px; /* Rounds the corners */
	border: 1px solid #09f; /* Adds a border */
	background-color: #f2f2f2; /* Sets a background color */
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); /* Adds a subtle shadow */
	font-family: "Lato", sans-serif; /* Maintains consistency in font */
	margin-bottom: 20px;
}

.select-box:focus {
	border-color: #09f; /* Changes border color on focus */
	outline: none; /* Removes the default focus outline */
}
.select-box-title {
	color: #000;
	font-family: "Lato", sans-serif;
	font-size: 14px;
	font-weight: 800;
	text-align: center;
	margin-bottom: 8px; /* Space between the title and the textarea */
}

.quote-button {
	display: flex;
	width: 224px;
	height: 52px;
	align-items: center;
	justify-content: center; /* Centers the content (text and image) inside the button */
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--Green-1, #219653);
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	color: #fff;
	font-family: Lato;
	font-size: 14px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
}

.quote-button:hover {
	background: var(--Green-2, #27ae60);
}

.quote-button img {
	width: 20px; /* Fixing width */
	height: 20px; /* Fixing height */
	margin-left: 10px; /* Adds some space between the icon and text */
}

.form-step {
	display: none;
	animation: fadeIn 0.3s ease;
}
.form-step.active {
	display: block;
}

/* Honeypot style */
.name {
	display: none;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (max-width: 1270px) {
	.image-block-left {
		margin-top: -150px; /* Adjust as needed for smaller screens */
	}
}

@media (max-width: 768px) {
	.content-container {
		grid-template-columns: 1fr; /* Single column layout on smaller screens */

		.memo-textbox {
			width: 90%; /* Allows some margin on the sides in smaller screens */
		}
	}

	.text-block,
	.text-block-right,
	.image-block,
	.image-block-left,
	.large-text-block {
		grid-column: 1 / -1; /* Each block spans the full width */
		height: auto; /* Adjust height to fit content */
		margin-top: 0; /* Remove margin for single column layout */
	}

	.image-block-left img {
		top: 0;
		transform: none; /* Remove translateY for single column layout */
	}

	.center-banner-txt h1 {
		font-size: 24px;
	}

	.center-banner-txt p {
		font-size: 18px;
	}
}

@media (max-width: 870px) {
	.inputs-row {
		flex-direction: column;
		align-items: center;
	}
	.input-group {
		width: 100%; /* Adjust the width on smaller screens */
	}
	.inputs-row,
	.input-group,
	.memo-group {
		flex-direction: column;
		align-items: center;
	}

	.inputs-row,
	.input-group,
	.memo-group {
		flex-direction: column;
		align-items: center;
	}

	.text-entry-box,
	.memo-textbox {
		width: 90%; /* Adjust the width to be responsive */
		margin: 0 auto; /* Reinforce centering */
	}
	.input-group .select-box {
		width: 90%; /* Full width for select boxes */
		margin-left: 50px;
	}
}

/* Footer Stylings */
.footer {
	display: flex;
	position: relative;
	justify-content: space-between;
	width: 100%;
	height: 220px;
	bottom: 0;
	padding: 0%;
	margin: 0%;
	align-items: flex-start;
	flex-shrink: 0;
	border-radius: 10px 10px 0px 0px;
	background: #2f80ed;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.footer-col {
	flex: 1; /* Each column takes up equal space */
	display: flex;
	flex-direction: column; /* Stack children vertically */
	justify-content: center; /* Center horizontally and vertically now */
	align-items: center; /* Center horizontally and vertically now */
	height: 175px;

	border-right: 1px solid #0099cc;
}
.footer-col-right {
	flex: 1; /* Each column takes up equal space */
	display: flex;
	flex-direction: column; /* Stack children vertically */
	justify-content: center; /* Center horizontally and vertically now */
	align-items: center; /* Center horizontally and vertically now */
	height: 175px;
}
.footer-col-left {
	border-right: 1px solid #0099cc;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 175px;
	text-align: center;
}

.footer-text {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.footer-link {
	font-family: "Lato";
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	text-align: left;
	margin-bottom: 5px;
	color: #ffffff;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.footer-link:hover {
	color: #f2994a;
}

.links-container {
	display: flex;
	justify-content: space-around;
	padding: 0px;

	/* other styles as needed */
}

.link-column {
	display: flex;
	flex-direction: column;
	width: 50%;
	margin-right: 20px;
	padding-left: 30px;
	/* other styles as needed */
}

/* Footer */
.footer-sm {
	position: fixed;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 85px;
	left: 0px;
	background: #40b3ff;
	box-shadow: 0px 10px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px 10px 0px 0px;
	bottom: 0px;
	z-index: 10000;
	transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* .footer-sm {
	position: fixed;
	bottom: 0;
	width: 100%;
	
} */

.footer-sm.hidden {
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
}

.column-sm {
	flex: 1;
	height: 100%;
	padding: 0px;
	box-sizing: border-box;
}

.left-column-sm {
	border-right: 1px solid #0099cc;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.middle-column-sm {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.right-column-sm {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-left: 1px solid #0099cc;
}

.row {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}
/* /FooterStylings */
/* Glide Slide Stylings */
.glide {
	margin-top: 340px; /* Push the slider below header + sub-header */
	position: relative; /* Ensure it doesn’t overlap with fixed elements */
	z-index: -1; /* Ensure it's above background but below menu */
}

.glide__slide {
	background-color: #7fccff; /* Set the background color */
	display: flex; /* Use flexbox for centering */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
}

.glide__slide img {
	max-width: 100%; /* Ensure the image does not exceed the slide width */
	max-height: 100%; /* Ensure the image does not exceed the slide height */
	object-fit: cover; /* This will cover the slide area, you can change it to 'contain' if you don't want to crop the image */
	flex: 0; /* This will make the image take up the entire slide area */
	border-radius: 10px; /* Optional: Add rounded corners */
}

.glide__track {
	background-color: #7fccff; /* Set the background color for the entire track */
}

.glide__slide {
	margin-right: 0; /* Remove right margin if any */
	/* ... other styles ... */
}

/* /Glide Slide Stylings */

.flavors-container {
	/* background: var(--Gray-5, #e0e0e0); */
	display: flex;
	width: 100%;
	max-width: 1440px;
	max-height: 250px;
	flex-direction: row;
	align-items: center;
	justify-content: left;
	text-align: center;
	padding-bottom: 30px;
	margin-bottom: 100px;
}

.glide-flavors {
	width: 100%;
	max-width: 1440px;
	padding: 10px 0px;
	height: 250px;
}

.glide-flavors .glide__track {
	border-radius: 10px;
}

.glide-flavors .glide__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
}

.glide-flavors .glide__slide img {
	display: block;

	width: auto;
	margin: 0px 20px 0px 20px;
	border-radius: 10px;
	box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.25);
}
/* Ensure FancyBox images are fully visible */
.fancybox__slide {
	background: none !important;
	opacity: 1 !important;
}

.fancybox__image {
	opacity: 1 !important;
	filter: none !important;
}

.fancybox__container {
	/* z-index: 9000 !important; */
	height: fit-content;
}

.fancybox__backdrop {
	background: rgba(0, 0, 0, 0.6) !important;
}
/* /Glide About Gallery */

/* Flavor List Styling */
.flavor-side-img {
	max-width: 250px;
	height: auto;
	border-radius: 10px;
}

/* Proper control inside the flex wrapper */
.flavors-list-wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 30px;
	flex-wrap: nowrap;
	margin: 40px auto;
	max-width: 1400px;
}

/* Use flex order explicitly if needed */
.flavor-side-img.left {
	order: 0;
	display: flex;
}

.flavors-list {
	order: 1;
	display: flex;
	gap: 30px;
	justify-content: center;
	width: 100%;
}

.flavor-side-img.right {
	order: 2;
}

.flavors-list {
	display: flex;
	gap: 30px;
	justify-content: center;
	width: 100%;
}

.flavors-column {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.flavor-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Lato", sans-serif;
	font-weight: bold;
	font-size: 1rem;
}

.flavor-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.flavor-item span {
	color: #333;
}

.special-note {
	justify-content: center;
	margin-top: 20px;
	font-weight: bold;
	color: #008ae6;
}

/* Static Images Row Styling */
.static-images-row {
	display: flex;
	flex-wrap: wrap; /* Allows wrapping if there are more images than fit */
	justify-content: center; /* Center images horizontally */
	gap: 20px; /* Space between images */
	max-width: 1200px; /* Matches your other content widths */
	margin: 0 auto;
	padding: 20px;
}

.static-image {
	flex: 1; /* Each image takes equal space */
	min-width: 200px; /* Minimum width to prevent squashing */
	max-width: 300px; /* Maximum width for consistency */
}

.static-image img {
	width: 100%; /* Full width of container */
	height: auto; /* Maintain aspect ratio */
	object-fit: cover; /* Ensure images fill their space */
	border-radius: 10px; /* Matches your other image styles */
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); /* Matches your shadow style */
}

/* Responsive Adjustments */
@media (max-width: 900px) {
	.flavors-list {
		grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */
	}
	.static-image {
		flex: 1 1 45%; /* Two images per row on medium screens */
		max-width: none; /* Allow natural sizing */
		.flavors-list {
			grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
		}
	}
}

@media screen and (max-width: 860px) {
	.flavors-list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.flavors-column {
		width: 45%; /* Two columns with a bit of gap */
	}
}

@media screen and (max-width: 595px) {
	.flavor-side-img {
		max-width: 120px;
	}
	.flavor-item {
		font-size: 0.8rem; /* Smaller text on mobile */
	}
}

@media (max-width: 600px) {
	.flavors-list {
		grid-template-columns: repeat(1, 1fr); /* Two columns on smaller screens */
	}
	.static-images-row {
		flex-direction: column; /* Stack images on small screens */
		align-items: center;
		.flavors-list {
			grid-template-columns: 1fr; /* Stack columns on small screens */
		}

		.flavors-column {
			gap: 10px; /* Slightly less spacing on mobile */
		}

		.flavor-item span {
			font-size: 1rem; /* Smaller text on mobile */
		}
	}

	.static-image {
		flex: none; /* Reset flex for stacking */
		width: 80%; /* Slightly narrower on mobile */
		max-width: 300px; /* Keep a reasonable max width */
	}
}

/* Responsive Adjustments */

@media screen and (max-width: 950px) {
	.flavor-side-img.left {
		display: none;
	}
}

@media screen and (max-width: 1130px) {
	.header-container {
		min-height: 250px; /* Base minimum height, can adjust as needed */
		height: auto; /* Allows the container to grow */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 0px;
	}
	.header-links .sign img {
		display: none;
	}
	.header-links .sign {
		max-width: 100px; /* Adjust size as needed */
	}
	.logo img {
		width: 60%; /* Logo width as a percentage of the container width */
		margin-left: 50px; /* Adjust as needed */
		top: 50%;
		object-fit: contain; /* Prevents distortion while fitting the content */
		padding-left: 0%;
	}
	/* .tree-beehive {
		display: none;
	} */

	.cloud-2,
	.cloud-3 {
		display: none; /* Hide clouds on smaller screens */
	}

	.cloud-1 {
		left: 0%;
		width: 100px;
		height: 54px;
	}

	.cloud-4 {
		left: 70%;
		width: 100px;
		height: 54px;
	}

	.facebook {
		top: 10px;
		height: 30px;
		width: 30px;
	}

	.hamburger-menu {
		display: flex;
	}
	.sub-header {
		top: 255px;
		margin-top: 0px;
	}
	.glide {
		margin-top: 315px; /* Push the slider below header + sub-header */
		position: relative; /* Ensure it doesn’t overlap with fixed elements */
		z-index: -1; /* Ensure it's above background but below menu */
	}
	.banner-container {
		margin-top: 315px;
	}
}
@media screen and (min-width: 901px) {
	.footer-sm {
		display: none;
	}
	.footer {
		display: flex;
	}
}
@media screen and (max-width: 1085px) {
	.content-container {
		grid-template-columns: 1fr; /* Single column layout on smaller screens */
	}

	.text-block,
	.image-block {
		grid-column: 1 / -1; /* Each block spans the full width */
		height: auto; /* Adjust height to fit content */
	}
}

@media screen and (max-width: 900px) {
	.sub-header-col {
		display: none;
	}

	.footer-col-right {
		display: none;
	}
	.footer-col-left {
		display: none;
	}

	.title-txt {
		font-size: 16px;
	}

	.body-logo img {
		display: none;
	}

	.footer-sm {
		display: block;
	}
	.footer {
		display: none;
	}
	.extra-margin {
		margin-bottom: 500px;
	}
}

@media screen and (max-width: 768px) {
	.staggered-section {
		grid-template-columns: 1fr; /* Force single column on mobile */
		padding: 20px;
	}

	.staggered-content,
	.staggered-img-container {
		width: 100%;
		height: auto; /* Adjust height for smaller screens */
		text-align: center;
		padding: 30px;
	}

	/* Ensure even sections do NOT show side by side */
	.staggered-section:nth-child(even) {
		grid-template-columns: 1fr; /* Force stacking */
	}

	/* Flip even sections so they keep the staggered effect */
	.staggered-section:nth-child(even) .staggered-content {
		order: 1;
	}

	.staggered-section:nth-child(even) .staggered-img-container {
		order: 2;
	}

	.staggered-img {
		max-height: 300px; /* Keep images proportional */
	}
}

@media screen and (max-width: 525px) {
	.header-container {
		min-height: 200px; /* Base minimum height, can adjust as needed */
		height: auto; /* Allows the container to grow */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.header-links .sign img {
		display: none;
	}
	.header-links .sign {
		max-width: 100px; /* Adjust size as needed */
	}
	.logo img {
		width: 55%; /* Logo width as a percentage of the container width */
		margin-left: 50px; /* Adjust as needed */
		top: 50%;
		object-fit: contain; /* Prevents distortion while fitting the content */
		padding-left: 0%;
	}
	/* .tree-beehive {
		display: none;
	} */

	.cloud-2,
	.cloud-3 {
		display: none; /* Hide clouds on smaller screens */
	}

	.cloud-1 {
		left: 0%;
		width: 100px;
		height: 54px;
	}

	.cloud-4 {
		left: 70%;
		width: 100px;
		height: 54px;
	}

	.facebook {
		top: 10px;
		height: 30px;
		width: 30px;
	}

	.sub-header {
		top: 220px;
		margin-top: 0px;
	}
	.glide {
		margin-top: 265px; /* Push the slider below header + sub-header */
		position: relative; /* Ensure it doesn’t overlap with fixed elements */
		z-index: -1; /* Ensure it's above background but below menu */
	}
	.banner-container {
		margin-top: 280px;
	}
}

@media screen and (max-width: 490px) {
	.sub-header {
		top: 210px;
		margin-top: 0px;
	}
	.glide {
		margin-top: 270px; /* Push the slider below header + sub-header */
		position: relative; /* Ensure it doesn’t overlap with fixed elements */
		z-index: -1; /* Ensure it's above background but below menu */
	}
	.banner-container {
		margin-top: 270px;
	}
}
@media screen and (max-width: 425px) {
	.sub-header {
		top: 195px;
		margin-top: 0px;
	}
	.glide {
		margin-top: 255px; /* Push the slider below header + sub-header */
		position: relative; /* Ensure it doesn’t overlap with fixed elements */
		z-index: -1; /* Ensure it's above background but below menu */
	}
	.banner-container {
		margin-top: 255px;
	}
}