/**==================== Website CSS Custom Style by nesbconsultants.com - Revised: 03-27-25 - Start ====================**/

:root {
	/* set color pallette variables */
	--primary: rgb(21, 96, 1);
	--contrast: #80b721;
	--secondary: #515151;
	--background-dark: #333333;
	--background-light: #F9FBF4;
	--border: #ccc;
	--white: #ffffff;
	--black: #000000;
}

html,
body {
	background-color: var(--white);
	padding: 0;  /* Must explicitly declare due to default CSS */
	/* position: relative; */
	/* min-height: 100vh; */
}

html {
	overflow-x: hidden;
}

/** Button Types Styling - Start **/

/* Primary Button - Start */
.btn-primary {
	color: var(--white);
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	max-width: 140px;
	max-height: 40px;
	background-color: var(--black);
	padding: 12px 12px;
	white-space: nowrap;
	border-radius: 4px;
	border-color: #333333;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--primary);
	border-color: var(--black);
	color: var(--white);
}
/* Primary Button - End */

/** Headings - Start **/

section .heading {
	background-color: var(--white);
}

.column_heading {
	margin-top: 90px;
}

/** Headings - End **/

/* Force link to <div id> to stop at some point other than top */
.anchor {
	display: block;
	height: 35px; /*same height as header*/
	margin-top: -35px; /*same height as header*/
	visibility: hidden;
}

/* Animations */

.image-reveal {
	view-timeline-name: --image-reveal;
	view-timeline-axis: block;
	animation: linear imageRevealOnScroll both;
	animation-timeline: --image-reveal;
	animation-range: entry 25% cover 50%;
}

@keyframes imageRevealOnScroll {
	from {
		opacity: 0;
		clip-path: inset(45% 20% 45% 20%);
	}

	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
p.big-paragraph,
.carousel-caption,
.recent-posts .col-md-9 .text p small,
.navbar-default .navbar-brand,
.orange {
	font-weight: bold;
}

.page_title {
	font-weight: 500;
	font-stretch: 200%;
	letter-spacing: 2px;
	padding: 20px 0 10px 0;
	background: url("/images/backgrounds/heading_sep_green.png") repeat-x left center, url("/images/backgrounds/heading_sep_green.png") repeat-x right center;
	color: var(--primary);
	text-transform: uppercase;
	text-align: center;
}

.page_title span {
	background: #fff; /* Must match background color of Parent Element */
	padding: 0 30px;
}

/* Breakpoint (Media Query MUST always appear AFTER the CSS rule it modifies) */
@media (max-width: 500px) {
	.page_title {
		background: none;
	}
}

/**==================== Sticky NavBar -  Start ====================**/

nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 5;
	transition: 0.6s;
}

nav.sticky {
    background-color: rgb(21, 96, 1, 0.9);
    padding: 15px 2rem;
    display: flex;
    align-items: center;
    max-height: 10vh;
    box-sizing: border-box;  /* Includes padding in width/height */
}

nav .brand {
	font-size: 20px;
	color: var(--white);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 2px;
    flex-shrink: 0; /* Prevent the brand from shrinking */
}

nav .brand img {
    max-height: 10vh; /* Image height is constrained to 10vh */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image behaves correctly */
    margin: 0; /* remove unwanted margins */
    padding: 0; /* remove unwanted padding */
    object-fit: contain; /* Preserve aspect ratio, scale to fit */
}

nav .menu {
    position: relative;
    display: flex;
    justify-content: space-between; /* Spreads items across the navbar */
    align-items: center;
    flex-wrap: nowrap; /* Prevents wrapping in full-screen mode */
    max-width: 100%;  /* Prevents overflow */
    box-sizing: border-box;
}

nav .menu a {
	font-size: 1vw; /* Responsive font size */
	font-weight: 600;
	text-decoration: none;
	color: var(--white);
	margin: 0 0.5vw; /* Responsive margins */
    padding: 0.5vw 1vw; /* Responsive padding */
	text-transform: uppercase;
	border-radius: 1vw; /* Responsive border-radius */
	transition: 0.3s;
	transition-property: color, background;
    white-space: nowrap; /* Prevent text wrapping */
}

nav .menu a:hover {
	color: #000;
	background: var(--white);
}

/* Hamburger Button Styling */
nav .hamburger-btn {
    font-size: 25px;
    cursor: pointer;
    color: var(--white);
    display: none; /* Only visible on small screens */
  }

/* Dropdown */
/* Dropdown container */
nav .menu .dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown button (services link) */
nav .menu .dropdown .dropbtn {
	background-color: transparent;
    color: var(--white);
    padding: 0.5vw 1vw; /* Responsive padding */
    font-size: 1vw; /* Responsive font size */
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    margin: 0 1vw; /* Responsive margins */
    border-radius: 1vw; /* Responsive border-radius */
    transition: 0.3s;
    transition-property: color, background;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Hover effect for dropdown button */
nav .menu .dropdown .dropbtn:hover {
	color: #000;
	background: var(--white);
}

/* Dropdown content (hidden by default) */
nav .menu .dropdown .dropdown-content {
	display: none;
	position: absolute;
	background-color: var(--contrast);
	min-width: 200px;
	padding: 12px 0px;
	border-radius: 10px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
	z-index: 1;
}

/* Links inside the dropdown */
nav .menu .dropdown .dropdown-content a {
	color: var(--white);
    padding: 0.8vw 1.2vw; /* Responsive padding */
    font-size: 0.8vw; /* Responsive font size */
    text-decoration: none;
    display: block;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Hover effect for dropdown links */
nav .menu .dropdown .dropdown-content a:hover {
	background-color: #ddd;
	color: var(--black);
}

/* Show dropdown content on hover */
nav .menu .dropdown:hover .dropdown-content {
	display: block;
}

@media (max-width: 900px) {
  
	nav {
		width: 100%;
		justify-content: space-between;
        	box-sizing: border-box;
	}

	nav.sticky {
		padding: 0 8vw;
	}

	nav .menu {
		position: fixed;
		background: var(--primary);
		flex-direction: column;
		max-width: 0; /* Only change this property from 300px */
		height: 80vh;
		top: 0;
		right: -100%;
		margin-right: 3vw;
		padding: 80px 80px;
		transition-property: right;
		transition: 0.5s;
	}

	nav .menu.active {
		max-width: 300px;
		right: 0;
	}

	nav .hamburger-btn {
		display: block;
		z-index: 10;
		pointer-events: auto;
	}

	nav .menu .close-btn {
		position: absolute;
		top: 0;
		left: 0;
		margin: 25px;
	}

    nav .menu a {
        display: block;
        font-size: 16px; /* Fixed font size for vertical layout */
        margin: 10px 0; /* Fixed margins for vertical layout */
        padding: 0 15px;
    }

	nav .menu .dropdown .dropbtn {
        display: block;
        font-size: 16px; /* Fixed font size for vertical layout */
        margin: 10px 0; /* Fixed margins for vertical layout */
        padding: 0 15px;
    }

    nav .menu .dropdown .dropdown-content a {
        font-size: 14px; /* Fixed font size for dropdown links */
        padding: 10px 15px; /* Fixed padding for dropdown links */
    }
}

/**==================== Sticky NavBar -  End ====================**/

/**==================== Header - Start ====================**/

header,
header .blank {
    width: 100%;
}

header,
header [class*="container"],
header .blank {
    display: block;
}

header [class*="content"] {
    position: absolute;
    z-index: 10;
}

header,
header [class*="container"],
header .blank {
    position: relative;
    float: left;
}

header {
	padding: 3px;
	box-shadow: 0 8px 6px -6px #000;
	background-color: var(--white);
	background-image: url(/images/backgrounds/header-bgnd.jpg);
	background-repeat: repeat-x;
	background-size: auto;
	overflow: hidden;
	z-index: 555;
}

header img {
	margin-top: -1vh; /*  Sets height from top of header  */
	margin-left: 5vw;
	padding: 1vh;
}

.logo {
	float: left;
}

.phone {
	float: right;
	max-width: 250px;
	margin-top: -100px; /*  Sets height from top of header  */
	margin-right: 5em;
	padding-right: 10px;
	clear: both;
}

.phone-big {
	color: var(--primary);
	font-size: 22px;
	font-weight: 800;
	line-height: 26px;
	margin-left: 20px;
	margin-top: 10px;
}

.phone-normal {
	color: #666666;
	font-size: 10px;
	line-height: 12px;
	font-weight: 300;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #999;
}

header h1,
header p {
	letter-spacing: 5px;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

@media (max-width: 768px) {
	.phone {
		margin-right: auto;
	}
}

@media (max-width: 360px) {
	.phone {
		visibility: hidden;
	}
}

/**==================== Header - End ====================**/

/**==================== Hero Carousel - Start ====================**/

.hero-container {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.hero-slider {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

/* Breakpoint (Media Query MUST always appear AFTER the rule it modifies) */
@media (max-width: 768px) {
	.hero-container {
		margin-top: 15%;
	}
}

@media (max-width: 600px) {
	.hero-container {
		margin-top: 24%;
	}
}

@media (max-width: 400px) {
	.hero-container {
		margin-top: 32%;
	}
}

@media (max-width: 350px) {
	.hero-container {
		margin-top: 38%;
	}
}

.hero-slide {
	min-width: 100%;
	box-sizing: border-box;
	display: none;
}

.hero-slide.active {
	display: flex;
}

.hero-slide img {
	width: 100%;
	height: auto;
}

.hero-text {
	position: absolute;
	bottom: 35%; /* Adjust as needed */
	left: 50%;
	width: 100%; /* Allow text to span the entire width */
	transform: translateX(-50%);
	display: flex; /* Use flexbox for centering */
	flex-direction: column; /* Arrange text vertically */
	align-items: center; /* Center align horizontally */
	text-align: center;
	color: white !important;
}

/* Breakpoint (Media Query MUST always appear AFTER the rule it modifies) */
@media (max-width: 400px) {
	.hero-text {
		bottom: 25%;
	}
}

@media (max-width: 350px) {
	.hero-text {
		bottom: 18%;
	}
}

.hero-text h1 {
	font-size: var(--step-4);
}

.hero-text h2 {
	font-size: var(--step-3);
}

.hero-text h1,
.hero-text h2 {
	margin: 0; /* Remove default margin */
	-webkit-text-stroke: 1px black; /* Outlines the text in black */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds shadow to text */
}

.hero-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	padding: 10px;
	cursor: pointer;
	border: none;
	outline: none;
}

/* Breakpoint (Media Query MUST always appear AFTER the rule it modifies) */
@media (max-width: 768px) {
	.hero-nav-btn {
		display: none;
	}
}

.prev {
	left: 10px;
}

.next {
	right: 10px;
}

#background {
	width: 70%;
	background-color: #ffffff;
	border: none;
}

#background-display {
	display: none;
	justify-content: space-between;
	margin: 20px;
}

/**==================== Hero Carousel - End ====================**/

/**==================== Consultation Divider Bar - Start ====================**/

#divider_container_top div {
	background-color: var(--primary);
	color: var(--white);
}

#divider_container_bottom div {
	background-color: var(--background-dark);
	color: var(--white);
}

.divider-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%; /* Ensure the .divider-bar container takes the full width */
	padding: 20px;
}

.divider-bar div {
	flex: 1; /* Allow flex items to grow/shrink */
	text-align: center;
}

/* Allocate 2/3 space for the first child */
.divider-bar div:first-child {
	flex-grow: 2; /* 2 parts of the available space */
	text-align: left; /* Optional alignment */
	color: var(--white);
}

.divider-bar h2,
.divider-bar h4 {
	margin: 0.25em;
	padding: 0.25em;
}

.divider-bar div:first-child h2 {
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
	padding-bottom: 0.25em;
}

/* Allocate 1/3 space for the second child */
.divider-bar div:nth-child(2) {
	flex-grow: 1; /* 1 part of the available space */
	display: flex;
	justify-content: flex-end; /* Align button to the far right */
	padding-right: 20px; /* Add some padding to keep it within bounds */
}

@media (max-width: 768px) {
	.divider-bar {
		flex-direction: column; /* Stack flex items vertically on smaller screens */
		text-align: center;
	}

	.divider-bar div:first-child,
	.divider-bar div:nth-child(2) {
		flex-grow: 1; /* Reset equal space allocation on smaller screens */
	}

	.divider-bar div:nth-child(2) {
		justify-content: center; /* Center the button on smaller screens */
		padding-right: 0;
	}
}

/**==================== Consultation Divider Bar - End ====================**/

/**==================== Services - Start ====================**/

#services_container div {
	background-color: var(--white);
	color: var(--primary);
}

.basic-grid {
	display: grid;
	gap: 1rem;
	grid-auto-rows: 1fr; /* sets all grid items in a row to the height of the tallest column */
	grid-template-columns: repeat(3, minmax(300px, 1fr)); /* Explicitly create 3 columns */
	padding-right: calc(1rem + 8px); /* Adjusted padding to account for scrollbar */
}

.basic-grid .card {
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Space between content and button */
	position: relative;
	margin: 1rem;
	padding: 1rem;
	box-sizing: border-box;
	width: calc(100% - 8px); /* Adjusted width to account for scrollbar */
	border: 10px ridge rgba(255, 255, 255, 0.2);
	border-radius: 1rem;
}

.basic-grid .card:nth-child(1) {
	/*background-color: antiquewhite;*/
}

.basic-grid .card:nth-child(2) {
	/*background-color: aqua;*/
}

.basic-grid .card:nth-child(3) {
	/*background-color: aquamarine;*/
}

.basic-grid .card:nth-child(4) {
	/*background-color: azure;*/
}

.basic-grid .card:nth-child(5) {
	/*background-color: beige;*/
}

.basic-grid .card:nth-child(6) {
	/*background-color: bisque;*/
}

.basic-grid .card:nth-child(7) {
	/*background-color: black;*/
	/*color: white;*/
}

.basic-grid .card:nth-child(8) {
	background-color: blanchedalmond;
}

.basic-grid .card:nth-child(9) {
	background-color: blue;
	color: white;
}

.basic-grid .card:nth-child(10) {
	background-color: blueviolet;
	color: white;
}

.basic-grid .card:nth-child(11) {
	background-color: brown;
	color: white;
}

.basic-grid .card_title {
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.text_center {
	text-align: center;
}

.basic-grid .card img {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover; /* Ensures the image maintains its aspect ratio */
	margin: 0 auto;
	display: block;
	border-radius: 1rem;
}

/* height: 100%; /* Forces the image to fill the card */
  	


.basic-grid .card .text {
	flex-grow: 1; /* Ensures content takes up available space */
	margin-bottom: 60px; /* Margin for button space */
}

.basic-grid .card .text p {
	color: #000;
}

#services_container .btn-container {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

@media (max-width: 900px) {
	.basic-grid {
	    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
	}
 }

/**==================== Services - End ====================**/

/**====================  About Us Start  ====================**/
.parallax {
	background-image: url(/images/backgrounds/bg5.jpg);
	width: 100%; /* Ensure the .parallax container takes the full width */
	min-height: 500px; /* Must set a specific height */

	/* Creates the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.parallax_overlay {
	background-color: none;
	color: var(--white);
	padding: 2rem;
	position: relative;
}

.parallax_overlay h3 {
	font-weight: bold;
	font-stretch: 200%;
	letter-spacing: 2px;
	-webkit-text-stroke: 1px black; /* Outlines the text in black */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds shadow to text */
	padding: 20px 0 10px 0; /* The padding property adds space inside the h3 element. In this case, the padding-top and padding-bottom add space above and below the text. The padding-left and padding-right add space on either side of the text, creating room for the lines to stop before and after the text. Adjusting these values helps ensure that the lines don't overlap with the text and maintains the desired visual spacing.*/
	color: var(--white);
	text-transform: uppercase;
	text-align: center;
	position: relative;
}

.parallax_overlay h3::before,
.parallax_overlay h3::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(50% - 10rem); /* Adjusts the width to stop 10rem before and after the text */
	height: 2px; /* Adjust the height as needed */
	background-color: white; /* Set the line color */
	transform: translateY(-50%);
}

.parallax_overlay h3::before {
	left: 0;
	margin-right: 1rem; /* Spacing to ensure the line stops before the text */
}

.parallax_overlay h3::after {
	right: 0;
	margin-left: 1rem; /* Spacing to ensure the line stops after the text */
}

/* Breakpoint (Media Query MUST always appear AFTER the CSS rule it modifies) */
@media (max-width: 400px) {
	.parallax_overlay h3::before,
	.parallax_overlay h3::after {
		width: calc(50% - 7rem); /* Adjusts the width to stop 3rem before and after the text */
	}
}

/**====================  About Us End  ====================**/

/**====================  Why Us? Start  ====================**/

#why_container .btn-container {
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.icon {
	padding: 4rem;  /* Controls responsive icon size on the card */
}

@media (max-width: 900px) {
	.icon {
		padding: 9rem;  /* Controls responsive icon size on the card */
	}
}

@media (max-width: 700px) {
	.icon {
		padding: 7rem;  /* Controls responsive icon size on the card */
	}
}

@media (max-width: 500px) {
	.icon {
		padding: 5rem;  /* Controls responsive icon size on the card */
	}
}

@media (max-width: 400px) {
	.icon {
		padding: 4rem;  /* Controls responsive icon size on the card */
	}
}


/**=====================  Why Us? End  ====================**/

/**====================  Photo Gallery Start  ====================**/

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-auto-rows: 200px;
	grid-gap: 20px;
	grid-auto-flow: dense;
	overflow: auto;
	padding: 20px;
}

.gallery > div {
	z-index: 1;
	position: relative;
	padding: 0;
	overflow: hidden;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), 5px 5px 25px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease-in-out;
}

.gallery div img {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	overflow: hidden;
	transition: all 0.6s ease-in-out;
}

.gallery > div,
.gallery div img {
	/*   transition: all .6s ease-in-out; */
}

/*make BIG*/
.gallery > div:hover,
.gallery > div:hover img {
	transform: scale(1.05);
}

.gallery > div:hover img {
	/*   transform: scale(1.06); */
}

.gallery_caption {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 25px 15px 15px;
	width: 100%;
	font-family: "Helvetica", sans-serif;
	font-size: 14px;
	color: white;
	opacity: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
	transition: 0.3s;
}

.gallery > div:hover .gallery_caption {
	opacity: 1;
}

.vertical {
	grid-row: span 2;
}

.horizontal {
	grid-column: span 2;
}

.big {
	grid-row: span 2;
	grid-column: span 2;
}

/**====================  Photo Gallery - End  ====================**/

/**====================  Video Gallery - Start  ====================**/

.iframe-container {
	width: 100%;
	aspect-ratio: 16/9;
}

/**====================  Video Gallery - End  ====================**/

/**====================  SEO Divider Bar - Start  ====================**/
.parallax-bar {
	background-image: url(/images/backgrounds/garden_walkway_bg.jpg);
	width: 100%; /* Ensure the .parallax container takes the full width */
	min-height: 500px; /* Must set a specific height */

	/* Creates the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/**====================  SEO Divider Bar - End  ====================**/

/**====================  Testimonials - Start  ====================**/

/**  Swiper Slider -  Start **/
.testimonials {
	background-color: var(--white); /* Background color of Swiper Slider */
}

.swiper {
	width: 100%;
	height: 100%;
	/*background-color: white;*/
	/*background-image: url(images/testimonials/garden_walkway_bg.jpg); /* Background image of Swiper Slider */
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 35px 0 0 0;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonials .testimonial-item {
	box-sizing: content-box;
	text-align: center;
	max-height: 100%;
	max-width: 100%;
}

.testimonials .testimonial-item .testimonial-img {
	width: auto; /* Maintains aspect ratio based on height */
	height: 150px; /* Set preferred height */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

.testimonials .testimonial-item .fa-star {
	font-size: 16px;
	font-weight: bold;
	margin: 10px 0 5px 0;
	color: gold;
}

.testimonials .testimonial-item h3 {
	font-size: 20px;
	font-weight: bold;
	margin: 10px 0 5px 0;
	color: #111;
}

.testimonials .testimonial-item h4 {
	font-size: 16px;
	color: #999;
	margin: 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
	color: #c3e8fa;
	font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
	display: inline-block;
	left: -5px;
	position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
	display: inline-block;
	right: -5px;
	position: relative;
	top: 10px;
}

.testimonials .testimonial-item p {
	font-style: italic;
	margin: 15px;
	padding: 10px;
	background: snow;
	position: relative;
	margin-bottom: 35px;
	border-radius: 6px;
	box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

@media (min-width: 900px) {
	/* Max must match breakpoints in Swiper Slider script */

	.testimonials .testimonial-item p {
		min-height: 300px; /* Controls height of entire slide so all are equal */
	}
}

@media (min-width: 1400px) {
	/* Max must match breakpoints in Swiper Slider script */

	.testimonials .testimonial-item p {
		min-height: 425px; /* Controls height of entire slide so all are equal */
	}
}

.testimonials .testimonial-item p::after {
	content: "";
	width: 0;
	height: 0;
	border-top: 20px solid #f0f0f0cc;
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	position: absolute;
	bottom: -20px;
	left: calc(50% - 20px);
}

.testimonials .swiper-pagination {
	margin-top: 20px;
	position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background-color: #fff;
	opacity: 1;
	border: 1px solid #149ddd;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
	background-color: #149ddd;
}

/**  Swiper Slider -  End **/

/**====================  Testimonials - End  ====================**/

/**====================  Affiliations - Start  ====================**/
.icon_bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-right: 5rem;
}

.icon_bar .icon {
	flex: 1 1 16.66%; /* 6 icons per row on wide screens */
	text-align: center;
}

.icon_bar .icon img {
	max-width: 200%;
	height: auto;
}

@media (max-width: 1200px) {
	.icon_bar .icon {
		flex: 1 1 33%; /* 3 icons per row for screens < 1200px */
	}
}

@media (max-width: 768px) {
	.icon_bar .icon {
		flex: 1 1 50%; /* 2 icons per row for screens < 800px */
	}
}

@media (max-width: 400px) {
	.icon_bar .icon {
		flex: 1 1 100%; /* 1 icon per row for screens < 400px */
	}
}
/**====================  Affiliations - End  ====================**/

/**====================  Sticky Multi-Level Footer - Start  ====================**/
.container_footer {
	/*flex: 1; /* Sticks footer to bottom */
	margin-bottom: 1rem;
}

/* Generic styling */
.container_footer ul {
	list-style: none;
	margin-left: 1.25rem;
	padding-left: 0;
}

footer {
	background-color: var(--primary);
	color: var(--white);


	width: 100%; /* Add width: 100vw */
    	box-sizing: border-box; /* Add box-sizing */


}

footer a {
	text-decoration: none;
	color: #eee;
	padding: 1.25remn 0;
	line-height: 2rem;
}

footer a:hover {
	text-decoration: underline;
}

.ft-title {
	color: var(--white);
	font-size: 1.375rem;
	text-transform: uppercase;
	text-align: left;
	padding-bottom: 0.625rem;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: var(--border);
}

/* Footer main */
.ft-main {
	/* Parent Flex Container */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1.25rem 1.875rem;
}

.ft-main-item {
	/* Flex Item Container */
	flex: 1 1 23.5%; /* 4 icons per row on wide screens */
	justify-content: center; /* Centers horizontally */
  	align-items: center; /* Centers vertically */
	padding: 1.25rem;
}

.ft-main-item:last-child {
	margin-top: 2rem;
}

@media (max-width: 768px) {
	.ft-main-item {
		flex: 1 1 100%; /* 1 icon per row for screens < 400px */
	}
}

.ft-main-item ul {
	line-height: 1;
}

.ft-main-item ul li {
	text-align: left;
	float: left; /* Makes Flex List items break one item per line */
	clear: left; /* Makes Flex List items break one item per line */
}

.ft-main-item p {
	font-size: 0.895rem;
	max-width: 18rem; /* Controls paragraph width */
}

.crediticon {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url(../images/logos/credit_card_logos_275x45.png) no-repeat;
	margin-left: 10px;
}

/* Footer Social */
.ft-social {
	padding: 0 1.875rem 1.25rem;
}

.ft-social-list {
	display: flex;
	justify-content: center;
	border-top: 1px var(--border) solid;
	padding-top: 1.25rem;
}

.ft-social-list li {
	margin: 0.5rem;
	font-size: 1.5rem;
}

.ft-social-list li {
	margin: 0.5rem;
	font-size: 1.5rem;
}

.ft-social-list a:hover {
	transform: scale(1.3); /* Causes object to zoom */
	z-index: 2;
	border-radius: 50%; /* Creates circular background */
	background-color: var(--white);
	color: var(--primary);
}

/* Footer Legal */
.ft-legal {
	padding: 0.9375rem 1.625rem;
	background-color: var(--background-dark);
	/*width: 100%;*/
	min-height: 4rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0.125rem 0.125rem;
	font-size: small;
	text-wrap: balance;
	/*white-space: nowrap;*/
	justify-content: space-between;
}

.ft-legal a {
	padding: 0rem;
}

.ft-legal a:hover {
	color: var(--primary);
}

.ft-legal .container_left {
	width: calc(50% - 0.25rem);
	min-height: 1rem;
	text-align: left;
}

.ft-legal .container_right {
	width: calc(50% - 0.25rem);
	min-height: 1rem;
	text-align: right;
}

@media (max-width: 768px) {
	.ft-legal {
		flex-direction: column;
		justify-content: center;
	}

	.ft-legal .container_left {
		width: 100%;
		text-align: center;
		text-wrap: wrap;
	}

	.ft-legal a {
		/*text-align: center;*/
	}

	.ft-legal .container_right {
		width: 100%;
		text-align: center;
		text-wrap: wrap;
	}
}

/**====================  Sticky Multi-Level Footer - End  ====================**/


/**====================  Join Our Team - Employment Application Webpage - Start  ====================**/

/* Hero Container - Start */
.image-container {
	position: relative;
	width: 100vw;
	height: 56.25vw;
	max-height: 100vh;
	max-width: calc(100vh * (16 / 9));
	overflow: hidden;
}

.image-container img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* filter: grayscale(80%) brightness(150%); */
	display: block;
}

.clipped {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(130%);
	clip-path: circle(30% at 50% 50%);
	box-shadow: 0px 0px 30px 3px rgba(0, 0, 0, 0.2);
	animation: slidein 6s ease-in 1s infinite alternate both;
}

@keyframes slidein {
	0% {
		clip-path: circle(30% at 50% 50%);
	}

	20% {
		clip-path: circle(30% at 40% 50%);
	}

	40% {
		clip-path: circle(30% at 40% 40%);
	}

	60% {
		clip-path: circle(30% at 40% 50%);
	}

	80% {
		clip-path: circle(30% at 70% 50%);
	}

	100% {
		clip-path: circle(30% at 70% 70%);
	}

}

.back-text, .text-overlay {
	position: absolute;
	color: white;
	-webkit-text-stroke: 1px black; /* Outlines the text in black */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds shadow to text */
	z-index: 1000;
	top: 30%;
	left: 5%;
}

.back-text {
	mix-blend-mode: normal;
}

.text-overlay {
	/* Removed mix-blend-mode: difference; */
}

.text-overlay h1, .back-text h1 {
	font-size: 4vw;
	line-height: 1em;
	font-family: "Chonburi", cursive;
}

.text-overlay p, .back-text p {
	font-size: 3vw;
	line-height: 1em;
	font-family: "Playball", cursive;
}
/* Hero Container - End */

/* Top and Bottom Containers */
.top-container,
.bottom-container {
	width: 100%;
     box-sizing: border-box; /* Includes padding in width calculation */
	padding: 2rem;
	text-align: center;
}

.top-container {
	background-color: #ffffff;
}

.bottom-container {
	background-color: #cceeff;
}


/* Job Listing Section - Start */
.listing_container {
	width: 80%;
	background: white;
     background-color: rgb(128, 183, 33, 0.05);
     border: 2px groove var(--primary);
     padding: 2rem;
}

.listing_title h3 {
     color: var(--primary);
     text-align: center;
}

.listing_container h6 {
	margin: 1rem;
	padding: 0;
}

.listing_container ul {
	margin: 0rem 2rem;
}

.listing_container ul li {
	margin: 1rem 0rem;
}



.listing_meta {
     font-style: italic;
     text-align: right;
     margin-right: 1rem;
}
/* Job Listing Section - End */


/* Grid Container */


.grid-container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
	padding: 2rem;
	background-color: #FFF;
	border: 2px groove var(--primary);
     margin-top: 2rem;
	}

.grid-item,
.row-1.col-1,
.row-2.col-1, .row-2.col-2, .row-2.col-3,
.row-3.col-1, .row-3.col-2,
.row-4.col-1, .row-4.col-2,
.row-5.col-1, .row-5.col-2,
.row-6.col-1, .row-6.col-2, .row-6.col-3,
.row-7.col-1, .row-7.col-2, .row-7.col-3,
.row-8.col-1, .row-8.col-2, .row-8.col-3,
.row-9.col-1,
.row-10.col-1,
.row-11.col-1, .row-11.col-2, .row-11.col-3, .row-11.col-4,
.row-12.col-1,
.row-13.col-1,
.row-14.col-1, .row-14.col-2, .row-14.col-3, .row-14.col-4,
.row-15.col-1,
.row-16.col-1, .row-16.col-2,
.row-17.col-2 {
	padding: .5rem;
	border: 1px solid #CCC;
	text-align: center;
	display: flex;
     flex-direction: column; /* Ensure flex items stack vertically */
	justify-content: center;
	align-items: center;
     min-height: 2rem;
}

.row-8.col-1 {
     display: block;
}

.span-1 {
	grid-column: span 1;
	/*background-color: #ffcccc;*/
}

.span-2 {
	grid-column: span 2;
	/*background-color: #ff9999;*/
}

.span-3 {
	grid-column: span 3;
	/*background-color: #c0e42d;*/
}

.span-4 {
	grid-column: span 4;
	/*background-color: #ffcccc;*/
}

.span-6 {
	grid-column: span 6;
	/*background-color: #3c72f0;*/
}

.span-12 {
	grid-column: span 12;
	/*background-color: #8d3cf0;*/
}

.double-vertical {
	grid-row: span 2;
}

.row-1 {
	color: var(--primary);
	background-color: white;
	background-image: url(../images/backgrounds/header-bgnd.jpg);
	background-repeat: repeat-x;
     width: 100%; /* Ensure the row spans the full width */
}

.row-2,
.row-3,
.row-4,
.row-5,
.row-6,
.row-7,
.row-8,
.row-11,
.row-14,
.row-16,
.row-17 {
     background-color: white;
}

.row-9,
.row-10,
.row-12,
.row-13,
.row-15 {
     background-color: #80B523;
}

.row-10.col-1 h5,
.row-13.col-1 h5 {  /* Over-ride to reduce row height */
	margin: 0;
	padding: 0;
}

/* Google reCAPTCHA Widget Style Adjustments - Start */
.row-16.col-1 .recaptcha-wrapper {
     overflow: hidden;
}

.row-16.col-1 .g-recaptcha {
     transform-origin: top left;
}
/* Google reCAPTCHA Widget Style Adjustments - End */

.label-above {
     display: flex;
     flex-direction: column; /* Stack label and input vertically */
     align-items: center; /* Center horizontally */
     text-align: center; /* Center the label text */
}

.label-above label {
     width: 100%; /* Make label take full width of column */
     margin-bottom: 5px; /* Add some space between label and input */
}

/* Hide Unused Grid Rows */
.row-17.col-2,
.row-18,
.row-19,
.row-20,
.bottom-container {
	display: none;
}

/* Format for validation errors */
.error {
     color: red;
     font-weight: bold;
     margin-top: 5px;  /* Optional: Add some space */
     font-size: 0.9em;  /*optional: adjust size*/
     flex-basis: 100%;  /* Force the error span to take up full width */
     text-align: center;  /* Align the error message in the center */
     display: block;  /* Ensures all error messages are displayed on their own line */
}


@media screen and (max-width: 600px) {
	.grid-container {
		grid-template-columns: 1fr;
	}
               
	.grid-item,
     .row-1.col-1,
     .row-2.col-1, .row-2.col-2, .row-2.col-3,
     .row-3.col-1, .row-3.col-2,
     .row-4.col-1, .row-4.col-2,
     .row-5.col-1, .row-5.col-2,
     .row-6.col-1, .row-6.col-2, .row-6.col-3,
     .row-7.col-1, .row-7.col-2, .row-7.col-3,
     .row-8.col-1, .row-8.col-2, .row-8.col-3,
     .row-9.col-1,
     .row-10.col-1,
     .row-11.col-1, .row-11.col-2, .row-11.col-3, .row-11.col-4,
     .row-12.col-1,
     .row-13.col-1,
     .row-14.col-1, .row-14.col-2, .row-14.col-3, .row-14.col-4,
     .row-15.col-1,
     .row-16.col-1, .row-16.col-2,
     .row-17.col-2 {
		grid-column: span 1 !important;
	}

}
/**====================  Employment Application Webpage - End  ====================**/