/* Style2 - Page-specific utilities and advanced grid system */
/* Core reset and base styles are now in base.css */

/************************************************
********* Desktop view (1024px and above) 
*************************************************/
@media only screen and (min-width: 1024px) {
	/* HTML5 Reset & Grid System */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video, img a {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 1.05rem;
		/* font: inherit; */
		vertical-align: baseline;
	}

	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	ins {
		text-decoration: none;
	}

	del {
		text-decoration: line-through;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	.hide {
		display: none;	
	}

	.alpha {
		margin-left: 0 !important;
	}

	.omega {
		margin-right: 0 !important;
	}

	/* Grid >> Global */
	.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_10, .grid_11, .grid_12 {
		display: inline;
		float: left;
		position: relative;
		margin-left: 10.0px;
		margin-right: 10.0px;
	}

	/* Grid >> 12 Columns */
	.container_12 .grid_1 {
		width: 60px;
	}

	.container_12 .grid_2 {
		width: 140px;
	}

	.container_12 .grid_3 {
		width: 220px;
	}

	.container_12 .grid_4 {
		width: 300px;
	}

	.container_12 .grid_5 {
		width: 380px;
	}

	.container_12 .grid_6 {
		width: 460px;
	}

	.container_12 .grid_7 {
		width: 540px;
	}

	.container_12 .grid_8 {
		width: 620px;
	}

	.container_12 .grid_9 {
		width: 920px;
	}

	.container_12 .grid_10 {
		width: 780px;
	}

	.container_12 .grid_11 {
		width: 860px;
	}

	.container_12 .grid_12 {
		width: 940px;
	}

	img {
		border: 0;
	}

	ul li {
		list-style: none;
	}

	/* Reusable nav-style button */
	.nav-button {
		display: inline-block;
  		background: linear-gradient(180deg, #6fcf97, #2f9e44);
  		color: #fff;
  		padding: 0.65rem 1.5rem;
  		border-radius: 999px;
  		font-weight: 600;
  		text-decoration: none;
  		transition: transform 0.15s ease, box-shadow 0.15s ease;

		/* display: inline-block;
		background: linear-gradient(to top, #1a7d31, #c1ffb4);
		color: #000000;
		padding: 10px 16px;
		border-radius: 8px;
		text-decoration: none;
		font-weight: bold;
		transition: background 0.3s, transform 0.2s, box-shadow 0.2s; */
	}

	.nav-button:hover {
		background: linear-gradient(to top, #1f8d3a, #d5ffd0);
		transform: translateY(-2px);
		box-shadow: 0 20px 8px rgba(0, 0, 0, .6);
		text-decoration: none !important;
	}

	.nav-button:active {
		background: linear-gradient(to top, #14652a, #a6f0a0);
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		text-decoration: none !important;
	}

	/* Menu link states */
	ul.cssmenu li.home a:hover,
	ul.cssmenu li.about_us a:hover,
	ul.cssmenu li.commercial a:hover,
	ul.cssmenu li.services a:hover,
	ul.cssmenu li.contact a:hover,
	ul.cssmenu li.careers a:hover,
	ul.cssmenu li.estimate a:hover {
		background: linear-gradient(to top, #1f8d3a, #d5ffd0);
		transform: translateY(-2px);
		box-shadow: 0 20px 8px rgba(0, 0, 0, .6);
	}

	ul.cssmenu li.home a:active,
	ul.cssmenu li.about_us a:active,
	ul.cssmenu li.commercial a:active,
	ul.cssmenu li.services a:active,
	ul.cssmenu li.contact a:active,
	ul.cssmenu li.careers a:active,
	ul.cssmenu li.estimate a:active {
		background: linear-gradient(to top, #14652a, #a6f0a0);
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		text-decoration: none !important;
	}

	ul.cssmenu li.about_us a.selected,
	ul.cssmenu li.commercial a.selected,
	ul.cssmenu li.services a.selected,
	ul.cssmenu li.contact a.selected {
		background: #1e7e34;
	}

	.topnav {
		display: none;
	}

	.topnav a {
		color: #000000;
		text-decoration: none;
	}

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

	.topnav:hover {
		background: linear-gradient(to top, #1f8d3a, #d5ffd0);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.displace {
		display: inline;
	}





	/* Content Boxes */
	#content_box_commercial {
		background: linear-gradient(to top, #1a7d31, #c1ffb4);
		border-radius: 15px;
		width: 920px;
		margin: 0 auto;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 10px 20px;
	}

	#content_box_commercial h2 {
		font-size: 2em;
		font-weight:bolder;
		margin: 0;
	}

	#content_box_commercial p {
		margin: 12px 0;
	}

	#content_box_commercial a {
		color: #000000;
		text-decoration: none;
	}

	#content_box_commercial a:hover {
		text-decoration: none;
		color: #000000;
	}

	.content-link:hover h2 {
		color: #000000;
		text-decoration: none;
	}

	#content_box_commercial:hover {
		box-shadow: 0 20px 8px rgba(0, 0, 0, .6);
		transition: box-shadow 0.15s ease;
	}





















	#content_reference {
		max-height: 1em;
		padding-bottom: 1rem;
	}

	#footer {
		font-size: 1rem;
		background-color: #676161;
		padding: 15px 0 20px 0;
		text-align: center;
		color: #f3f3f7;
		margin: 15px auto 0;
		width: 900px;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 15px;
	}

	#footer a {
		margin: 5px;
		padding: 5px 10px;
		color: #ffffff;
	}

	input#name, input#email, input#address, input#phone {
		width: 430px;
		padding: 5px;
		background: #fff;
	}

	input#submit {
		padding: 5px 10px;
	}

	#content form p {
		text-align: left;
		font-weight: bold;
	}

	/* Photo Banner Carousel */
	#photo_banner {
		position: relative;
		width: 100%;
		height: 400px;
		margin: 0 auto 0;
		overflow: hidden;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		background: #000;
	}

	.banner-slide {
		display: none !important;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		animation: fadeIn 0.5s;
	}

	.banner-slide.active {
		display: block !important;
	}

	.banner-slide picture {
		display: block;
		width: 100%;
		height: 100%;
	}

	.banner-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		aspect-ratio: 7 / 4;
	}

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

	.banner-prev, .banner-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(0, 0, 0, 0.6);
		color: white;
		border: none;
		font-size: 28px;
		padding: 12px 18px;
		cursor: pointer;
		border-radius: 4px;
		transition: background 0.3s;
		z-index: 20;
	}

	.banner-prev:hover, .banner-next:hover {
		background: rgba(0, 0, 0, 0.9);
	}

	.banner-prev {
		left: 10px;
	}

	.banner-next {
		right: 10px;
	}

	.banner-dots {
		position: absolute;
		bottom: 15px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 8px;
		z-index: 20;
	}

	.dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.6);
		cursor: pointer;
		transition: background 0.3s;
	}

	.dot.active {
		background: rgba(255, 255, 255, 1);
	}

	.dot:hover {
		background: rgba(255, 255, 255, 0.9);
	}

	/* Text Styling Utilities */
	.text-bold {
		font-weight: bold;
	}

	.text-clean {
		max-width: 1100px;
  		margin: 0 auto;
  		padding: .25rem 2rem;
		font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  		font-size: 16px;
  		line-height: 1.65;
  		color: #2f2f2f;


		/* margin-bottom: 1rem;
		text-align: center; */
	}

	/* Page Title Styles */
	.page-title {
		margin-top: 1rem;
		margin-bottom: 1rem;
		color: #ff4c00;
		font-size: 2.3em;
		font-weight: bold;
		text-align: center;
	}

	/* Page Subtitle */
	.page-subtitle {
		font-weight: bold;
		margin-bottom: 1rem;
		text-align: center;
		font-size: 1.1em;
	}

	/* Centered text with bold and 1.2em */
	.section-heading-bold {
		font-weight: bold;
		font-size: 1.2em;
	}

	.service_cards {
		background-color: rgba(255, 255, 255, 0.5); /* 90% opaque white */
		border-radius: 12px;
		padding: 1rem;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
		margin-bottom: 1rem;
		opacity: 0;
		animation: fadeUp 0.6s ease-out forwards;
	}

	/* Left-aligned bold section heading */
	.section-heading-left {
		
		font-size: 1.75rem;
  		font-weight: 700;
  		color: #f26722;
  		margin-bottom: 1rem;
  		letter-spacing: 0.5px;

		/* text-align: center;
		font-weight: bold;
		font-size: 1.2em;
		margin-bottom: 0;
		color: #ff4c00; */
	}



	.section-heading-left::after {
		content: "";
  		display: block;
  		width: 60px;
  		height: 3px;
  		background-color: #f26722;
  		margin-top: 0.5rem;

	}

	/* Figure caption styling */
	.figure-caption {
		text-align: center;
		font-weight: bold;
		font-size: 1.2em;
	}

	/* About Us right-side photos */
	#about_photos {
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: center;
		justify-content: flex-start;
	}

	#about_photos img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}

	.about-photo {
		width: 100%;
	}

	.about-photo figcaption {
		text-align: center;
		margin-top: 6px;
		font-size: 0.95rem;
		color: #333;
	}

	/* Form info box (green background) */
	.form-info-box {
		text-align: left;
		margin-left: 30px;
		border-radius: 10px;
		background-color: #caedca;
		width: 450px;
		padding: 20px 50px;
		line-height: 1.3em;
	}

	/* Wrapper for content sections */
	.content-wrapper {
		width: 600px;
		margin: 20px auto;
	}

	/* Footer padding */
	.footer-padding {
		padding: 15px 0px;
	}

	/* Header section padding */
	.header-section-padding {
		padding-left: 25px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-right: 20px;
	}

	/* Header section text */
	.header-section-text {
		font-family: 'arial', arial;
		font-size: 20px;
		color: #FFFFFF;
	}

	/* Paragraph quote styling */
	.quote-text {
		font-size: 1.4em;
		font-weight: bold;
		width: 600px;
		margin: 0 auto;
	}

	/* Quote attribution */
	.quote-attribution {
		color: #919191;
		font-size: 0.9em;
		text-align: right;
		margin-bottom: 5px;
	}

	/* Contact info styling */
	.contact-info-text {
		margin: 0;
	}

	/* Bold phone number */
	.phone-bold {
		font-weight: bold;
		color: #ff4c00;
	}

	/* Bold email */
	.email-bold {
		font-weight: bold;
	}

	/* Horizontal header background */
	.header-background-image {
		background-size: cover;
		background-position: center;
	}

	/* Div padding for content */
	.content-padding-top {
		padding: 200px 0px 0px 0px;
	}
}

/**********************************************
**** Tablet view (608px - 1023px) 
**********************************************/
@media only screen and (min-width: 608px) and (max-width: 1023px) {
	#footer {
		font-size: 0.95rem;
		background-color: #676161;
		padding: 15px 10px 20px 10px;
		text-align: center;
		color: #f3f3f7;
		margin: 15px auto 0;
		width: calc(100% - 20px);
		max-width: 900px;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}

	#footer a {
		margin: 5px;
		padding: 5px 10px;
		color: #ffffff;
	}
}

/*************************************************
*** Mobile view (max-width: 607px) 
**************************************************/
@media only screen and (max-width: 607px) {
	#footer {
		font-size: 0.85rem;
		background-color: #676161;
		padding: 12px 8px 16px 8px;
		text-align: center;
		color: #f3f3f7;
		margin: 15px auto 0;
		width: calc(100% - 10px);
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	#footer a {
		margin: 3px;
		padding: 4px 8px;
		color: #ffffff;
	}
}

/* Subtle Section Animation - fadeUp keyframes */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}