/** 
 * Theme Name: CT Gabbert
 * Author: Central States Marketing
 * Author URI: https://www.centralstatesmarketing.com/
 * Description: This site was built by Central States Marketing. For more information about the site or this custom WordPress theme, you can contact Central States Marketing at: info@csm.marketing or call us at: 309-693-2345.
 * Version: 1.0.0
 *
 * @package ctgabbert
 * @charset "UTF-8"
 */

/**
 * Table of Contents
 * -----------------
 * 1. Global Settings
 * 2. Typography
 * 3. Utils
 * 4. Site Header
 * 5. Navigation Takeover
 * 6. Drawer
 * 7. Hero Section
 * 8. Our Services Section
 * 9. Projects Section
 * 10. Testimonials Section
 * 11. Swiper Carousels
 * 12. Contact Page
 * 13. Footer
 * 14. Media Queries
 */



/* ======================== */
/* 1. Global Settings */
/* ======================== */

:root {
	--primary-tan: #EEEBE6;
	--primary-yellow: #FFC632;
	--primary-dark-gray: #4E4E4E;

	--secondary-orange: #FF8025;
	--secondary-brown: #2D2623;
	--secondary-gray: #4E4E4E;
	--secondary-white: #FFFFFF;

	--primary: oklch(var(--primary-base));
	--secondary: oklch(var(--secondary-base));

	--shadow-color: oklch(var(--black-base) / 0.25);
	--shadow-color-hover: oklch(var(--black-base) / 0.4);

	--shadow: 0 0 10px var(--shadow-color);
	--shadow-hover: 0 0 10px var(--shadow-color-hover);

	--gutter: 2rem;

	/* --max-w-max: 96vw; */

	--max-w-max: 115.2rem;

	/* --max-w-max: 150rem; */

	--max-w-content: 82rem;
	--max-w-text: 50rem;

	--border-radius: 1rem;

	--ff-heading: 'Libre Baskerville', sans-serif;
	--ff-body: 'interstate', sans-serif;

	--fs-sm: clamp(0.73rem, 0.11vi + 0.7rem, 0.8rem);
	--fs-base: clamp(0.88rem, 0.29vi + 0.8rem, 1.06rem);
	--fs-md: clamp(1.05rem, 0.56vi + 0.91rem, 1.41rem);
	--fs-lg: clamp(1.26rem, 0.95vi + 1.02rem, 1.88rem);
	--fs-xl: clamp(1.51rem, 1.52vi + 1.13rem, 2.5rem);
	--fs-2xl: clamp(1.81rem, 2.32vi + 1.23rem, 3.32rem);
	--fs-3xl: clamp(2.18rem, 3.45vi + 1.31rem, 4.42rem);

	--transition: all 200ms ease-out;
}

/* === Reset === */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--ff-body);
	font-size: var(--fs-base);
}

.container {
	max-width: var(--max-w-max);
	margin: 0 auto;
	padding: 0 5rem;
}

/* Container Responsive */
@media (max-width: 768px) {

	/* For tablets and smaller devices */
	.container {
		padding: 2rem 3rem;
	}
}

@media (max-width: 480px) {

	/* For mobile phones */
	.container {
		padding: 2rem 1rem;
	}
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

b,
strong {
	font-weight: bolder;
}

embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* === Template Specific === */
.post-edit-link {
	display: none;
	width: fit-content;
	color: limegreen;
	text-transform: uppercase;
	border: 3px solid limegreen;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	margin: 1em;
	text-decoration: none;

	&:hover {
		color: white;
		background-color: limegreen;
	}
}

/* ======================== */
/* 2. Typography */
/* ======================== */



:where(h1, h2, h3, h4, h5, h6) {
	color: var(--primary);
	font-family: var(--ff-heading);
	line-height: 1;
}

h1 {
	color: var(--secondary-white);
	text-transform: uppercase;
	font-size: clamp(5.8rem, 5vw, 4rem);
	/* Responsive font size */
	margin: 0;
	letter-spacing: normal;
}

h2 {
	color: var(--primary-dark-gray);
	font-size: clamp(1.6rem, 4vw, 3.2rem);
	/* Responsive font size */
	margin: 0;
	font-weight: 400;
}

h3 {
	color: var(--primary-dark-gray);
	font-size: 1.2rem;
	/* Responsive font size */
	text-transform: uppercase;
	margin: 0;
	font-weight: 400;
	font-family: 'interstate', sans-serif;
}

h4,
h5,
h6 {
	font-family: var(--ff-heading);
	font-weight: 400;
	color: var(--secondary-white);
	text-transform: uppercase;
	margin: 0 0 1rem 0;
}

h4 {
	font-size: 1.3rem;
	font-family: "kumbh-sans-variable", sans-serif;
	text-transform: uppercase;
	color: var(--primary-dark-gray);
	font-weight: 600;
}

h5,
h6 {
	font-size: clamp(1.2rem, 2vw, var(--fs-md));
	/* Responsive */
}

p {
	font-size: 1rem;
	font-weight: 400;
	/* Responsive font size */
	line-height: 1.6;
	margin: 0;
	color: var(--primary-dark-gray);
	font-family: "kumbh-sans-variable", sans-serif;
}

ul li {
	font-family: "kumbh-sans-variable", sans-serif;
	font-weight: 500;
	letter-spacing: 1px;
}

hr {
	width: 100%;
	height: 2px;
	border: none;
	margin: 2em 0;
	background-color: var(--primary-dark-gray);
}

a {
/* 	display: block; */
	color: var(--primary-dark-gray);
	text-decoration: none;
	transition: var(--transition);
}

a:has(svg) {
	display: flex;
}

a.view-more i {
	color: var(--secondary-orange);
	text-transform: lowercase;
	font-family: "Libre Baskerville Italic", sans-serif;
	font-weight: 400;
	font-size: 1rem;
}

a.view-more-alt i {
	color: var(--secondary-white);
	text-transform: lowercase;
	font-family: "Libre Baskerville Italic", sans-serif;
	font-weight: 400;
	font-size: 1rem;
}

span.small-header {
	color: var(--secondary-orange);
	font-size: 1rem;
	text-transform: uppercase;
	font-family: "kumbh-sans-variable", sans-serif;
	font-weight: 500;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

span.small-header-yellow {
	color: var(--primary-yellow);
	font-size: 1rem;
	text-transform: uppercase;
	font-family: "kumbh-sans-variable", sans-serif;
	font-weight: 500;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

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

	span.small-header,
	span.small-header-yellow {
		font-size: 1rem;
	}

	.button {
		padding: 0.5rem 2rem;
	}

}


/* ======================== */
/* 3. Utils */
/* ======================== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.button {
	color: var(--primary-tan);
	padding: 0.8rem 3.5em;
	border-radius: 2rem;
	width: fit-content;
	text-transform: capitalize;
	font-size: 1rem;
	height: fit-content;
	background-color: var(--primary-dark-gray);
	font-family: "kumbh-sans-variable", sans-serif;
	font-weight: 300;
	border: 2px solid var(--primary-dark-gray);
}

.button:hover {
	background-color: var(--primary-yellow);
	color: var(--primary-dark-gray);
	border: 2px solid var(--primary-yellow);
}

.button-yellow,
.gform_button {
	color: var(--primary-dark-gray) !important;
	padding: 0.8rem 3.5em !important;
	border-radius: 2rem !important;
	width: fit-content !important;
	text-transform: capitalize !important;
	font-size: 1rem !important;
	height: fit-content;
	background-color: var(--primary-yellow) !important;
	font-family: "kumbh-sans-variable", sans-serif !important;
	font-weight: 300 !important;
	border: 2px solid var(--primary-yellow) !important;
}

.button-yellow:hover,
.gform_button:hover {
	color: var(--primary-yellow) !important;
	background-color: var(--secondary-brown) !important;
	border: 2px solid var(--secondary-brown) !important;
}

.button-outline {
	color: var(--secondary-white);
	padding: 0.8rem 3.5em;
	border-radius: 2rem;
	border: 2px solid var(--primary-yellow);
	width: fit-content;
	text-transform: capitalize;
	font-size: 1rem;
	height: fit-content;
	background-color: var(--primary-dark-gray);
	font-family: "kumbh-sans-variable", sans-serif;
	font-weight: 300;
}

.button-outline:hover {
	background-color: var(--primary-yellow);
	color: var(--secondary-brown);
}

a.button:hover {
	background-color: var(--primary-yellow);
	color: var(--primary-dark-gray);
}

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

	.button {
		padding: 0.5rem 2rem;
		text-align: center;
		min-width: 10rem;
	}

}

a i {
	color: var(--secondary-orange);
}

.btn {
	display: inline-block;
}

.btn:hover {
	position: static;
}

.wrapper-max {
	max-width: var(--max-w-max);
	margin-inline: auto;
}

.wrapper-content {
	max-width: var(--max-w-content);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrapper-text {
	max-width: var(--max-w-text);
	margin-inline: auto;
}

.fs-sm {
	font-size: var(--fs-sm) !important;
}

.fs-base {
	font-size: var(--fs-base) !important;
}

.fs-md {
	font-size: var(--fs-md) !important;
}

.fs-lg {
	font-size: var(--fs-lg) !important;
}

.fs-xl {
	font-size: var(--fs-xl) !important;
}

.fs-2xl {
	font-size: var(--fs-2xl) !important;
}

.fs-3xl {
	font-size: var(--fs-3xl) !important;
}

body .entry-header,
.entry-header,
.entry-footer {
	display: none !important;
}

/* .content {
	background-color: var(--primary-tan);
} */

.content-spacer {
	height: 5rem;
	width: 100%;
}



/**************************************************
 * 3. === Site Header ===
 **************************************************/

/* === Wrapper === */
.site-header-wrapper {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1001;
	background-color: var(--primary-tan);
	height: 114px;
}

/* === Header Layout === */
.site-header {
	position: relative;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	width: 100%;
	max-width: var(--max-w-max);
	margin: 0 auto;
	padding: 1rem 5rem;
	background: transparent;
	column-gap: 3rem;
}

.site-header .mobile-spacer {
	display: none;
}

/* === Logo === */
.site-logo a {
	display: block;
	line-height: 0;
}

.site-logo a img {
	width: 18rem;
}

/* === Navigation === */
.main-navigation {
	width: 100%;
	padding: 0;
}

#site-navigation {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 1rem;
}

#primary-menu.menu {
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
	width: 100%;
	gap: 1rem;
}

#primary-menu.menu li {
	list-style: none;
	font-size: 1rem;
	padding: 2rem 1rem;
}

#primary-menu.menu ul li a {
	text-decoration: none;
	font-size: 1rem;
}

ul#primary-menu li a {
	font-size: 1.25rem;
}

.site-header-wrapper.active .site-header #primary-menu.menu li a {
	color: var(--primary-dark-gray);
}

.site-header-wrapper.active .menu-item-has-children ul li a {
	color: #000000 !important;
}

/* === Buttons === */
.navigation-btn {
	padding: 0.5rem 2rem;
	border: 1px solid var(--secondary-white);
	border-radius: 2rem;
}

/* === Hamburger Menu === */
.hamburger-wrapper {
	cursor: pointer;
	padding: 1.25rem 0.75rem;
	display: none;
	position: relative;
	z-index: 11000;
}

.hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 3rem;
	row-gap: 4px;
	position: relative;
}

/* .hamburger-wrapper.active .hamburger {
	filter: invert(1);
} */

/* === Social Icons === */
.site-header .socials {
	display: flex;
	align-items: center;
	column-gap: 2rem;
}

.site-header .socials .social-icons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 1rem;
}

.site-header .socials .social-icons a {
	width: 1rem;
	height: 1rem;
}

.social-icons a svg {
	fill: var(--primary-yellow);
	transition: fill 0.3s ease;
	/* Smooth transition for color change */
}

.social-icons.active a svg {
	fill: white;
	/* Change fill color to white when takeover is active */
}

/* Scrolled */
.site-header-wrapper.scrolled {
	/* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* .site-header-wrapper.scrolled ul li a {
	color: black;
	transition: color 0.3s ease;
} */

/* 
.site-header-wrapper.scrolled ul.sub-menu {
	background-color: #ffffff;
} */

/* Responsive Navigation */

@media screen and (min-width: 1024px) and (max-width: 1150px) {
	.site-logo a img {
		width: 16rem;
	}
}

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

	.site-logo a img {
		width: 14rem;
	}

	.hamburger-wrapper {
		display: block;
	}

	.site-header .socials .social-icons {
		display: none;
	}

	ul.sub-menu {
		display: none !important;
	}

}

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

	.site-header {
		padding: 1rem 2rem;
	}

	/* Social Icons */
	.site-header .mobile-spacer {
		display: none;
	}

	.site-logo a img {
		width: 10rem;
	}
}

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

	.site-header-wrapper {
		min-height: auto;
		height: 96px;
	}

	.site-header {
		padding: 1rem 1rem !important;
	}

	/* Social Icons */
	.site-header .socials .social-icons {
		display: none;
	}

	.site-header .mobile-spacer {
		display: none;
	}

	.site-logo a img {
		width: 10rem;
	}


}

/* Sub-Menu */

:where(.menu, .sub-menu) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-item {
	position: relative;
}

.menu-chevron {
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.3s ease;
}

.menu-item-has-children:hover .menu-chevron,
.menu-item-has-children.open .menu-chevron {
	transform: rotate(180deg);
	/* Rotate when the submenu is open */
}

/* Base styles for the submenu */
.menu-item-has-children ul {
	width: 100%;
	display: none;
	/* Hide submenu by default */
	position: absolute;
	/* Position it relative to the parent */
	top: 100%;
	/* Place it directly below the parent item */
	left: 0;
	backdrop-filter: blur(8px);
	/* Add padding for spacing */
	list-style: none;
	/* Remove default list styles */
	/* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
	/* Optional shadow for a floating effect */
	z-index: 10;
	/* Ensure it appears on top of other elements */
}

/* Submenu links */
.menu-item-has-children ul li {
	background-color: var(--secondary-brown);
	font-size: 0.8rem;
	width: 100%;
	padding: 0 !important;
	border-bottom: 0.25px solid #eeebe62e;
}

#primary-menu.menu ul li:hover {
	background: #2d2623e3;
	transition: 0.3s ease-in-out;
	cursor: pointer;
}

.menu-item-has-children ul li a {
	/* Remove underline */
	/* Add spacing for each item */
	color: var(--primary-tan) !important;
	display: block;
	/* Ensure the links take up full width */
	transition: color 0.3s ease;
	/* Smooth hover effect */
	padding: 1rem !important;
}

.menu-item-has-children ul {
	border-top: 3px solid var(--secondary-orange);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
	width: 14rem;
	overflow: hidden;
	visibility: hidden;
	max-height: 0;
	display: block;
	/* Ensure the submenu is block-level by default */
}

.menu-item-has-children:hover>ul {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	max-height: 500px;
	/* Set a large enough value to accommodate submenu height */
}

.menu-item-has-children ul {
	max-height: 0;
	/* Reset height to collapse */
}

.menu-item-has-children ul li:hover a {
	background-color: var(--primary-light-gray);
}

.menu-item-has-children:hover>a::after,
.menu-item-has-children.open>a::after {
	transform: rotate(180deg);
	/* Rotate chevron on hover or when open */
}

.main-navigation .menu-item:has(.sub-menu):hover .sub-menu {
	display: flex;
	flex-direction: column;
}

@media (width > 1024px) {
	.menu-toggle {
		display: none;
	}

}

@media (width <=1024px) {
	.main-navigation {
		display: none;
	}

	.menu-chevron {
		display: none;
	}

}

/**************************************************
 * 4. === Navigation Takeover ===                   *
 **************************************************/
/* Base state: Hidden */
.navigation-takeover-wrapper {
	position: fixed;
	/* Fixed for full-screen layout */
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 1000;
	transform: translateX(100%);
	/* Hidden above the viewport */
	opacity: 0;
	/* Fully transparent */
	transition: transform 0.5s ease, opacity 0.5s ease;
	/* Smooth transitions */
	pointer-events: none;
	/* Prevent interaction when hidden */
	display: none !important;
}

/* Active state: Visible */
.navigation-takeover-wrapper.active {
	transform: translateY(0);
	/* Slide into view */
	opacity: 1;
	/* Fully opaque */
	pointer-events: auto;
	/* Enable interaction */
	width: 100%;
	backdrop-filter: blur(10px);
}


/* === Takeover Grid Layout === */
.navigation-takeover-wrapper .navigation-takeover {
	background-color: #eeebe6cf;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    row-gap: 1rem;
    max-width: var(--max-w-max);
    height: 100%;
    padding: 110px 5rem 2rem;
    align-items: flex-end;
    backdrop-filter: blur(10px);
}

/* === Left Section === */
.navigation-takeover .left {
	position: relative;
	/* Establish positioning context for ::after */
	width: 100%;
	height: 100%;
	padding: 2rem 1rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
/* 	border-top-left-radius: 14rem;
	border-top-right-radius: 14rem; */
	overflow: hidden;
	border: 2px solid var(--secondary-brown);
}

.navigation-takeover .left::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, transparent 20%, #00000098);
	z-index: 1;
	/* Ensures it appears on top of the background */
}

.navigation-takeover .left .content {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 1rem;
	text-align: center;
	align-items: center;
}

.navigation-takeover .left .content h3,
.navigation-takeover .left .content p {
	margin: 0;
	padding: 0;
	font-family: 'Libre Baskerville', sans-serif;
}

/* === Center Section === */
.navigation-takeover .center {
	width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    position: relative;
}

.navigation-takeover .center div::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, transparent 60%, #00000098);
	z-index: 1;
	/* Ensures it appears on top of the background */
}

.navigation-takeover .center .content {
	 width: 100%;
    height: 100%;
    padding: 2rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    align-items: center;
    z-index: 2;
    overflow: hidden;
	border: 2px solid var(--secondary-brown);
}

.navigation-takeover .center .content h3,
.navigation-takeover .center .content p {
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 2;
}

.navigation-takeover .center .content a {
	position: relative;
	z-index: 2;
}

/* === Right Section === */
.navigation-takeover .right {
	width: 100%;
    height: 100%;
    padding: 0rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 1rem;
}

/* Takeover Menu */
ul#takeover-menu,
.navigation-takeover .right ul {
	margin: 0;
    padding: 0px 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

ul#takeover-menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
}

.navigation-takeover .right ul li,
.right ul#takeover-menu li {
	list-style: none;
	font-size: 2rem !important;
}

.right ul#takeover-menu li {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--primary-tan) !important;
}

/* Center Takeover Menu */
.right .center-takeover-menu {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

.center-takeover-menu .menu-header p {
	font-size: 16px;
	margin-bottom: 0.4rem;
	opacity: 0.5;
}

.right #about-menu ul li {
	font-size: 1rem;
	color: var(--primary-tan);
}

#about-menu li a,
#facilities-menu li a {
	color: var(--secondary-brown);
}

/* Lower Takeover Contact */
.right .lower-takeover-contact {
	display: flex;
	justify-content: flex-end;
	column-gap: 1.5rem;
}

.right .lower-takeover-contact a svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--secondary-brown);
}

@media screen and (max-width: 1024px) {
	.navigation-takeover-wrapper {
		display: flex !important;
		justify-content: flex-end;
		right: 0;
		left: auto;
	}
	
	.navigation-takeover .right {
		padding: 0;
	}
	
	.navigation-takeover .right ul {
/* 		text-align: center; */
	}

	.navigation-takeover .right ul li,
	.right ul#takeover-menu li {
		font-weight: 600;
		font-size: 2.5rem !important;
	}
}

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

	.navigation-takeover-wrapper {
		width: 100vw;
	}

	.navigation-takeover-wrapper .navigation-takeover {
		grid-template-columns: 1fr;
		row-gap: 1rem;
		padding: 100px 2rem 2rem;
		display: grid;

	}

	.navigation-takeover .center {
		display: none;
	}

	.navigation-takeover .left {
		row-gap: 1rem;
		height: 15rem;
	}

	.navigation-takeover .right {
		row-gap: 0rem;
		padding: 0;
		justify-content: space-evenly;
	}

	.navigation-takeover .right ul li,
	.right ul#takeover-menu li {
		font-weight: 400;
		font-size: 1.6rem !important;
	}

	ul#takeover-menu {
		column-gap: 0;
	}
}

@media screen and (max-width: 550px) {
	
	ul#takeover-menu, .navigation-takeover .right ul {
		grid-template-columns: 1fr;
	}

	.center-takeover-menu #facilities-menu {
		display: none;
	}

	.right .center-takeover-menu {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr;
	}

	ul#about-menu {
		text-align: center;
	}

	#about-menu li a,
	#facilities-menu li a {
		font-size: 2rem;
		color: var(--secondary-brown);
	}

}

/**************************************************
 * 5. === Drawer ===                   *
 **************************************************/
.drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100dvh;
	background-color: var(--primary);
	z-index: 100000;
	transform: translateX(100%);
	transition: var(--transition);
}

.drawer.is-open {
	transform: translateX(0px);
}

.drawer-wrapper {
	display: flex;
	flex-direction: column;
	align-items: end;
	justify-content: space-between;
	height: 100%;
	padding: 2rem var(--gutter) 4rem;
}

.drawer-navigation {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

.drawer .menu-main-menu-container {
	height: 100%;
}

.drawer .menu {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.drawer .menu-item a {
	display: block;
	font-size: var(--fs-md);
	padding-block: 1rem;
	font-weight: 700;
}

.drawer .sub-menu .menu-item a {
	padding: 0.5rem 0;
}

.drawer .sub-menu {
	display: none;
}

.drawer .sub-menu .menu-item a {
	font-size: var(--fs-md);
}



/****************************/
/** == ** Front Page ** == **/
/***************************/

/****************************/
/** 6. == ** Hero Section ** == **/
/***************************/
.hero-wrapper {
	position: relative;
	height: 95vh;
	min-height: 30rem;
	max-height: 60rem;
	background-color: var(--primary-tan);
}

.hero-wrapper .hero {
	height: 100%;
	width: 100%;
	padding: 114px 5rem 2.8rem;
	overflow: hidden;
}

.hero-slider .slide,
.hero-slider {
	height: 100%;
	width: 100%;
}

.hero .hero-content {
	position: absolute;
	display: flex;
	justify-content: space-between;
	z-index: 2;
	margin: 0 auto;
	flex-direction: column;
	height: 100%;
	top: 0;
	padding: 114px 0rem 0rem;
}

.header-border {
	border-top: 3px var(--primary-dark-gray) solid;
	border-bottom: 3px var(--primary-dark-gray) solid;
	border-right: 3px var(--primary-dark-gray) solid;
	padding: 0.7rem 0.7rem 0.7rem 0rem;
}

.hero .header {
	background-color: var(--primary-tan);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 4rem 8rem 4rem 1rem;
}

.hero .header h2 {
	font-family: "Libre Baskerville Bold", sans-serif;
}

.hero-content .subheader {
	text-transform: uppercase;
	font-size: 1.4rem;
	font-family: "kumbh-sans-variable", sans-serif;
	font-weight: 500;
}


.hero-content .content {
	text-transform: capitalize;
	color: var(--primary-dark-gray);
	font-weight: 300;
	font-family: "Libre Baskerville", sans-serif;

}

.hero-content .content span {
	padding: 0rem 1rem;
}

.hero-content a span {
	text-transform: lowercase;
}

.subheader-tablet {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	display: none;
}

.subheader-tablet .buttons {
	display: flex;
	flex-direction: row;
	column-gap: 2rem;
	justify-content: center;
}

/* Hero Responsive  */

@media screen and (min-width: 2000px) {
	.hero-wrapper {
		height: 50rem;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1240px) {
	.hero-wrapper {
		height: 40rem;
	}
}

@media screen and (min-width: 850px) and (max-width: 1023px) {
	.hero-wrapper {
		height: 40rem;
	}

	.hero-content .header h1 {
		font-size: 5.8rem;
	}

	.hero-content .header h1 span {
		font-size: 4rem;
	}

	.hero-wrapper .hero .hero-content .subheader {
		display: none;
	}

	.hero-wrapper .hero .hero-content .subheader-tablet {
		display: flex;
	}
}

@media screen and (min-width: 793px) and (max-width: 849px) {
	.hero-wrapper {
		height: 40rem;
	}

	.hero-content .header h1 {
		font-size: 5.4rem;
	}

	.hero-content .header h1 span {
		font-size: 3.8rem;
	}

	.hero-wrapper .hero .hero-content .subheader {
		display: none;
	}

	.hero-wrapper .hero .hero-content .subheader-tablet {
		display: flex;
	}
}

@media screen and (min-width: 768px) and (max-width: 792px) {
	.hero-wrapper {
		height: 40rem;
	}

	.hero-content .header h1 {
		font-size: 5rem;
	}

	.hero-content .header h1 span {
		font-size: 3.4rem;
	}

	.hero-wrapper .hero .hero-content .subheader {
		display: none;
	}

	.hero-wrapper .hero .hero-content .subheader-tablet {
		display: flex;
	}
}

@media screen and (min-width: 740px) and (max-width: 767px) {

	.hero-content .header h1 {
		font-size: 5rem;
	}

	.hero-content .header h1 span {
		font-size: 3.4rem;
	}

	.hero-wrapper .hero .hero-content .subheader {
		display: none;
	}

	.hero-wrapper .hero .hero-content .subheader-tablet {
		display: flex;
	}
}

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

	.site-header {
		padding: 1rem 2rem;
	}

	.hero-wrapper .hero {
		height: 100%;
		width: 100%;
		padding: 114px 2rem 2rem;
		overflow: hidden;
	}

	.hero-content .header h1 {
		font-size: 10.8vw;
	}

	.hero .hero-content .header h1 span {
		font-size: 7.4vw;
	}

	.hero .header {
		padding: 3rem 4rem 3rem 1rem;
	}

	.hero .hero-content {
		position: absolute;
		display: flex;
		justify-content: space-between;
		z-index: 2;
		margin: 0 auto;
		flex-direction: column;
		height: 100%;
		top: 0;
		padding: 114px 0rem 2.8rem;
	}

}

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

	.hero-wrapper {
		min-height: auto;
		height: 36rem;
	}

	.hero-wrapper .hero {
		padding: 1rem 1rem 0;
	}

	.hero .header {
		padding: 3rem 4rem;
		gap: 0.8rem;
	}

	.hero .hero-content {
		display: flex;
		justify-content: flex-end;
		row-gap: 2rem;
		z-index: 5;
		align-items: center;
		margin: 0 auto;
		text-align: center;
		flex-direction: column;
		height: 100%;
		width: 100%;
		position: absolute;
		padding: 1rem 1rem 0 1rem;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.header-border {
		border-bottom: 0;
		padding: 0.7rem 0.7rem 0rem 0.7rem;
		border-left: 3px var(--primary-dark-gray) solid;
	}

	.hero-content .spacer {
		display: none;
	}

	.header .content {
		display: none;
	}

	.header .subheader {
		font-size: 1rem;
	}
}

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

	.hero-wrapper {
		min-height: auto;
		height: 40rem;
	}

	.hero-wrapper .hero {
		padding: 1rem 1rem 0;
	}

	.hero .header {
		padding: 2rem;
		gap: 0.8rem;
	}

	.hero .hero-content {
		display: flex;
		justify-content: flex-end;
		row-gap: 2rem;
		z-index: 5;
		align-items: center;
		margin: 0 auto;
		text-align: center;
		flex-direction: column;
		height: 100%;
		position: absolute;
		padding: 1rem 1rem 0 1rem;
	}

	.header-border {
		border-bottom: 0;
		padding: 0.7rem 0.7rem 0rem 0.7rem;
		border-left: 3px var(--primary-dark-gray) solid;
	}

	.hero-content .spacer {
		display: none;
	}

	.header .content {
		display: none;
	}

	.header .subheader {
		font-size: 1rem;
	}
}


/****************************/
/* 7. ** Our Services **  */
/***************************/
.services-wrapper {
	position: relative;
	background: var(--primary-tan);
}

/* Statistics section */
.services .categories {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	column-gap: 2rem;
	width: 100%;
	padding: 3rem 5rem 5rem;
}

.categories .card {
	width: 100%;
	text-align: center;
	background-color: var(--primary-dark-gray);
	border-top-left-radius: 10rem;
	border-top-right-radius: 10rem;
	height: 17rem;
	overflow: hidden;
}

.card .category {
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 3rem 1rem 2rem;
	height: 100%;
	width: 100%;
	position: relative;
}

.card:hover .category {
	backdrop-filter: blur(4px);
	transition: 0.5s ease-in-out;

}

.card:hover .category::before {
	border-top-left-radius: 10rem;
	border-top-right-radius: 10rem;
	transition: 0.5s ease-in-out;
	z-index: 1;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;

	/* Brighter orange with lower opacity */
	background-color: rgba(255, 140, 0, 0.3);
	/* Brighter orange with 30% opacity */

	/* Box shadow that starts black in the corners and fades to orange in the middle */
	box-shadow: inset 0 0 15px 5px rgba(0, 0, 0, 0.5), inset 0 0 30px 10px rgba(255, 140, 0, 0.5);

}



.categories .card a {
	color: var(--secondary-white);
	text-transform: uppercase;
	font-size: 1.2rem;
	text-shadow: 0 0 18px rgba(0, 0, 0, 2);
	font-family: "kumbh-sans-variable", sans-serif;
	font-weight: 600;
	letter-spacing: 1px;
	z-index: 2;
	position: relative;
}

.card.see-all {
	background-color: rgba(188, 100, 6, 0.916);
	/* Brighter orange with 30% opacity */
	display: none;
}

.categories h3,
.categories a {
	color: var(--secondary-white);
	text-transform: uppercase;
}

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

	.services .categories {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 1rem;
	}

	.card.see-all {
		display: block;
	}

}

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

	.services .categories {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2rem;
	}

	.card.see-all {
		display: block;
	}

}


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

	.services .categories {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2rem;
		padding: 2rem;
	}

	.categories .card {
		height: 12rem;
	}

}

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

	.categories .card a {
		font-size: 1rem;
	}

}

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

	.services .categories {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		padding: 2rem 1rem;
	}

	.categories .card {
		height: 12rem;
	}

	.card .category {
		padding: 3rem 1rem 2rem;
	}

}

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

	.categories .card {
		height: 10rem;
	}

	.categories .card a {
		font-size: 1rem;
	}

	.card .category {
		padding: 0;
		align-items: center;
	}


}



/* We Are Section */
.we-are-container {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: var(--primary-tan);
}

.we-are {
	padding: 1.5rem 5rem;
	display: grid;
	height: 100%;
	grid-template-columns: 1fr 0fr 1fr;
	gap: 4rem;
	min-height: max-content;
	align-items: center;
	position: relative;
	max-width: var(--max-w-max);
	margin: 0 auto;
}

/* .we-are::after {
	z-index: 1;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 5rem;
	height: 100%;
	background-color: rgba(255, 196, 0, 0.804);
} */

.we-are .content {
	display: flex;
	height: 100%;
	flex-direction: column;
	padding: 2rem 0rem 2rem 3rem;
	overflow: hidden;
	position: relative;
	z-index: 2;
	background: transparent;
}

.we-are .left {
	position: relative;
}

.we-are .left::before {
	z-index: 1;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, var(--primary-tan) 30%, transparent);
}


.we-are .left span {
	font-family: "kumbh-sans-variable", sans-serif;
}


.we-are .left h2 {
	font-weight: 600;
}

.we-are .left h2 {
	color: var(--primary-dark-gray);
	text-transform: none;
	font-size: 2.4rem;
	font-weight: 400;
	font-family: "kumbh-sans-variable", sans-serif;
	margin-bottom: 2.2rem;
}

.we-are .left p {
	color: var(--primary-dark-gray);
	text-transform: none;
	margin-bottom: 1.5rem;
}

.we-are .center {
	height: 14rem;
	width: 2.5px;
	opacity: 0.6;
	background-color: var(--primary-yellow);

}

/* .we-are .right {
	padding-right: 6rem;
} */

.we-are .right h2 {
	font-family: "Libre Baskerville Bold", sans-serif;
}

.we-are .right h2 span {
	font-family: "Libre Baskerville Italic", sans-serif;
}


.right-mobile {
	display: none;
}

.mobile {
	display: none;
}

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

	.we-are {
		padding: 2rem;
	}

	.we-are .content {
		padding: 1rem 0rem 1rem 1rem;
	}

	.we-are .left h2 {
		font-size: 2rem;
	}

} */

@media screen and (max-width: 768px) {
	.we-are {
		padding: 2rem;
		display: grid;
		height: 100%;
		grid-template-columns: 1fr;
		gap: 2rem;
		min-height: max-content;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		background-color: var(--primary-tan);
		max-width: var(--max-w-max);
		margin: 0 auto;
		background-position: center;
	}

	.we-are::before {
		z-index: 1;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, var(--primary-tan) 5%, transparent 20%);
	}

	.we-are::after {
		z-index: 1;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, var(--primary-tan) 15%, transparent 30%);
	}

	.we-are .content {
		display: flex;
		height: 100%;
		flex-direction: column;
		padding: 0rem;

	}

	.we-are .left::before {
		display: none;
	}

	.we-are .left h2 {
		font-size: 1.6rem;
		font-family: "kumbh-sans-variable", sans-serif;
	}

	.we-are .left h2.mobile {
		font-size: 1.6rem;
		font-family: "Libre Baskerville", sans-serif;
	}

	.we-are .left h2.mobile span {
		font-size: 1.6rem;
		font-family: "Libre Baskerville Italic", sans-serif;
		font-weight: 400;
	}



	.we-are .right-mobile {
		margin: 0 auto 3rem auto !important;
	}

	.right-mobile {
		display: block;
	}

	.we-are .left p {
		color: var(--primary-dark-gray);
		text-transform: none;
		margin-bottom: 2rem;
		text-align: justify;
	}

	.we-are .center {
		display: none;

	}

	.we-are .right {
		display: none;
	}

	.content a {
		margin: 0;
	}

	.mobile {
		display: block;
	}
}

@media screen and (max-width: 480px) {
	.we-are {
		padding: 2rem;
		display: grid;
		height: 100%;
		grid-template-columns: 1fr;
		gap: 2rem;
		min-height: max-content;
		align-items: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		background-color: var(--primary-tan);
		max-width: var(--max-w-max);
		margin: 0 auto;
		background-position: center;
	}

	.we-are::before {
		z-index: 1;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, var(--primary-tan) 5%, transparent 20%);
	}

	.we-are::after {
		z-index: 1;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, var(--primary-tan) 15%, transparent 30%);
	}

	.we-are .content {
		display: flex;
		height: 100%;
		flex-direction: column;
		padding: 0rem;

	}

	.we-are .left::before {
		display: none;
	}

	.we-are .left h2 {
		font-size: 1.6rem;
		font-family: "kumbh-sans-variable", sans-serif;
	}

	.we-are .left h2.mobile {
		font-size: 1.6rem;
		font-family: "Libre Baskerville", sans-serif;
		margin: 0 auto 3rem;
	}

	.we-are .left h2.mobile span {
		font-size: 1.6rem;
		font-family: "Libre Baskerville Italic", sans-serif;
		font-weight: 400;
	}


	.we-are .right-mobile {
		margin: 0 auto 3rem auto !important;
	}

	.right-mobile {
		display: block;
	}

	.we-are .left p {
		color: var(--primary-dark-gray);
		text-transform: none;
		margin-bottom: 2rem;
		text-align: justify;
	}

	.we-are .center {
		display: none;

	}

	.we-are .right {
		display: none;
	}

	.left .content a {
		margin: 0 auto;
	}

	.mobile {
		display: block;
	}
}


/* Stats Swiper */
.swiper-container.stats-slider {
	height: fit-content;
	margin-bottom: 3rem;
}

.stats-slider .swiper-wrapper {
	height: 100%;
}

.stats-slider .swiper-wrapper .swiper-slide {
	height: fit-content;
	background: #005c95;
	padding: 3rem 2rem;
	border-radius: var(--border-radius);
	border: 1px solid rgba(255, 255, 255, 0.223);
	text-align: center;
	display: block;
}

/* Swiper stats section */
.swiper-container {
	width: 100%;
	margin: 0 auto;
	height: 40vh;
	display: none;
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	z-index: 1;
	display: flex;
	transition-property: transform;
	box-sizing: content-box;
}

.swiper-slide {
	border-radius: var(--border-radius);
	width: 100%;
	height: 40vh;
	/* Matches the original height */
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	box-sizing: border-box;
	margin: 0;
	overflow: hidden;
}

.swiper-slide .content {
	position: relative;
	z-index: 2;
	/* Keeps content above the pseudo-element */
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	align-content: flex-start;
	flex-wrap: wrap;
	row-gap: 1rem;
	text-align: left;
}

.swiper-slide.right,
.swiper-slide.left {
	margin-right: 0px;
}

.swiper-slide-active,
.swiper-slide-next,
.swiper-slide-prev {
	margin: 0;
	/* No additional margins */
}

.swiper-wrapper {
	width: 100%;
}

.swiper-slide {
	flex: 1 0 100%;
}

.swiper-button-prev,
.swiper-button-next {
	display: none !important;
}

.swiper-pagination-bullets {
	display: none;
}

/* Services Responsive  */
@media screen and (min-width: 2000px) {
	.content-with-grid .grid {
		height: 40rem;
		width: auto;
	}

	.services-wrapper .join-us-wrapper {
		height: 40rem;
	}
}

@media screen and (min-width: 1201px) and (max-width: 1440px) {
	.services.container {
		padding-bottom: 10rem;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
	.services.container {
		padding-bottom: 8rem;
	}

	.content-with-grid .grid {
		width: 80vw;
		height: 20rem;
	}

	.swiper-container {
		display: none;
	}

}


@media screen and (min-width: 966px) and (max-width: 1023px) {
	.services-wrapper .services {
		padding-top: 3rem;
		padding-bottom: 8rem;
	}

	/* Stats section */
	.services .stats {
		margin-bottom: 6rem;
	}

	/* Content with Grid */
	.content-with-grid .services-content {
		width: 80vw;
	}

	.content-with-grid .grid {
		height: 40vh;
		column-gap: 1rem;
		padding-left: 0;
		padding-right: 0;
	}

}

@media screen and (min-width: 851px) and (max-width: 965px) {
	.services-wrapper .services {
		padding-top: 0rem;
		padding-bottom: 6rem;
	}

	/* Stats section */
	.services .stats {
		margin-bottom: 6rem;
	}

	/* Content with Grid */
	.content-with-grid .services-content {
		width: 80vw;
	}

	.content-with-grid .grid {
		height: 20rem;
		column-gap: 1rem;
		padding-left: 0;
		padding-right: 0;
	}

}

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

	.stats .left,
	.stats .center,
	.stats .right {
		width: 100%;
	}

	/* Content with Grid */
	.content-with-grid .services-content {
		width: 80vw;
	}

	.content .content-with-button h4 {
		font-size: 1.6rem;
	}


	.content-with-grid .grid {
		height: 40vh;
		column-gap: 1rem;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		display: none;
		flex-direction: row;
	}

	.swiper-container {
		display: block;
	}
}

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

	.services-wrapper .services {
		padding-bottom: 0rem;
	}

	.services .stats {
		grid-template-columns: 1fr 1fr;
		gap: 1.2rem;
		padding: 1rem;
	}

	.swiper-slide h3 {
		font-size: 10vw;
	}

	.stats-slider .swiper-wrapper .swiper-slide {
		padding: 3rem 1rem;

	}

	.services-content h2 {
		font-size: 12vw;
	}

	.swiper-container.stats-slider {
		margin-bottom: 2rem;
	}

}

/****************************/
/** 8. == ** Projects  ** == **/
/***************************/
.projects-wrapper {
	width: 100%;
	background: linear-gradient(to bottom, var(--primary-tan) 30%, white)
		/* Margin used to hide white-space under rounded corners on .hero-wrapper */
}

.projects-wrapper .projects {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 3rem;
	align-items: center;
	padding: 5rem;
}

.projects-header {
	margin: 0 auto;
	width: 100%;
	background-color: var(--primary-tan);
	position: relative;
	z-index: 1;
	width: fit-content;
	text-align: center;
	padding: 0 3rem;
}

.projects-header h2 {
	font-family: 'Libre Baskerville', sans-serif;
	font-size: 2.4rem;
}

.project-border {
	margin-top: 3rem;
	z-index: 0;
	background: transparent;
	border: 3px solid var(--primary-dark-gray);
	min-height: 36rem;
	width: 100%;
	position: absolute;
	padding: 0 5rem;
	max-width: 96rem;
	width: 95vw;
}

.projects .project-images {
	height: 34rem;
	display: grid;
	grid-template-columns: 1fr 2fr;
	width: 100%;
	column-gap: 1.5rem;
	max-width: var(--max-w-content);
	margin: 0 auto;
	position: relative;
	z-index: 2;
}


.project:hover {
	backdrop-filter: blur(2px);
}

.project-images .right {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;

}

.right .top {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 0.9fr 1fr;
	gap: 1.5rem;
}

.project {
	width: 100%;
	height: 100%;
}

.right .bottom {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	gap: 1.5rem;
}

.project .content {
	text-align: center;
	display: none;
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 2rem;
	background-color: rgba(0, 0, 0, 0.20);
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
	backdrop-filter: blur(2px);
}

.project:hover .content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.project .content p,
.project .content a {
	color: var(--secondary-white) !important;
}

.project .content p {
	font-size: 1.2rem;
	font-weight: 600;
	text-transform: uppercase;
}

/* Projects Responsive  */
@media screen and (min-width: 1270px) and (max-width: 1440px) {
	.join-us-wrapper .join-us {
		max-height: 26rem;
		min-height: 24rem;
	}

	.join-us .image img {
		top: -10rem;

	}
}

@media screen and (min-width: 1150px) and (max-width: 1269px) {
	.join-us-wrapper .join-us {
		max-height: 26rem;
		min-height: 24rem;
	}

	.join-us .image img {
		top: -8rem;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1149px) {
	.join-us-wrapper .join-us {
		height: 20rem;
		min-height: 24rem;
	}

	.join-us .image {
		width: 50%;
	}

	.join-us .image img {
		top: -6rem;
	}
}


@media screen and (min-width: 900px) and (max-width: 1023px) {
	.join-us-wrapper .join-us {
		max-height: 20rem;
		justify-content: center;
		min-height: 24rem;
	}

	.join-us .content {
		flex-wrap: nowrap;
	}

	.join-us .content h2 span {
		font-size: 2rem;
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: var(--secondary-white);
		color: transparent;
	}

	.join-us .image img {
		top: -6rem;
	}

	.join-us .content {
		width: 38%;
	}

	.join-us .image {
		width: 50%;
		padding-right: 0;
	}
}

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

	.join-us-wrapper .join-us {
		column-gap: 2rem;
		padding: 2rem 0;
		min-height: 22rem;
		height: 20rem;
	}

	.join-us .content {
		width: 40%;
		display: flex;
		justify-content: center;
		row-gap: 1rem;
		align-items: flex-start;
		height: 100%;
	}

	.join-us .image {
		width: 48%;
	}

	.join-us .image img {
		top: 0rem;
	}

}

@media screen and (min-width: 768px) and (max-width: 790px) {
	.join-us .content h2 {
		color: var(--secondary-white);
		font-size: clamp(2.2rem, 4vw, 4rem);
	}
}

@media screen and (min-width: 468px) and (max-width: 767px) {
	.join-us-wrapper {
		height: 80vh;
		min-height: 40rem;
	}

	.join-us-wrapper .join-us {
		padding: 3rem 1rem;
		text-align: center;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 0;
	}

	.join-us .content {
		width: 100%;
		align-items: center;
	}

	.join-us .image {
		width: 100%;
		padding-right: 0;
	}

	.join-us .image img {
		top: 0rem;
	}
}

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

	.projects-wrapper {
		width: 100%;
		/* Margin used to hide white-space under rounded corners on .hero-wrapper */
	}

	.projects-wrapper .projects {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 2rem;
		align-items: center;
		padding: 2rem 0;
	}

	.projects-header {
		text-align: center;
		width: fit-content;
		padding: 0 2rem;
	}

	.projects-header h2 {
		font-size: 1.6rem;
	}

	.projects .project-images {
		height: 100%;
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		gap: 0.6rem;
		max-width: var(--max-w-content);
		margin: 0;
	}

	.project-border {
		z-index: 0;
		background: transparent;
		border-top: 2px solid var(--primary-dark-gray);
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		min-height: 36rem;
		width: 100%;
		position: absolute;
		max-width: 96rem;
		margin-top: 2.3rem;

	}


	.project-images .left {
		height: 11rem;
	}


	.project:hover {
		backdrop-filter: blur(2px);
	}

	.project-images .right {
		display: flex;
		flex-direction: row;
		gap: 0.6rem;
		height: 100%;
	}

	.project.two,
	.project.five {
		height: 16rem;
	}

	.project.three,
	.project.four {
		height: 11rem;
	}

	.right .top {
		height: 100%;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	.project {
		width: 100%;
		height: 100%;
	}

	.right .bottom {
		height: 100%;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	.project .content {
		display: none;
		z-index: 2;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 1rem;
		background-color: rgba(0, 0, 0, 0.20);
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
		backdrop-filter: blur(2px);
		text-align: center;

	}

	.project:hover .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.project .content p,
	.project .content a {
		color: var(--secondary-white) !important;
	}

	.project .content p {
		font-size: 1rem;
		font-weight: 600;
		text-transform: uppercase;
	}

}



/****************************/
/** Testimonials **/
/***************************/
.testimonials-wrapper {
	background: linear-gradient(to right, var(--primary-tan) 50%, rgb(183, 178, 173));
	width: 100%;
}

.testimonials-wrapper .testimonials {
	padding-left: 0 !important;
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	margin-bottom: 5rem;
	margin: 0 auto;
}

.testimonials .left {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	overflow: hidden;
	position: relative;
	border-top-right-radius: 16rem;

}

.testimonials .left::before {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background-color: #0000005f;
	z-index: 2;
}

.testimonials .left .quotation-mark {
	max-width: 6rem;
	width: 100%;
	height: 5rem;
	top: 3rem;
	left: 2rem;
	position: relative;
	z-index: 3;
	object-fit: contain;
}

.testimonial-image {
	position: relative;
	max-width: 32rem;
	width: 100%;
	height: 100%;
	border-top-left-radius: 16rem;
	border-top-right-radius: 16rem;
	box-shadow: inset 0 0 15px 10px rgba(0, 0, 0, 0.4);
	z-index: 3;
	object-fit: cover;
}

.testimonials .right {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 5rem 2rem;
}

.testimonials .right h2 {
	margin-bottom: 4rem;
	font-family: 'Libre Baskerville', sans-serif;
	font-size: 2.5rem;
}

.testimonials .right p {
	margin-bottom: 1.5rem;
	max-width: 34rem;
}

.testimonials .right .names {
	font-size: 1.1rem;
	font-weight: 500;
	margin-bottom: 3rem;
}

.testimonials-wrapper .content-spacer {
	background: linear-gradient(to right, var(--primary-tan) 50%, white);
}

.slide-marker {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 40rem;
    padding-right: 1rem;
}

.slide-marker .group {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

.custom-pagination {
	display: flex;
	gap: 8px;
	margin-bottom: 0rem;
	align-items: center;
}

.custom-pagination .dot {
	width: 1.8rem;
	height: 2.5px;
	background: #ccc;
	transition: background 0.3s;
	border: none;
}

.custom-pagination .dot:hover {
	background: #525252a4;
	cursor: pointer;
}

.custom-pagination .dot.active {
	background: #525252a4;
	width: 4rem;
	transition: background 0.3s;
}

.quotation-mark-2 {
	width: 2.5rem;
	object-fit: contain;
}

.mobile-names {
	display: none;
}

.right-mobile {
	display: none;
}




/* Where We Operate Responsive  */
@media screen and (max-width: 1024px) {
	.testimonials-wrapper .testimonials {
		padding-left: 0 !important;
		display: grid;
		width: 100%;
		height: 100%;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		margin-bottom: 5rem;
		max-width: var(--max-w-max);
		margin: 0 auto;
	}

	.testimonials .right {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 3rem 2rem;
	}

	.testimonial-image {
		position: relative;
		max-width: 32rem;
		width: 100%;
		height: 100%;
		border-top-left-radius: 14rem;
		border-top-right-radius: 14rem;
		box-shadow: inset 0 0 15px 10px rgba(0, 0, 0, 0.4);
		z-index: 3;
	}

	.testimonials .left {
		border-top-right-radius: 14rem;
	}

	.quotation-mark {
		display: none;
	}

	.slide-marker .group {
		flex-direction: column;
	}
}

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

	.operate .explore-btn-mobile {
		display: none;
	}

	.operate .content {
		width: 80vw;
	}

	.operate .image {
		max-width: 70vw;

	}
}

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

	.operate-wrapper .operate {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.operate .explore-btn-mobile {
		display: none;
	}

	.operate .content {
		width: 80vw;
	}

	.operate .image {
		max-width: 70vw;

	}
}

@media screen and (max-width: 768px) {
	.testimonials-wrapper {
		background-color: var(--primary-tan) !important;
	}

	.testimonials-wrapper .testimonials {
		grid-template-columns: 1fr;
		padding: 0;
		gap: 0rem;
	}

	.testimonials .right h2 {
		margin-bottom: 7rem;
		font-size: 1.6rem;
	}

	.testimonial-image {
		max-width: 19rem;
		width: 100%;
		align-items: center;
		height: auto;
		top: -5rem;
		border-top-left-radius: 10rem;
		border-top-right-radius: 10rem;
	}

	.quotation-mark {
		position: relative;
		display: none;
	}

	.testimonials .left {
		overflow: visible;
		border-top-right-radius: 0;
		justify-content: center;
	}

	.testimonials .left::before {
		display: none;
	}

	.testimonials .right {
		text-align: center;
		padding: 3rem 0;
		gap: 2rem;
		background: linear-gradient(to top, var(--primary-tan) 50%, rgb(247, 243, 237));

	}

	.testimonials .right p {
		margin: 0 auto;
		margin-bottom: 0;
		padding: 1rem;
		background: transparent !important;

	}

	.testimonials .right .names {
		display: none;
		font-size: 1rem;
		font-weight: 500;
		margin: 0;
	}

	.mobile-names {
		padding: 0 1rem;
		display: flex;
		gap: 2rem;
		justify-content: center;
	}

	.mobile-names p.names {
		display: block !important;
		padding: 0;
	}

	.mobile-names .quotation-mark-2 {
		display: block;
		width: 2rem;
		height: 1.5rem;
	}


	.right .desktop,
	.left.desktop {
		display: none;
	}

	.right-mobile {
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow: hidden;
	}


	.right-mobile span,
	.right-mobile h2,
	.right p,
	.right a {
		padding: 0;
	}

	.mobile-background {
		height: 6rem;
		text-align: center;
	}

	.slide-marker {
		margin: 0 auto;
		padding: 0 2rem;
		justify-content: center;
	}

	.slide-marker .quotation-mark-2 {
		display: none;
	}

}

@media screen and (max-width: 480px) {
	.testimonials-wrapper {
		background-color: var(--primary-tan) !important;
	}

	.testimonials-wrapper .testimonials {
		grid-template-columns: 1fr;
		padding: 0;
		gap: 0rem;
	}

	.testimonials .right h2 {
		margin-bottom: 7rem;
		font-size: 1.6rem;
		width: 13rem;
	}

	.testimonial-image {
		max-width: 19rem;
		width: 100%;
		align-items: center;
		height: auto;
		top: -5rem;
		border-top-left-radius: 10rem;
		border-top-right-radius: 10rem;
	}

	.quotation-mark {
		position: relative;
		display: none;
	}

	.testimonials .left {
		overflow: visible;
		border-top-right-radius: 0;
		justify-content: center;
	}

	.testimonials .left::before {
		display: none;
	}

	.testimonials .right {
		text-align: left;
		padding: 3rem 0;
		gap: 2rem;
		background: linear-gradient(to top, var(--primary-tan) 50%, rgb(247, 243, 237));

	}

	.testimonials .right p {
		margin: 0;
		text-align: justify;
	}

	.testimonials .right .names {
		font-size: 1rem;
		font-weight: 500;
		display: none;
	}

	.right .desktop,
	.left.desktop {
		display: none;
	}

	.right-mobile {
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow: hidden;
	}

	.right-mobile .header {
		padding: 0 1rem;
	}

	.testimonials .content {
		padding: 0 1rem;
	}

	.testimonials .names {
		padding: 0 1rem;
	}

	.slide-marker {
		padding: 0 1rem;
		justify-content: flex-start;
	}

	p.test-content {
		padding: 0 1rem !important;
	}

	.mobile-names {
		padding: 0 1rem;
		display: flex;
		justify-content: space-between;
	}

	.right-mobile span,
	.right-mobile h2,
	.right p,
	.right a {
		padding: 0;
	}

	.mobile-background {
		height: 6rem;
		text-align: center;
	}

}

/****************************/
/** == ** Banner ** == **/
/***************************/
.banner-wrapper {
	width: 100%;
	position: relative;
	background-color: var(--secondary-gray);

}

.banner-wrapper .banner {
	padding: 1rem 5rem;
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	max-width: var(--max-w-content);

}

.banner .left {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.banner .left h2 {
	margin-bottom: 1rem;
	color: white !important;
	width: max-content;
	font-size: 2.5rem;
	font-family: 'Libre Baskerville', sans-serif;
}

.banner .right {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 1rem;
	padding: 5rem 0rem 5rem 2rem;
}

.banner .right h2 {
	margin-bottom: 4rem;
}

.banner .right p {
	margin-bottom: 1.5rem;
	max-width: 34rem;
}

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

	.banner .left h2 {
		width: 100%;
	}

}

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

	.banner .right {
		flex-direction: column;

	}

}

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

	.banner-wrapper .banner {
		padding: 3rem 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}

	.banner .left {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.banner .left h2 {
		width: 100%;
		margin-bottom: 1rem;
		font-size: 1.6rem;
		color: white !important;
	}

	.banner .right {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: row;
		gap: 1rem;
		padding: 0;
	}

	.banner .right h2 {
		margin-bottom: 2rem;
	}

	.banner .right p {
		width: 100%;
	}

	.content-spacer {
		display: none;
	}

	.right .button-yellow,
	.right .button-outline {
		padding: 0.6rem 2rem;
		/* width: 10rem; */
		text-align: center;
	}


}

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

	.right .button-yellow,
	.right .button-outline {
		padding: 0.6rem 2.5rem !important;
		width: auto;
	}

	.banner-wrapper .banner {
		padding: 3rem 1rem;
		text-align: left;
	}

	.banner .right {
		justify-content: center;
	}

}

/****************************/
/** == ** Contact Page ** == **/
/***************************/
.page-wrapper {
	background-color: transparent;
	overflow: hidden;
}

.page {
	background-color: var(--primary-tan);
}

.page .page-hero {
	height: 30rem;
	justify-content: center;
	display: flex;
}

/* Process section */
.process {
	width: 100%;
	position: relative;
	top: -9rem;
}

.process-border {
	background-color: transparent;
	border: 3px solid var(--primary-dark-gray);
	padding: 0.8rem;
	position: relative;
	max-width: 44rem;
	margin: 0 auto 4rem auto;

}

.process-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2rem;
	justify-content: center;
	padding: 3rem 1.5rem;
	background-color: var(--primary-tan);

}

.process-content h1 {
	text-align: center;
	text-transform: capitalize;
	font-family: 'Libre Baskerville', sans-serif;
	font-size: clamp(1.6rem, 6vw, 3rem);
	padding: 0;
	margin: 0;
	color: var(--primary-dark-gray);
}

.process-content .subheader p {
	font-family: 'Libre Baskerville Italic', sans-serif;
	font-size: 1rem;
	font-weight: 400;
}

.process-grid-wrapper {
	width: 100%;
}

.process-grid {
	padding: 2rem;
	margin: 0 auto;
	max-width: var(--max-w-content);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	width: 100%;
	text-align: center;
}

.process-grid .item {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.item .top {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 0;
	align-items: center;
	height: 90px;
}

.connect-line {
	height: 3px;
	background-color: var(--secondary-brown);
	width: 100%;
}

.item .number-header {
	background-color: var(--secondary-brown);
	border-radius: 10rem;
	min-width: 90px;
	min-height: 90px;
	justify-content: center;
	display: flex;
	align-items: center;
}

.process-grid .item h2 {
	color: var(--primary-tan);
	height: 100%;
	font-family: 'Libre Baskerville', sans-serif;
}

.process-grid .item p {
	color: var(--secondary-brown);
	padding: 0 1rem;
}

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

	.process {
		top: -8rem;
	}

	.process-border {
		border: 2px solid var(--secondary-brown);
		padding: 0.5rem;
		max-width: 40rem;
		margin: 0 auto 2rem auto;
	}

	.process-content {
		width: 100%;
		padding: 2rem;
		row-gap: 0.8rem;
	}

	.process-grid {
		grid-template-columns: 1fr;
		row-gap: 1rem;
		padding: 0rem;
	}

	.process-grid .item {
		gap: 2rem;
		padding: 0 2rem;
		flex-direction: row;
		align-items: center;
		text-align: left;
	}

	.item .top {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 0;
		align-items: center;
		height: 90px;
	}




}


/* Process Details Section */

.details {
	margin: -5rem auto 0 auto !important;
	max-width: var(--max-w-max) !important;
	width: 100% !important;
	background-color: var(--primary-tan) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2rem !important;
}

.details .header {
	text-align: center !important;
}

.details h2 {
	font-family: 'Libre Baskerville', sans-serif !important;
	font-size: 2.5rem;
}

.details-grid {
	display: flex !important;
	flex-direction: column !important;
}

.details-grid h2,
.details-grid p {
	color: var(--primary-tan) !important;
}

.details-grid .upper {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	width: 100% !important;
}

span.phone-number {
	font-size: 1.2rem;
	font-weight: 600;
}

.upper .started,
.upper .inspired {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;

}

.content-header {
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;
}

.started {
	background-color: #2D2623B2;
	padding: 3rem 8rem;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	height: 100%;
	justify-content: space-between;
}

.inspired {
	background-color: #2D2623CC;
	padding: 3rem 8rem 3rem 3rem;
}

.idea {
	background-color: #2D2623E5;
	padding: 3rem 8rem;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.idea span.small-header,
.excited span.small-header,
.inspired span.small-header,
.started span.small-header {
	margin: 0;
}

.excited {
	background-color: #2D2623;
	padding: 3rem 8rem 3rem 3rem;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.details-grid .lower {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
}

.lower .idea,
.lower .excited {
	width: 100%;
}

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

	.details-grid .upper,
	.details-grid .lower {
		grid-template-columns: 1fr;
	}

	.started {
		padding: 3rem 5rem;
	}

	.inspired {
		padding: 3rem 5rem;
	}

	.idea {
		padding: 3rem 5rem;
	}

	.excited {
		padding: 3rem 5rem;
	}

}

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

	.details {
		position: relative;
		top: -1rem;
	}

	.details h2 {
		font-size: 1.6rem;
	}

	.details-grid .upper,
	.details-grid .lower {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}

	.started {
		padding: 2rem 3rem;
	}

	.inspired {
		padding: 2rem 3rem;
	}

	.idea {
		padding: 2rem 3rem;
	}

	.excited {
		padding: 2rem 3rem;
	}

}

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

	.details {
		position: relative;
		top: -1rem;
	}

	.details h2 {
		font-size: 1.6rem;
	}

	.details-grid .upper,
	.details-grid .lower {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}

	.started {
		padding: 2rem 1rem;
	}

	.inspired {
		padding: 2rem 1rem;
	}

	.idea {
		padding: 2rem 1rem;
	}

	.excited {
		padding: 2rem 1rem;
	}

}



.contact-us {
	width: 100%;
	background-color: var(--primary-tan);
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 5rem;
	gap: 5rem;
}

.contact-us .left,
.contact-us .right {
	width: 100%;
}

.contact-us .right .image {
	width: 100%;
	height: 43rem;
	border-top-left-radius: 30rem;
	border-top-right-radius: 30rem;
	border: 3px solid var(--primary-dark-gray);
}

.contact-form {
	margin: 0 auto;
	width: 50vw;
	background-color: var(--secondary-white);
	padding: 4rem;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	/* Small downward shadow */
}


.contact-us .left h2 {
	font-family: 'Libre Baskerville', sans-serif;
	font-size: 2.5rem;
}

.contact-form .location-form {
	width: 100%;
}

/* Contact Responsive  */

@media screen and (min-width: 2000px) {
	.page .page-hero {
		height: 40rem;
	}

	.contact-form {
		width: 60vw;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1300px) {

	.page .page-hero {
		height: 30rem;
	}

	.contact-form {
		width: 80vw;
	}
}

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

	.contact-us .right .image {
		height: 40rem;
	}
}

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

	.page .page-hero {
		height: 30rem;
	}

	.contact-us {
		grid-template-columns: 1fr;
		padding: 2rem 3rem;
	}

	.contact-us .right .image {
		height: 30rem;
	}

}


@media screen and (max-width: 480px) {
	.page .page-hero {
		height: 20rem;
	}

	.contact-form {
		width: 100%;
		padding: 2rem;
	}

	.contact-us .left h2 {
		font-size: 1.6rem;
	}

	.contact-us {
		grid-template-columns: 1fr;
		padding: 2rem 1rem;
	}

	.contact-us .right .image {
		height: 20rem;
	}

}


/****************************/
/** == ** Footer ** == **/
/***************************/
.site-footer-wrapper {
	background-color: var(--secondary-brown);
	width: 100%;
}

.site-footer-wrapper .site-footer {
	display: grid;
	grid-template-columns: 0.35fr 1fr;
	margin: 0 auto;
	width: 100%;
}

.site-footer .left {
	background-color: var(--primary-tan);
	padding: 3rem 5rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.site-footer .right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.site-footer .right .footer-upper {
	background-color: var(--secondary-brown);
	padding: 3rem 5rem;
	display: flex;
	flex-direction: row;
	gap: 5rem;
}

.site-footer .footer-upper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 2fr;
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

ul#our-work-menu {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

ul#our-work-menu li a {
	color: var(--primary-tan);
	font-size: 1rem;
}

ul#quick-links li a {
	color: var(--primary-tan);
}

#contact-menu ul li a {
	color: #6e6e6e;
}


.contact-info .headquarters-info p {
	font-size: 1rem;
}

.contact-info .headquarters-info hr {
	display: none;
}

.contact-info .headquarters-info-mobile {
	display: none;
}

.contact-info .headquarters-info-mobile p {
	color: #6e6e6e;
}

.footer-menu-header p {
	text-transform: uppercase;
	font-weight: 600;
	color: var(--secondary-orange);
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
}

.footer-upper .menu ul {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.footer-upper .menu ul li {
	list-style: none;
	font-size: 1rem;
}

.footer-upper .menu ul li a {
	text-decoration: none;
	color: var(--secondary-orange);
}

/* dont forget to fix this */

.footer-upper .menu-quick-links-container ul {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.footer-upper .menu-quick-links-container ul li {
	list-style: none;
	font-size: 1rem;
}

.footer-upper .menu-quick-links-container ul li a {
	text-decoration: none;
}

.footer-upper .footer-logo {
	padding: 1rem;
}

.footer-logo a img {
	width: 16rem;
}

.left .contact-info {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	gap: 2rem;
}

.site-footer .footer-lower {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 1.5rem 5rem;
}

.site-footer .footer-lower p {
	color: var(--primary-tan) !important;
	display: inline-flex;
}

.site-footer .footer-lower p a {
	color: var(--primary-tan) !important;
	margin-left: 0.25rem;
	margin-right: 0.25rem;
	font-weight: 600;
}

.footer-socials {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	width: 100%;
	gap: 1rem;
	max-width: 10rem;
}

.footer-socials a {
	width: 100%;
}

.footer-socials a img {
	width: fit-content;
}

.footer-socials-mobile {
	display: none;
}

.footer-socials-mobile a svg {
	fill: #6e6e6e;
}

.footer-copyright p {
	margin: 0;
	font-size: 1rem;
	color: #6e6e6e;
}

/* Footer Responsive  */
@media screen and (min-width: 1024px) {}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.site-footer .footer-upper {
		padding: 3rem 2rem;
		column-gap: 2rem;
	}

	.footer-upper .footer-logo {
		padding: 1rem;
	}

	.site-footer .footer-lower {
		padding: 1.5rem 5rem
	}
}

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

	.site-footer-wrapper .site-footer {
		grid-template-columns: 0.5fr 1fr;
	}

	.site-footer .right .footer-upper {
		padding: 2rem 3rem;
		row-gap: 2rem;
	}

	.site-footer .footer-lower {
		padding: 1.5rem 3rem;
	}

	.footer-upper .footer-logo {
		padding: 0rem;
		display: block;
	}

	.footer-logo a img {
		width: 12rem;
	}

	.site-footer .left {
		padding: 3rem;
	}

	.site-footer .footer-lower p {
		display: block
	}
	
	.site-footer .footer-lower p a {
		margin-left: 0;
	}

}

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

	.site-footer .left {
		text-align: center;
	}

	.site-footer-wrapper .site-footer {
		grid-template-columns: 1fr;
	}

	.site-footer .left {
		padding: 3rem 2rem;
	}

	.footer-socials {
		margin: 0 auto;
	}

	.footer-menu-header p {
		margin-bottom: 1rem;
		font-size: 1rem;
	}

	.our-work-menu,
	.contact-info {
		text-align: center;
	}

	.contact-info .headquarters-info {
		display: grid;
		grid-template-columns: 1fr 0 1fr;
		align-items: center;
	}

	.contact-info .headquarters-info hr {
		display: block;
		height: 4rem;
		width: 2px;
		background-color: var(--primary-dark-gray);
	}

	.contact-info .headquarters-info h4,
	.contact-info .headquarters-info hr {
		margin: 0;
	}

	.site-footer .footer-lower {
		display: block;
		width: 100%;
		text-align: center;
		padding: 1.5rem 3rem
	}

	.site-footer .right .footer-upper {
		row-gap: 2rem;
		flex-direction: column;
		text-align: center;
	}

}

/* === Inside Pages === */
.kt-svg-icon-list-text {
	font-weight: 400 !important;
	font-size: 1rem !important;
	letter-spacing: normal !important;

}

.kt-svg-icon-list-text a {
	text-decoration: underline;
}

.nav-links {
	display: flex;
}

.kb-gallery-ul.kb-gallery-type-thumbslider {
	max-width: 1000px;
    margin: 0 auto !important;
}

.caption-wrap {
	display: none !important;
}

/* === 404 Error Page === */
.error-page {
	background-color: var(--primary-tan);
}

.error-content {
	display: flex;
	text-align: center;
	align-content: center;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	row-gap: 2rem;
	min-height: 100vh;
}

/* === Keyframes === */

/* === Live Fixes === */

/* === Gravity Forms === */
.gform-theme--foundation .gfield textarea.medium,
input {
	border: none !important;
	border-radius: 0 !important;
	font-family: "kumbh-sans-variable", sans-serif !important;
	font-size: 1rem;
	box-shadow: none !important;
}

.gform_wrapper.gravity-theme .gfield textarea.medium,  .ginput_complex select {
	border: 0 !important;
}

.gf-form-title {
	display: none !important;
}

.gform-theme--foundation .gform_fields {
	margin-top: 2rem;
	row-gap: 1rem !important;
}

.gform-footer.gform_footer.top_label {
	width: 100%;
	justify-content: flex-end;
}

label.gfield_label.gform-field-label {
	font-family: 'kumbh-sans-variable', sans-serif;
	font-size: 1rem;
	font-weight: 400;
}

textarea::placeholder {
	color: var(--secondary-gray);
	opacity: 0.4;

}

/* MetaSlider */
.flexslider {
	margin: 0 !important;
}

.slides li img {
	min-height: 40rem;
	object-fit: cover;
}

.splide__pagination {
	gap: 0.5rem;
}

.flex-control-paging li a:hover {
	background: #c5c5c5 !important;
}

.flex-control-paging li a.flex-active {
	background: #ffffff !important;
	width: 4rem !important;
	transition: background 0.3s;
}

.splide__pagination__page, .flex-control-paging li a {
	width: 2rem !important;
	height: 2px !important;
	border-radius: 0% !important;
	background: #c5c5c5a4 !important;
	transition: background 0.3s;
}

.splide__pagination {
	position: relative !important;
	bottom: auto !important;
}

.metaslider .flex-control-nav {
	border: 0;
	margin: 0 !important;
	list-style-type: none;
	position: absolute;
	display: flex;
	justify-content: flex-end;
	top: 44rem;
	right: 5rem !important;
	list-style: none !important;
	bottom: none !important;
	z-index: 8;
	height: fit-content;
}

/*  Testimonials Plugin */
.wpmtst-testimonial {
	margin: 0 !important;
}

.testimonial-heading {
	display: none;
}

.wpmtst-testimonial-image {
	height: 5rem;
	width: 5rem;
	border-radius: 100%;
    overflow: hidden;
	order: 1;
	margin: 0 auto 1rem auto;
	top: 0rem !important;
}

.wpmtst-testimonial-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.strong-view {
	margin-top: -8rem;
	margin-bottom: 3rem;
}

.strong-content {
	max-width: var(--max-w-max);
	margin: 0 auto;
	padding: 0 5rem;
}

.strong-grid {
	gap: 2rem;
	justify-content: normal !important;
	margin-bottom: 2rem;
}

.testimonial-inner {
	display: flex !important;
	flex-direction: column;
	padding: 2rem; 
	row-gap: 0.5rem;
    background: white;
	text-align: center;
}

.testimonial-name {
	order: 2;
	color: var(--secondary-brown);
	font-family: "Libre Baskerville Italic", sans-serif;
	font-weight: 600;
	font-size: 1.3rem;
}

.testimonial-content {
	border-bottom: 1px solid #eeebe6b5;
	padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.testimonial-content p {
	margin-bottom: 1rem;
}
.kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure .kb-gallery-image-contain.kadence-blocks-gallery-intrinsic img {
	object-fit: contain !important;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.page-numbers {
    padding: 1rem;
	color: rgb(45, 38, 35);
    font-size: 1rem;
    font-weight: 600;
    background: white;
	font-family: kumbh-sans-variable, sans-serif;
	text-transform: uppercase;
	cursor: pointer;
}

.page-numbers:hover {
  color: var(--secondary-orange);
}

 .readmore {
	color: var(--primary-dark-gray) !important;
	padding: 0.8rem 3.5em !important;
	border-radius: 2rem !important;
	width: fit-content !important;
	text-transform: capitalize !important;
	font-size: 1rem !important;
	height: fit-content;
	background-color: var(--primary-yellow) !important;
	font-family: "kumbh-sans-variable", sans-serif !important;
	font-weight: 300 !important;
	border: 2px solid var(--primary-yellow) !important;
	margin: 1rem auto; 
	 display: none !important;
}

.readmore:hover {
	color: var(--primary-yellow) !important;
	background-color: var(--secondary-brown) !important;
	border: 2px solid var(--secondary-brown) !important;
}

a.next, a.prev {
	display: none !important;
}

@media screen and (max-width: 768px) {
	.strong-content {
		padding: 0 3rem;
	}

}

@media screen and (max-width: 500px) {
	.strong-content {
		padding: 0 1rem;
	}

}