* {
  box-sizing: border-box;
}

body {
	margin:0;
	padding:0;
	overflow-x: hidden
	/*max-width:2000px;
	/*margin-left:auto;
	margin-right:auto;*/
	
}
img {
	max-width:100%;
	height:auto !important;
}
.left1 {
	float:left;
	width:33%;
	text-align:left;
	padding-left:20px;
	padding-top:10px;	
}
.left2 {
	float:left;
	width:21%;
	text-align:left;
	padding-left:20px;
	padding-top:10px;	
}

.left2a {
	float:left;
	width:21%;
	text-align:left;
	padding-left:20px;
	padding-top:10px;	
}

.left3 {
	float:left;
	width:23%;
	text-align:right;
	padding-left:20px;
	padding-top:10px;
	padding-right:50px;	
}

/*todo new section contennt november 2024 */

.grid-contain {
    display:grid;
    grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-content: center;
    grid-template-rows: auto;
}
.left-content {
    text-align: center;
    padding: 1rem;
}
.right-content {
    text-align: center;
    padding: 1rem;
}

.review-grid {
	display:grid;
	margin-top: 1rem;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	margin: 1rem;
	gap: 20px;
}

.box-rev {
	padding: 1px;
	
}
.bg-rev-color { 
	background-color: #F9FAFA;
}
.bg-rev-color2 { 
	background-color: #54595F;
}
.inner-rev {
	padding: 1rem;
}

/*todo finish new styles for carl update */

/*START GRID MAIN CONFIG*/
.grid-container {
	
	display:grid;
	max-width:1920px;
	margin-left:auto;
	margin-right:auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr auto ;
	/*grid-gap: 10px;*/
	grid-template-areas:
	"left left left right right right"
	"left-img1 left-img1 left-img1 right-text1 right-text1 right-text1 "
	"service-title service-title service-title service-title service-title service-title"
	"box1 box2 box3 box4 box5 box6"
	"box7 box8 box9 box10 box11 box12"
	"box13 box14 box15 box16 box17 box18"
	"test-title test-title test-title test-title test-title test-title"
	"testimonial testimonial testimonial2 testimonial2 testimonial3 testimonial3"
	"review1 review1 review2 review2 review3 review3"

	;
}


.slider {
    position: absolute;
    z-index: 999;
    text-align: center;
    /*background-color: rgb(5, 5, 5);*/
    width: 100%;
    color: rgb(253, 252, 245);
    min-height: 50px;
}

.wrap {
    position: relative;
    text-align: center;
    /*background-color: rgb(5, 5, 5);*/
    width: 100%;
    color: rgb(253, 252, 245);
    min-height: 50px;   
}

.clear  {
	clear: both;
}

/* OTHER PAGES BACKGROUND HEADER IMAGES */

.bg-images {

  background: url("../header-images/kitchen.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:700px;
  width:100%;
}

/* This is code for all other pages with the header image*/

.bg-kitchen  {

  background: url("../header-images/kitchen.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}


.bg-fitted  {

  background: url("../header-images/fitted-warrobes.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-sliding  {

  background: url("../header-images/sliding-wardrobes.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}


.bg-flooring  {

  background: url("../header-images/flooring1.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-decking  {

  background: url("../header-images/flooring.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-loft  {

  background: url("../header-images/loft-conversion.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-garage  {

  background: url("../header-images/garage-conversion.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:700px;
  width:100%;
}

.bg-garden  {

  background: url("../header-images/Garden-Room.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-maintenance  {

  background: url("../header-images/general.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-windows  {

  background: url("../header-images/windows.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-general  {

  background: url("../header-images/general17.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-tiling  {

  background: url("../header-images/tiling.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-bathroom  {

  background: url("../header-images/bath.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-shop  {

  background: url("../header-images/shop.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-cupboard  {

  background: url("../header-images/alcove.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}


.bg-worktop  {

  background: url("../header-images/worktop.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}

.bg-stairs  {

  background: url("../header-images/understairs.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}


.bg-doors  {

  background: url("../header-images/doors2.jpg") no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:750px;
  width:100%;
}


/*****************************/

/* START GRID CONFIG */

.left-text {
    padding:20px;
    grid-area:left;
    text-align:center;
	
}
.right-img {
    padding:20px;
    grid-area:right;
    background: url("../images/bg-right-images.jpg") no-repeat  scroll; 
	min-height: 850px;
    /* -webkit-background-size: cover;
    -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover; */
}
/*todo changed this as was pixellating on lower than 1200ox*/



.left-img1 {
    padding:20px;
    grid-area:left-img1;	
}

.right-text1 {
    padding:20px;
    grid-area:right-text1;	
}

.services-title {
   text-align:center;
   padding:10px;
   grid-area:service-title;
   padding-top:20px;
}
.box1 {
	/*padding:5px;*/
	grid-area: box1;
}

.box2 {
	/*padding:5px;*/
	grid-area: box2;
}


.box3 {
	/*padding:5px;*/
	grid-area: box3;
}

.box4 {
	/*padding:5px;*/
	grid-area: box4;
}

.box5 {
	/*padding:5px;*/
	grid-area: box5;
}
.box6 {
	/*padding:5px;*/
	grid-area: box6;
}

.box7 {
	/*padding:5px;*/
	grid-area: box7;
}

.box8 {
	/*padding:5px;*/
	grid-area: box8;
}

.box9 {
	/*padding:5px;*/
	grid-area: box9;
}

.box10 {
	/*padding:5px;*/
	grid-area: box10;
}

.box11 {
	/*padding:5px;*/
	grid-area: box11;
}

.box12 {
	/*padding:5px;*/
	grid-area: box12;
}

.box13 {
	/*padding:5px;*/
	grid-area: box13;
}
.box14 {
	/*padding:5px;*/
	grid-area: box14;
}
.box15 {
	/*padding:5px;*/
	grid-area: box15;
}
.box16 {
	/*padding:5px;*/
	grid-area: box16;
}
.box17 {
	/*padding:5px;*/
	grid-area: box17;
}
.box18 {
	/*padding:5px;*/
	grid-area: box18;
}

/* testimoinail styles added */

.test-header {
	text-align:center;
	grid-area:test-title;
	padding:10px;
	background-color:#F2F2F2;
}

.testimonials {
	grid-area:testimonial;
	text-align:center;
	background-color:#F2F2F2;
	padding:10px;
}
.testimonials2 {
	grid-area:testimonial2;
	text-align:center;
	background-color:#F2F2F2;
	padding:10px
}

.testimonials3 {
	grid-area:testimonial3;
	text-align:center;
	background-color:#F2F2F2;
	padding:10px
}

.review1 {
	padding:20px;
	background-color:white;
	grid-area: review1;
	text-align:center;
}

.review2 {
	padding:20px;
	background-color:white;
	grid-area: review2;
	text-align:center;
}

.review3 {
	padding:20px;
	background-color:white;
	grid-area: review3;
	text-align:center;
}

/* END GRID CONFIG */
/***********************************/



.parlax {
	position:relative;
	width:100%;
	height:500px; 
    background: url("../images/paralax-image.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.inner {
  margin-left:auto;
  margin-right:auto;
  padding-top:160px;
  width:80%;
  position: relative;
  text-align:center;
	
}

.map {
	position:relative;
	width:100%;
	
}

.fq {
	position:relative;
	width:100%;
	padding:20px;
	text-align:center;
}

.footer {
	position:relative;
	width:100%;
	padding:20px;
	text-align:center;
	background-color:#1A1B20;
	color:white;
	font-family: 'Poppins', sans-serif;
	
}

/******************************************/
/* START MEDIA QUERIES */

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


.left1 {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}
.left2 {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}
.left2 {
	
	width:98%;
	text-align:center;
	padding:1%;	
}

.left2a {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}

.left3 {
	width:98%;
	padding:1%;
	text-align:center;	
}

.main-title {
	font-family: 'Poppins', sans-serif;
	color:white;
	font-size:5em;
}

.sub-title{
	font-family: 'Poppins', sans-serif;
	color:#99CC00;
	font-size:4em;
}

.normal-txt{
	font-family: 'Red Hat Display', sans-serif;
	color:white;
	font-size:1.5em;
}








}

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

	

.left1 {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}
.left2 {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}
.left2 {
	
	width:98%;
	text-align:center;
	padding:1%;	
}

.left2a {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}

.left3 {
	width:98%;
	padding:1%;
	text-align:center;	
}

.main-title {
	font-family: 'Poppins', sans-serif;
	color:white;
	font-size:5em;
}

.sub-title{
	font-family: 'Poppins', sans-serif;
	color:#99CC00;
	font-size:4em;
}

.normal-txt{
	font-family: 'Red Hat Display', sans-serif;
	color:white;
	font-size:1.5em;
}

}


/**  MEDIA QUERIES  */

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

	/*todo new styles november 2024*/
	.grid-contain {
		display:grid;
		grid-template-columns: 1fr;
		align-items: center;
		justify-content: center;
		grid-template-rows: auto;
	}

	.review-grid {
		display:grid;
		margin-top: 1rem;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		margin: 1rem;
		gap: 20px;
	}


.left1 {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}
.left2 {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}
.left2 {
	
	width:98%;
	text-align:center;
	padding:1%;	
}

.left2a {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}

.left3 {
	width:98%;
	padding:1%;
	text-align:center;	
}


.grid-container {
	display:grid;
	margin-left:auto;
	margin-right:auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr auto ;
	grid-template-areas:
	"left left left left left left"
	"right right right right right right"
	"left-img1 left-img1 left-img1 right-text1 right-text1 right-text1"
	"service-title service-title service-title service-title service-title service-title"
	"box1 box1 box2 box2 box3 box3" 
	"box4 box4 box5 box5 box6 box6"
	"box7 box7 box8 box8 box9 box9" 
	"box10 box10 box11 box11 box12 box12"
	"box13 box13 box14 box14 box15 box15" 
	"box16 box16 box17 box17 box18 box18"
	"test-title test-title test-title test-title test-title test-title"
	"testimonial testimonial testimonial2 testimonial2 testimonial3 testimonial3"
	"review1 review1 review2 review2 review3 review3"
	;
}

}


/* MOBILE MEDIA QUERIES Nexus 7 Android portrait / Galaxy Tab */

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

.grid-container {
	
	display:grid;
	margin-left:auto;
	margin-right:auto;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr auto ;
	/*grid-gap: 10px;*/
	grid-template-areas:
	"left left left left left left"
	"right right right right right right"
	"left-img1 left-img1 left-img1 right-text1 right-text1 right-text1"
	"service-title service-title service-title service-title service-title service-title"
	"box1 box1 box2 box2 box3 box3" 
	"box4 box4 box5 box5 box6 box6"
	"box7 box7 box8 box8 box9 box9" 
	"box10 box10 box11 box11 box12 box12"
	"box13 box13 box14 box14 box15 box15" 
	"box16 box16 box17 box17 box18 box18"
	"test-title test-title test-title test-title test-title test-title"
	"testimonial testimonial testimonial2 testimonial2 testimonial3 testimonial3"
	"review1 review1 review2 review2 review3 review3"
	;
}


/*todo new section november 2024 update */

.grid-contain {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.review-grid {
	display:grid;
	margin-top: 1rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	margin: 1rem;
	font-size: 0.8rem;
	gap: 20px;
}

.left1 {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}
.left2 {
	
	width:98%;
	text-align:center;
	padding:1%;	
}

.left2a {
	width:98%;
	text-align:center;
	padding:1%;	
}


.left3 {
	
	width:98%;
	padding:1%;
	text-align:center;	
}

}


/* MOBILE MEDIA QUERIES Mobile iPhone 6plus */

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

.left1 {
	
	width:98%;
	padding:1%;
	text-align:center;
	
}
.left2 {
	
	width:98%;
	text-align:center;
	padding:1%;	
}
.left2a {
	
	width:98%;
	padding:1%;
	text-align:center;
}

.left3 {
	
	width:98%;
	text-align:center;
	padding:1%;	
}
.parlax {
	position:relative;
	width:100%;
	height:400px; 
    background: url("../images/paralax-image.jpg") no-repeat center center scroll; 
    -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}


/*.bg-images {

  background: url(slide1.jpg) no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:500px;
  width:100%;
}*/


/*
.bg-images1 {

  background: url(slide1.jpg) no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:400px;
  width:100%;
}

*/


.grid-container {
	
	display:grid;
	margin-left:auto;
	margin-right:auto;
	grid-template-columns:1fr;
	grid-template-rows: 1fr auto ;
	/*grid-gap: 10px;*/
	grid-template-areas:
	"left" 
	"right"
	"left-img1" 
	"right-text1"
	"service-title"
	"box1" 
	"box2" 
	"box3" 
	"box4"
	"box5" 
	"box6"
	"box7" 
	"box8" 
	"box9" 
	"box10" 
	"box11" 
	"box12"
	"box13" 
	"box14" 
	"box15" 
	"box16" 
	"box17" 
	"box18"
	"test-title"
	"testimonial"
	"testimonial2"
	"testimonial3"
	"review1"
	"review2" 
	"review3"
	;
}


.main-title {
	font-family: 'Poppins', sans-serif;
	color:white;
	font-size:4.7em;
}

.sub-title{
	font-family: 'Poppins', sans-serif;
	color:#99CC00;
	font-size:4em;
}

.normal-txt{
	font-family: 'Red Hat Display', sans-serif;
	color:white;
	font-size:1.5em;
}
}

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

/*.bg-images {

  background: url(slide1.jpg) no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:400px;
  width:100%;
}*/


.main-title {
	font-family: 'Poppins', sans-serif;
	color:white;
	font-size:4em;
}

.sub-title{
	font-family: 'Poppins', sans-serif;
	color:#99CC00;
	font-size:3em;
}

.normal-txt{
	font-family: 'Red Hat Display', sans-serif;
	color:white;
	font-size:1.5em;
}

}

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

/*.bg-images {

  background: url(slide1.jpg) no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:400px;
  width:100%;
}*/



.main-title {
	font-family: 'Poppins', sans-serif;
	color:white;
	font-size:3.8em;
}

.sub-title{
	font-family: 'Poppins', sans-serif;
	color:#99CC00;
	font-size:2.8em;
}

.normal-txt{
	font-family: 'Satisfy', cursive;
	font-family: 'Red Hat Display', sans-serif;
	color:white;
	font-size:1.5em;
}


}

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

.main-title {
	font-family: 'Poppins', sans-serif;
	color:white;
	font-size:3em;
}

.sub-title{
	font-family: 'Poppins', sans-serif;
	color:#99CC00;
	font-size:2em;
}

.normal-txt{
	font-family: 'Satisfy', cursive;
	font-family: 'Red Hat Display', sans-serif;
	color:white;
	font-size:1em;
}


}