@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600');

body {
	overflow-x: hidden;
	/* Hide horizontal scrollbar */
	background-color: #fffcf4;

}

hr.star-primaryz {
	margin: 0px auto 0px;
	padding: 0;
	border: 0;
	border-top: solid 5px;
	border-color: #584310;
	opacity: 100%;
	margin-bottom: 50px;
}


.all {
	text-decoration: none;
	color: white;
}

html {
	scroll-behavior: smooth;
}

.navbar-collapse {
	justify-content: center;
}

.navbar-nav {
	display: flex;
	flex-direction: column;
}


/* Border under nav bar */
nav.navbar.navbar-default.navbar-expand-lg.fixed-top.bottom-bar {
	border-bottom: 4mm groove rgba(122, 73, 0, 0.6);
}

.navbar-toggler {
	background-color: #b69851;
	/* Replace 'your-color' with the desired background color */
	border-color: none;
	/* Change the border color */
	;

}

.navbar-toggler-icon {
	color: #492e2e;
	/* Change the color of the three lines */
}

/* navbar */
.nav-item {
	padding-right: 30px;
	font-family: 'Roboto';
	font-size: 1.3em;
}

.nav-item a {
	padding: .5em .8em;
	color: rgba(255, 255, 255, .5);
	position: relative;
	text-decoration: none;
}

.nav-item a::before,
.nav-item a::after {
	content: '';
	height: 14px;
	width: 14px;
	position: absolute;
	transition: all .35s ease;
	opacity: 0;

}

.nav-item a::before {
	right: 0;
	top: 0;
	border-top: 3px solid #3E8914;
	border-right: 3px solid #2E640F;
	transform: translate(-100%, 50%);

}

.nav-item a:after {
	left: 0;
	bottom: 0;
	border-bottom: 3px solid #2E640F;
	border-left: 3px solid #3E8914;
	transform: translate(100%, -50%);

}

.nav-item a:hover:before,
.nav-item a:hover:after {
	transform: translate(0, 0);
	opacity: 1;

}

.nav-item a:hover {
	color: #3DA35D;
}

.page-container {
	padding-top: 110px !important;
}

/* START OF banner US SECTION */

.banner-container {
	margin-bottom: -72px;
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 0px;
	padding-right: 0px;
	background-color: #000;
}

.banner-background {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(236, 236, 236, 0) 600px, #2c2b26),
		url("/images/home/home_1.jpg");
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 700px;
	padding: 60px 5px;
}

.banner-content-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.banner-text {
	color: #ffffff;
	font-size: 3em;
	font-family: 'Roboto';
	letter-spacing: 4px;
	font-weight: 800;
	background-color: #000000af;
	text-align: right;
	padding: 20px 35px 20px 100px;
	word-spacing: 5px;
	z-index: 3;
	opacity: 0;
	animation: fadeRight 1s ease-in-out forwards;
}

.banner-text p {
	margin-bottom: 0.5rem;
}

.banner-estimates {
	margin-top: 20px;
	/* Space between text and estimates */
	color: #eef7c0;
	font-family: 'Playfair Display', serif;
	font-size: 2.5em;
	letter-spacing: 3px;
	font-weight: 1000;
	background-color: #000000af;
	padding: 10px 40px;
	white-space: nowrap;
	opacity: 0;
	animation: fadeRightEs 1s ease-in-out forwards;
}

.banner-left-corner {
	align-self: flex-start;
	/* Keeps button on the left */
	z-index: 5;
	opacity: 0;
	padding-top: 20px;
	padding-left: 20px;
	animation: fadeLeft 1s ease-in-out forwards;
}



/* START OF explore US SECTION */
.explore-bg {
	background-color: #2c2b26;
}

.explore-container {
	display: flex;
	flex-direction: row;
	overflow: hidden;
	background-color: #2c2b26;
	width: 95%;
	margin: auto;
	margin-top: 72px;
}

.explore-corner {
	position: absolute;
	background:
		linear-gradient(to right, #ffffff 7px, transparent 7px) 0 0,
		/*top right*/
		linear-gradient(to left, #ffffff 7px, transparent 7px) 100% 100%,
		/*bottom right*/
		linear-gradient(to bottom, #ffffff 7px, transparent 7px) 0 0,
		/*top bottom*/
		linear-gradient(to top, #ffffff 7px, transparent 7px) 100% 100%;
	/*bottom bottom*/
	background-repeat: no-repeat;
	background-size: 25px 25px;
	margin-top: 60px;
	margin-left: 20px;
}

.explore-top {
	margin-bottom: -5px;
}

.explore-text {
	font-family: 'Roboto';
	font-size: 3em;
	color: #b4edb9;
	margin-top: 0px;
	margin-left: 30px;
}

.mobile-patio {
	display: none;
}

.mobile-patio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stripe {
	object-fit: contain;
	margin-right: 15px;
	transition: transform 0.2s;
	/* Add a smooth transition for the transform property */
}

.stripe:hover {
	transform: scale(1.1);
	/* Enlarge the image by 10% on hover */
}

.explore-wrapper {
	color: white;
	flex-basis: 55%;
	margin-left: 20px;
	margin-top: 60px;

}

.explore-description {
	margin-top: 200px;
	font-size: 1.3em;
	font-family: 'Lato', sans-serif;
	/* margin-bottom: -60px; */
}

.explore-btn {
	font-weight: 100;
	background-color: #584310 !important;
	background-color: transparent;
	color: inherit;
	font-size: 1.5em;
	letter-spacing: .06rem;
	margin-bottom: 40px;
	color: white;
	padding: 15px;
	transition: transform 0.3s ease-in-out;

	font-weight: 700;
	margin-top: 50px;
}

.explore-btn:hover {
	transform: translate(10px, -10px);
}

.explore-link-icon {
	width: 25px;
}

.explore-image {
	display: flex;
	justify-content: flex-end;
	flex-basis: 55%;
	box-sizing: border-box;

}

.explore-image img {
	width: 30%;
	height: auto;
	object-fit: contain;
}

/* START OF SERVICE */
.home-service-bg {
	background-color: #fffcf4;
	justify-self: center;
	text-align: center;
}

.home-service {
	width: 80%;
	margin: auto;
}

.service-header {
	font-family: 'Roboto';
	font-size: 2.5em;
	font-weight: 600;
	color: #492e2e;
	padding-top: 20px;
	padding-bottom: 20px;
}

.service-header-description {
	font-size: 1.4em;
}

.service-container {
	margin-bottom: 50px;
	font-size: 1.4em;
	margin: auto;
}

.cata-service-container {
	margin: auto;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 40px;
	grid-auto-rows: 1fr;
}

.service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 8px;
	transition: transform 0.3s;
}

.service-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.service-card h2 {
	color: #d35400;
	font-size: 1.5rem;
}

.img-placeholder {
	background: #eee;
	width: 100%;
	height: 200px;
	display: block;
	margin-bottom: 15px;
	border-radius: 4px;
	object-fit: cover;
}

.service-card .btn {
	margin-top: auto;
	display: inline-block;
	background: #d35400;
	color: #fff;
	padding: 10px 20px;
	text-decoration: none;
	border-radius: 4px;
}

.service-card .btn:hover {
	background: #e67e22;
}

.service-card p {
	font-size: 1.1em;
}

.about-background {
	background-color: #fffcf4;
	padding-bottom: 80px;
}

.about-section {
	margin: auto;
	width: 70%;
}

.service-description {
	padding-top: 120px;
	font-size: 1.5em;
}

.sample-text {
	font-size: 1.6em;
	font-weight: 600;
	text-align: center;
}

.about-banner-background {
	display: flex;
    /* Change to row to make centering more intuitive, or keep column and fix the axes */
    flex-direction: column; 
    
    /* This centers the box VERTICALLY in column mode */
    justify-content: center; 
    
    /* This centers the box HORIZONTALLY in column mode */
    align-items: center; 
    
    min-height: 450px;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url('/images/about/flowers.jpg') center/cover no-repeat;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.who-banner {
	z-index: 3;
	font-family: 'Roboto', sans-serif;
	color: #fffcf4;
	padding: 2px 4px;
	background-color: rgba(0, 0, 0, 0.5);

	/* Animation remains the same */
	animation: fadeUp 1s ease-in-out forwards;
	opacity: 0;

	/* Responsive behavior */
	text-align: center;
	max-width: 90%;
	white-space: normal;
	/* Better for mobile than nowrap */
	margin: 0 auto;
	width: fit-content;

}

.who-banner h1 {
	font-size: 4em;
	margin: 0 auto;
}

.about-text h4 {
	color: #54a56c;
	font-family: 'Roboto';
	font-size: 1.8em;
}

.profile-sizing {
	width: 240px;
}

.test-header {
	color: #fffcf4;
	font-weight: 600;
	text-align: center;
	padding-bottom: 30px;
}

.test {
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(236, 236, 236, 0) 400px, #fffcf4), url("../images/about/ocean.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	padding: 50px 0;
	position: relative;

	font-size: 1.2em;
}


.test-container {
	display: flex;
	flex-wrap: wrap;
	/* Allows boxes to drop to the next line */
	justify-content: center;
	/* Centers boxes on smaller screens */
	gap: 20px;
	/* Adds consistent spacing between boxes */
	max-width: 1300px;
	/* Keeps the layout from getting too wide */
	margin: 0 auto;
	/* Centers the container itself */
	padding: 0 20px;
	gap: 50px;
}

.test-box {
	flex: 1;
	max-width: 30%;
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	padding: 40px;
	box-sizing: border-box;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.core-value {
	background-color: #fffcf4;
	padding-bottom: 10px;
}

.core-value-container {
	display: flex;
	flex-wrap: wrap;
	/* Allows items to wrap to next line on mobile */
	justify-content: center;
	/* Centers items horizontally */
	align-items: flex-start;
	/* Aligns items at the top */
	gap: 20px;
	/* Consistent spacing between boxes */
	margin-top: 50px;
	width: 100%;
}

.core-service-item {
	flex: 1 1 300px;
	/* Grow, Shrink, and Basis (300px is the "breaking point") */
	max-width: 350px;
	/* Prevents boxes from getting too wide on desktop */
	text-align: center;
	/* Centers text and images */
}

.core-value-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Centers the icon, heading, and text vertically */
	padding: 20px;
}

.core-value-box img {
	width: 80px;
	/* Standardized icon size */
	height: 80px;
	margin-bottom: 20px;
	object-fit: contain;
}

/* Cleanup: Removing your manual positioning IDs */
#qa,
#professional,
.customer {
	margin: 10px 0;
	/* Reset margins to be equal */
	font-family: 'Roboto';
	font-size: 26px;
	font-weight: 700;
	color: #54a56c;
}

.qa-p,
#professional-p,
.customers {
	font-family: 'Lato';
	font-size: 18px;
	color: #333;
	margin: 0 auto;
	max-width: 250px;
	/* Keeps text from stretching too wide */
}

footer {
	color: #fff;
	font-size: 18px;
}

footer h3 {
	margin-bottom: 30px;
}

footer .footer-above {
	padding-top: 20px;
	background-color: #3a5a3f;
}

footer .footer-col {
	margin-bottom: 50px;
}

footer .footer-below {
	padding: 15px 0;
	background-color: #283c2c;
}








/* START OF CONTACT US */

.body-style {
	padding-top: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container-fluid {
	max-width: 1200px;
}

.navbar-default {
	padding: 0;
	border: 0;
	background: #263a29;
	text-transform: uppercase;
	font-weight: 700;
}

.navbar-inverse {
	border: 0;
}


.navbar-default .navbar-brand {
	color: #4e3434;
	padding: 0;
}


.navbar-default .navbar-toggle {
	border-color: #1a242f;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background-color: #1a242f;
}


.navbar-default .navbar-toggle .icon-bar {
	background-color: #ffffff;
}


.navbar-default .navbar-nav>li>a {
	color: #ffffff;
}






.service-item-lg .service-link-lg {
	display: block;
	position: relative;
	margin: 0 auto;
	max-width: 1000px;
	text-align: center;
}

.service-item-lg {
	margin: 15px 10px;
}

.overlayText-bottom a,
a:hover,
a:focus,
a:active {
	outline: 0;
	color: #fff !important;
}

.overlayText-bottom {
	display: block;
	position: absolute;
	color: #fff;
	font-weight: bold;
	width: 100%;
	bottom: 0;
	text-align: center;
	background: rgba(0, 0, 0, 0.35);
}

strong {
	color: #18bc9c;
	font-weight: bold;
}

.about-text h2 {
	color: #492e2e;
	font-family: 'Roboto';
	font-size: 50px;
}

.about-text p {
	padding-top: 10px;
	color: #363b38;
	font-family: 'Lato';
	font-size: 20px;
}

.profile-text {
	color: #492e2e;
	font-family: 'Roboto';
	font-size: 50px;
}

.profile-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 50px;
}

.profile-desc {
	flex: 1;
}

.profile-image {
	flex: 0;
	margin-top: 10px;
	margin-right: 50px;
}

.img-size {
	width: 400px;
	height: 300px;
}

.services-header {
	margin-top: 50px;
	font-family: 'Roboto';
	font-weight: 600;
	font-size: 55px;
	color: #492e2e;
}

.dropdown-bg {
	background-color: #252410;
}

.dropdown-item-bg:hover {
	background-color: #584310 !important;
}

@media (max-width: 991.98px) {

	/* Force the dropdown to stay visible */
	.navbar-nav .dropdown-menu {
		display: block !important;
		position: static !important;
		float: none;
		width: 100%;
		background-color: transparent;
		/* Matches your nav background */
		border: none;
		margin-top: 0;
		padding-left: 1.5rem;
		/* Indent the sub-items for clarity */
	}

	/* Remove the arrow (toggle) icon on mobile since it's always open */
	.dropdown-toggle::after {
		display: none !important;
	}

	/* Optional: Make the "Services" header look like a label */
	.nav-link.dropdown-toggle {
		font-weight: bold;
		color: #333;
		/* Or your preferred brand color */
		pointer-events: none;
		/* Disables clicking the parent on mobile */
	}
}


@media (max-width: 1102px) {
	.explore-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0px;
	}

	.explore-wrapper {
		width: 80%;
		max-width: 900px;
		margin: auto;
		text-align: center;
	}

	.explore-description {
		margin-top: 20px;
		width: 100%;
	}

	.explore-image {
		display: none;
	}

	.mobile-patio {
		margin-top: 250px;
		width: 70%;
		/* Optionally, set a fixed width for the container */
		height: 200px;
		/* Set a fixed height for the container */
		overflow: hidden;
		/* Hide any overflowing content */
		display: flex;
		justify-content: center;
		/* Center horizontally */
		align-items: center;
		/* Center vertically */
		margin-left: 60px;
	}

	.explore-btn {
		font-size: 1.3em;
		margin-top: 20px;
	}

	.test-container {
		gap: 25px;
	}

	.test-box {
		flex: 1 1 100%;
		max-width: 400px;
	}

	.service-header-description {
		font-size: 1.2em;
	}

	.who-banner h1 {
		font-size: 3em;
	}
}


@media (max-width :680px) {
	.mobile-logo {
		width: 200px;
	}

	.page-container {
		padding-top: 65px !important;
	}

	.home-text {
		font-size: 2em;
	}

	.home-text p {
		margin-bottom: 0rem;
	}

	.home-service {
		width: 90%;
		margin: auto;
	}

	.explore-wrapper {
		width: 90%;
	}

	.about-section {
		width: 90%;
	}

	.explore-text {
		font-family: 'Roboto';
		font-size: 1.7em;
		color: #b4edb9;
		margin-top: 0px;
	}

	.stripe {
		margin-right: 5px;
	}

	.mobile-patio {
		margin-top: 160px;
		margin-left: 5px;
	}

	.mobile-patio img {
		width: 100%;
		max-height: 250px;
		object-fit: cover;
	}

	.explore {
		font-size: 15px;
		padding: 10px;
	}

	.explore-description {
		font-size: 1.2em;
	}

	.service-header {
		font-size: 2em;
	}

	.sample-text {
		font-size: 1.5em;
		font-weight: 600;
		text-align: center;
	}

	.profile-container {
		display: flex;
		flex-direction: column;
	}

	.about-banner-background {
		min-height: 200px;
	}
	.who-banner h1 {
		font-size: 2em;
	}
}


@keyframes fadeLeft {
	from {
		bottom: 70px;
		opacity: 0;
		transform: translateX(-20px);
		/* Adjust the value for the distance of the fade */
	}

	to {
		bottom: 70px;

		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeRight {
	from {
		top: 200px;
		opacity: 0;
		transform: translateX(20px);
		/* Adjust the value for the distance of the fade */
	}

	to {
		top: 200px;
		opacity: 1;
		transform: translateX(0);
	}
}


@keyframes fadeRightEs {
	from {
		top: 620px;
		opacity: 0;
		transform: translateX(20px);
		/* Adjust the value for the distance of the fade */
	}

	to {
		top: 620px;
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(50%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
		/* Adjust the initial position (horizontal, vertical) */
	}

	to {
		opacity: 1;
		transform: translateY(0);
		/* Adjust the final position (horizontal, vertical) */
	}
}