/* 
Theme Name: Sapphire Carpets
Theme URI: 
Author: Michael Rosser
Version: 2.0 
Tags: Simple, effective 
*/ 
 /* Global Styles - Start */

	
	body {
		margin: 0;
		padding: 0;
		font-family: "poppins", sans-serif;
		line-height: 1.7;
		font-size: 16px;
		background-color: #eaeaea;
	}
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

	
	:root {
  --darkgreen: #112b27;
  --lightgreen: #c1e25f;
}
	

	
	
	img {
		max-width: 100%;
		height: auto;
		display: block;
	}
	
	
	.row_container {
		margin: 0 auto;
		max-width: 1100px;
		height: auto;
	}

.paragraph {
	margin: 0 auto;
	max-width: 1000px;
	overflow: hidden;
}

.previous_works {
	margin: 0 auto;
	max-width: 1000px;
	overflow: hidden;
}

 .white_grass_works {
			 height: 113px;
			 background-image: url("https://new.marksgrasscuttingservices.com/wp-content/uploads/2025/03/grey_grass2.png");
			 background-repeat: repeat-x;
	 margin-top: -113px;
		 }

.paragraph h2 {
	color: #509542;
}

.section_container {
	padding: 10px;
			max-width: 1100px;
	margin: 0 auto;
	overflow: hidden;
}


.section_background {
	padding: 10px;
	overflow: hidden;
}
	
			/*GridCols*/
	*,
	*:before,
	*:after {
		box-sizing: inherit;
	}
	
	.col {
		padding:1em;
		margin: 8px;
	}
	
	h2 {
		
		padding: 0;
		margin: 0;
	}
	
		p {
		
		padding: 0;
		margin: 0;
	}

	
	[class*='col-'] {
		width:100%;
		float: left;
		min-height: 1px;
	}
	
	.col-mob-1 {width:8.33333%;}
	.col-mob-2 {width:16.66667%;}
	.col-mob-3 {width:25%;}
	.col-mob-4 {width:33.33333%;}
	.col-mob-5 {width:41.66667%;}
	.col-mob-6 {width:50%;}
	.col-mob-7 {width:58.33333%;}
	.col-mob-8 {width:66.66667%;}
	.col-mob-9 {width:75%;}
	.col-mob-10 {width:83.33333%;}
	.col-mob-11 {width:91.66667%;}
	.col-mob-12 {width:100%;}
	
	

	
	.header {
		height: auto;
		overflow: hidden;
		background-color:  var(--darkgreen);
		padding: 10px;
	}
	
.header_button_container {
	text-align: right;
}

	.icons {
		width: 25px;
		float: left;
		margin-right: 10px;
	}
	
	.details:link, .details:visited {
		color: var(--lightgreen);
		display: inline-block;
		text-align: center;
		text-decoration: none;
		transition: 0.3s;
	}
	
	.details:hover {
		color: #eaeaea;
	}
	
	.details p, .contact_us p {
		margin-bottom: 5px;
		font-size: 15px;
	}
	
	.logo {
		margin: 0 auto;
		width: 120px;
	}
	
	.nav {
		display: none;
	}
	
	.hero_overlay {
		height: 100%;
		background-color: rgba(17,43,39,0.79);
	}
	
	 .hero {
			 height: 480px;
			 position: relative;
		 background-size: cover;
		 background-position: center;
		 }
		 
		 
		 	.hero_text {
		position: absolute;
		top: 5%;
		color: white;
		left: 10px;
				padding: 0;
	}
	
	
		 
		 
		 .white_grass {
			 position: absolute;
			 bottom: 0;
			 left:0;
			 right: 0;
			 height: 113px;
			 background-image: url("https://new.marksgrasscuttingservices.com/wp-content/uploads/2025/03/grey_grass2.png");
			 background-repeat: repeat-x;
		 }
	
	.hero_text {
		padding: 10px;
		padding-top: 50px;
		color: white;
	}
	
	.hero_text h2 {
		font-size: 1.75em;
		font-family: "poppins", sans-serif;
font-weight: 900;
font-style: normal;
	}
	
	.header_button:link, .header_button:visited {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 20px;
		padding-right: 20px;
		background-color: var(--lightgreen);
		margin: 20px;
		display: inline-block;
		text-align: center;
		text-decoration: none;
		border-radius: 30px;
		color: var(--darkgreen);
		transition: 0.3s;
		font-weight:700;
	}
	
	.header_button:hover {
		background-color:#509542;
		color: var(--lightgreen);

	}

	.hero_button:link, .hero_button:visited {
		padding: 10px;
		background-color: var(--lightgreen);
		margin: 20px;
		display: block;
		text-align: center;
		text-decoration: none;
		border-radius: 30px;
		color: var(--darkgreen);
		transition: 0.3s;
		font-weight:700;
	}
	
	.hero_button:hover {
		background-color:var(--darkgreen);
		color: var(--lightgreen);

	}

.testimonials_button_container {
	text-align: center;
}

	.testimonial_button:link, .testimonial_button:visited {
		padding: 10px;
		background-color: var(--lightgreen);
		margin: 0 auto;
		display: inline-block;
		width: 200px;
		text-align: center;
		text-decoration: none;
		border-radius: 30px;
		color: var(--darkgreen);
		transition: 0.3s;
				font-weight:700;

	}
	
	.testimonial_button:hover {
		background-color:var(--darkgreen);
		color: var(--lightgreen);

	}
	
	
	.row1 {
		padding: 10px;
		position: relative;
		max-width: 1110px;
		margin: 0 auto;
		height: auto;
	}
	
	
	.midgreen {
		height: 113px;
		background-image: url("https://new.marksgrasscuttingservices.com/wp-content/uploads/2025/03/midgreen.png");
		background-repeat: repeat-x;
	}
	
	.row3 {
		background-color: #1e491f;
		text-align: center;
		height: auto;
		overflow: hidden;
		padding: 10px;
		padding-bottom: 95px;
	}
	
	.service_box {
		padding: 10px;
		background-color: var(--lightgreen);
		border-radius: 20px;
	}



	.service_box:link, .service_box:visited {
		padding: 10px;
		background-color: var(--lightgreen);
		margin: 0 auto;
		display: inline-block;
		text-align: center;
		text-decoration: none;
		border-radius: 30px;
		color: var(--darkgreen);
		transition: 0.3s;
		width:100%;
	}
	
	.service_box:hover {
		background-color:var(--darkgreen);
		color: var(--lightgreen);

	}
	
	 .left_text {
			margin: 0 auto;
			 padding: 20px;
			 background-color: white;
			 border-radius: 20px;
			-webkit-box-shadow: 0 0 9px .1px #C7C7C7;
box-shadow: 0 0 9px .1px #C7C7C7;
		 }
		 
		 .right_image {
			  height: 400px;
			 			 border-radius: 80px;

			 background-image: url("https://new.marksgrasscuttingservices.com/wp-content/uploads/2025/03/hero.jpg");
			 background-position: center;
			 background-size: cover;
			
		 }
		 
	
	.reviews {
		padding: 10px;

	overflow: hidden;
	}
	
	
	.get_in_touch {
			 height: auto;
			 background-image: url("https://new.marksgrasscuttingservices.com/wp-content/uploads/2025/03/hero.jpg");
			 background-position: center;
			 background-size: cover;
		color: white;
	text-align: center;
		overflow: hidden;
	}
	
	.get_in_touch h2, .row3 .title h2 {
		font-size: 2.63em;
		color: white;
	}

	.contact_form h2 {
		font-size: 2.63em;
	}
	
	
	.light_green {
		color: var(--lightgreen);
	}
	
		.overlay {
		height: 100%;
		background-color: rgba(17,43,39,0.79);
			padding-top: 80px;
			padding-bottom: 80px;
			padding-left: 10px;
			padding-right: 10px;
	}
	
	.green_grass {
		height: 113px;
		background-image: url("https://new.marksgrasscuttingservices.com/wp-content/uploads/2025/03/green_grass.png");
		 background-repeat: repeat-x;
	}
	
	.awards {
		width: 40%;
		display: inline-block;
	}

.contact_form {
	padding:10px;
	-webkit-box-shadow: 0 0 8px 1px #BFBFBF;
box-shadow: 0 0 8px 1px #BFBFBF;
	margin: 0 auto;
	border-radius: 20px;
	background-color: white;
}

.testimonial_text {
			
			 padding: 20px;
			 background-color: white;
			 border-radius: 20px;
			-webkit-box-shadow: 0 0 9px .1px #C7C7C7;
box-shadow: 0 0 9px .1px #C7C7C7;
position:relative;
		 }
		 
		 .quote_image {
			 position: absolute;
			 left:10px;
			 right:0;
			 top:-13px;
			 width: 40px;
		 }
		 
		 
	
	.footer {
		height: auto;
		color: white;
		background-color: #112b27;
		overflow: hidden;
	}
	
	.contact_us {
		font-size: 15px;
	}
	
	.footer_info {
		overflow: hidden;
		width: 100%;
		font-size: 15px;
		padding: 10px;
	}
	
	.footer_logo {
		width: 40%;
		margin: 0 auto;
	}

	.my_link:link, .my_link:visited {
		color: var(--lightgreen);
		display: inline-block;
		text-align: center;
		text-decoration: none;
		transition: 0.3s;
	}
	
	.my_link:hover {
		color: #eaeaea;
	}
	
	 @media only screen and (min-width: 768px) {
        		.col-dt-1 {width:8.33333%;}
	.col-dt-2 {width:16.66667%;}
	.col-dt-3 {width:25%;}
	.col-dt-4 {width:33.33333%;}
	.col-dt-5 {width:41.66667%;}
	.col-dt-6 {width:50%;}
	.col-dt-7 {width:58.33333%;}
	.col-dt-8 {width:66.66667%;}
	.col-dt-9 {width:75%;}
	.col-dt-10 {width:83.33333%;}
	.col-dt-11 {width:91.66667%;}
	.col-dt-12 {width:100%;}
		 
		 .logo {
		margin: 0 auto;
		width: 180px;
	}
		 
		 
		 .hero_button:link, .hero_button:visited {
		padding: 10px;
		background-color: var(--lightgreen);
		margin: 20px;
		display: block;
		width: 200px;
		text-align: center;
		text-decoration: none;
		border-radius: 30px;
		color: var(--darkgreen);
		transition: 0.3s;
	}
		 
		 .contact_form {
	padding:30px;
	-webkit-box-shadow: 0 0 8px 1px #BFBFBF;
box-shadow: 0 0 8px 1px #BFBFBF;
	margin: 0 auto;
	width: 75%;
	border-radius: 20px;
	background-color: white;
}
		 
		 
		 	.service_box {
		padding: 10px;
		min-height: 130px;
		background-color: var(--lightgreen);
		border-radius: 20px;
	}
		 
		 .hero {
			 height: 620px;
			 position: relative;
		 }
		 
		 
		 	.hero_text {
		position: absolute;
		top: 35%;
		color: white;
		left: 180px;
				padding: 0;
	}
	
	.hero_text h2 {
		font-size: 3em;
	}
		 
		 
		 .white_grass {
			 position: absolute;
			 bottom: 0;
			 left:0;
			 right: 0;
			 height: 113px;
			 background-image: url("https://new.marksgrasscuttingservices.com/wp-content/uploads/2025/03/grey_grass2.png");
			 background-repeat: repeat-x;
		 }
		 
		 .nav {
			 position: absolute;
			 display: inherit;
			 margin: 0 auto;
			 background-color: #509542;
			 left: 15%;
			 right: 15%;
			 padding: 10px;
			 border-bottom-left-radius: 30px;
			  border-bottom-right-radius: 30px;
		 }
		 
		 
		  .testimonial_text {
			
			 padding: 20px;
			 background-color: white;
			 border-radius: 20px;
			-webkit-box-shadow: 0 0 9px .1px #C7C7C7;
box-shadow: 0 0 9px .1px #C7C7C7;
position:relative;
		 }
		 
		 .quote_image {
			 position: absolute;
			 left:10px;
			 right:0;
			 top:-13px;
			 width: 40px;
		 }
		 
		 
		 	.row1 {
		padding: 10px;
		position: relative;
		max-width: 1110px;
		margin: 0 auto;
		height: 500px;
	}
		 
		 .left_text {
			 position: absolute;
			 left: 0;
			 top: 30px;
			 width: 50%;
			 padding: 20px;
			 background-color: white;
			 border-radius: 20px;
			-webkit-box-shadow: 0 0 9px .1px #C7C7C7;
box-shadow: 0 0 9px .1px #C7C7C7;
			 z-index: 5;
		 }
		 
		 .right_image {
			  height: 400px;
			 			 border-radius: 80px;

			 background-image: url("hero.jpg");
			 background-position: center;
			 background-size: cover;
			 width: 70%;
			 position: absolute;
			 right: 0;
			 top: 60px;
		 }
		 
		 
		 .footer_logo {
		width: 100%;
		margin: 0 auto;
	}
		 
		 .contact_us {
			 
		 }
		 
		 
	}