/* general */

*, *::before, *::after {
	box-sizing: border-box;
}
body{
	margin: 0;
	padding: 0;
	outline: none;
	/* font-family: Arial, Helvetica, sans-serif; */
}
.main-section, .footer-area, .footer-area-2{
	padding: 60px;
}
/* header */
.hero {
	display: table;
	height: 680px;
	width: 100%;
	position: relative;
	background: url("../img/background.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero2 {
	display: table;
	height: 600px;
	width: 100%;
	position: relative;
	background: url("../img/upholstery-cleaning-home.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero3 {
	display: table;
	height: 600px;
	width: 100%;
	position: relative;
	background: url("../img/rug-background.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero4 {
	display: table;
	height: 600px;
	width: 100%;
	position: relative;
	background: url("../img/air-duct-backgroundjpg.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero5 {
	display: table;
	height: 600px;
	width: 100%;
	position: relative;
	background: url("../img/tile-&-grout-background.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero6 {
	display: table;
	height: 600px;
	width: 100%;
	position: relative;
	background: url("../img/dryer-vent-background.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.hero7 {
	display: table;
	height: 600px;
	width: 100%;
	position: relative;
	background: url("../img/contact-background.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.header-item {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.header-item > h1 {
	text-align: left;
	font-weight: bolder;
	font-size: 5vw;
	line-height: 60px;
	color: #ffffff;
	text-shadow: 0px 0px 1px rgba(22, 22, 22, .5);
}

.header-item > h2 {
	text-align: left;
	font-weight: bold;
	font-size: 5vw;
	line-height: 60px;
	white-space: nowrap;
	color: #FFC480;
	text-shadow: 0px 0px 1px #161616;
}
.header-item > a {
	height: 45px;
	width: 150px;
	background-color: #ffffff;
	color: #006677;
	text-align: center;
	border: none;
	border-radius: 0px;
	margin: 10px 0px;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
}
.header-item > a:hover {
	color: #006677;
	background-color:rgba(255,255,255,1);
	border: 1px solid #006677;
	box-shadow: 5px 5px 0px rgba(255, 255, 255, .9),
							10px 10px 0px rgba(255, 255, 255, .7),
							15px 15px 0px rgba(255, 255, 255, .5),
							20px 20px 0px rgba(255, 255, 255, .3);
} 
.header-item > a:focus {
	color: #006677;
	background-color:rgba(255,255,255,1);
	border: 1px solid #006677;
	box-shadow: 5px 5px 0px rgba(255, 255, 255, .9),
							10px 10px 0px rgba(255, 255, 255, .7);
} 
.logo {
	float: left;
	width: 19%;
	height: auto;
	margin-left: 20px;
}

.btn-item {
	position: fixed;
	top: 0;
	left: 0;
	width:100%; 
	background:#ffffff; 
	max-height:90px; 
	line-height:50px;
	border-bottom:1px solid #dddddd;
	z-index:1000000;
}

/* menu */

.hamburger{
	background:none;
	position:absolute;
	top:6px;
	right:5px;
	line-height:45px;
	padding:5px 15px 0px 15px;
	color:#006677;
	border:0;
	font-size:2em;
	font-weight:bold;
	cursor:pointer;
	outline:none;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	z-index:1000;
  }
.cross{
	background:none;
	display: none;
	position:absolute;
	top:10px;
	right:2px;
	padding:0px 18px 0px 15px;
	color:#006677;;
	border:0;
	font-size:4em;
	line-height:65px;
	font-weight:bold;
	cursor:pointer;
	outline:none;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	z-index:1000;
  }
.menu {
	position: absolute;
	top: 75px;
	left: 0; 
	display: none;
	z-index:1000000; 
	font-weight:bold; 
	font-size:1em; 
	width:100%; 
	background:rgba(241, 241, 241, 1);  
	text-align:center; 
	transition: all .3s;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
}
.menu ul {
	margin: 0; 
	padding: 0;
	list-style-type: none; 
	list-style-image: none;
}
.menu li {
    display: block;
    padding: 0;
    border-bottom: #dddddd 1px solid;
    line-height: 50px;
}
.menu ul li a { 
	text-decoration:none;  
	margin: 0px; 
	color:#161616;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
}
.menu ul li a:hover {  
	cursor: pointer;
	color: #006677;
}
.menu ul li a:focus {  
	cursor: pointer;
	color: #006677;
}

/* coup-section */
.coup-section {
	background: rgba(232, 199, 170,.6);
	color: #ffffff;
	position: fixed;
	width: 250px;
	height: 130px;
	border-radius: 30px;
	top: 100px;
	left: -250px;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	z-index: 1000000000000000;
}
.coup-section::after {
	content: "+";
	position: absolute;
	color: #161616;
	text-align: center;
	font-size: 1.9em;
	top:45%;
	left: 108%;
	transform: translate(-50%,-50%);
	transform-origin: 70% -50%;
	width: 35px;
	height: 35px;
	background: #E8C7AA;
	transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	border-radius: 0px 10px 10px 0px;
}

.coup-section:hover {
	cursor: pointer;
	left: 10px;
}
.coup-container {
	margin: 5px;
}

	.item-cop-1 {
	grid-area: one;
  }
  .item-cop-2 {
	grid-area: two;
  }
  .item-cop-3 {
	grid-area: three;
  }
  .item-cop-4 {
	grid-area: four;
	}
	
  .item-cop-1,.item-cop-2,.item-cop-3,.item-cop-4 {
	text-align:center;
	padding: 10px 10px;
	}

  .cop-sec{
  display:grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-template-areas: "one";
  }


  /*main section*/

  .item-a {
	grid-area: header;
	text-align: justify;
	}
	.item-a > h1 {
		font-weight: bolder;
	}
	.item-a > p {
		font-size: 16px;
	}
	.item-b-1{
		grid-area: b-1;
		/* border: 1px solid black; */
	}
	.item-b-2{
		grid-area: b-2;
		/* border: 1px solid black; */
	}
	.item-b-3{
		grid-area: b-3;
		/* border: 1px solid black; */
	}
	.item-b-4{
		grid-area: b-4;
		/* border: 1px solid black; */
	}
	.item-b-5{
		grid-area: b-5;
	}

	.item-b-1,.item-b-2,.item-b-3 {
		padding: 0px 5px;
	}

	.item-b-1 {
		padding-left: 0px;
	}
	.item-b-5 {
		padding-right: 0px;
	}
  .item-b {
	grid-area: main;
	padding-top: 10px;
	padding-bottom: 20px;
	/* border: 1px solid black; */
	display: grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-template-rows: auto;
	grid-template-areas: 
		"b-1 b-2 b-3 b-4 b-4";
  }
  
  .main-part-1 {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto;
	grid-template-areas: 
		"header header header header"
		"main main main main";
  }

  .item-c {
	grid-area: part-1;
	/* border: 1px solid #161616; */
  }
  .item-d {
	grid-area: part-2;
	/* border: 1px solid #161616; */
  }
  .item-e {
	grid-area: part-3;
	/* border: 1px solid #161616; */
	padding: 5px 5px 5px 0px;
	}

		.item-f-1 {
		grid-area: part-1;
		/* border: 1px solid #161616;  */
		padding: 5px 5px 5px 5px;
		}
		.item-f-2 {
		grid-area: part-2;
		/* border: 1px solid #161616; */
		padding: 5px 0px 5px 5px;
		}

	.item-f {
	grid-area: part-4;
	/* border: 1px solid #161616; */
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	grid-template-areas:
					"part-1 part-2";
	}
  .main-part-2 {
		display: grid;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto;
		grid-template-areas: 
			"part-1 part-2"
			"part-3 part-4";
	}

  .item-c,.item-d {
		padding-right: 70px;
	}

  .item-c > h2,.item-d > h2 {
	font-weight: bolder;
	}
	
  .item-c > p,.item-d > p {
	font-size: 16px;
  }  

  .item-phone-area {
	grid-area: phone-1;
	/* border: 1px solid black; */
  }
  .item-phone-area-2 {
	grid-area: phone-2;
	justify-self: center;
	align-self: center;
	text-align: center;
	/* border: 1px solid black; */
	width: 200px;
	height: 200px;
  }
  .item-phone-area-2 > a {
	  
	  /* border: 1px solid black; */
	  font-size: 8em;
	  color: #00333C;
	  transition: all .5s;
	  -webkit-transition: all .5s;
	  -o-transition: all .5s;
	  -moz-transition: all .5s;

  }
  .item-phone-area-2 > a > i {
	animation: scaleup 2s infinite linear;
	-moz-animation: scaleup 2s infinite linear;
	-o-animation: scaleup 2s infinite linear;
	-webkit-animation: scaleup 2s infinite linear;
  }

  @-webkit-keyframes scaleup {
	0%{transform:scale(1);}
	33.33% {transform:scale(.6);}
	66.66% {transform:scale(.3);}
	99.99% {transform:scale(.1);}

  }
  
  @keyframes scaleup {
	0%{transform:scale(1);}
	33.33% {transform:scale(.6);}
	66.66% {transform:scale(.3);}
	99.99% {transform:scale(.1);}

  }
  .item-phone-area-2 > a:hover {
	  color: #006677;
  }

  .main-part-3 {
	padding-top: 60px;
	display: grid;
	grid-template-columns: 33.33% 33.33% 33.33%;
	grid-template-rows: auto;
	grid-template-areas: 
		"phone-1 phone-1 phone-2";
  }


	/* footer  */

	.item-g {
	grid-area: part-1;
	/* border: 1px solid #161616; */
	}

	.item-h {
	grid-area: part-2;
	/* border: 1px solid #161616; */
	}

	.item-i {
	grid-area: part-3;
	/* border: 1px solid #161616; */
	padding: 20px;
	}
		
footer {
	background-color: #00333C;
	background: linear-gradient( to bottom right #006677 35%, #00333C 65%); 
	background: -webkit-linear-gradient(to bottom right #006677 35%, #00333C 65%);
	color: #ffffff;
}

.footer-area {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	grid-template-areas: 
		"part-2 part-3";
}

.footer-area,.footer-area-2 {
	margin-top: -80px;
}

.item-g > div > div {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: transparent;
	margin: 5px;
	margin-top: 20px;
}

.item-g > div > div > a {
	text-decoration: none;
	color: #00333C;
}

.item-g > div > div > a > i {
	font-size: 2em;
	color: #ffffff;
	text-align: center;
}
.item-g > div > div:nth-child(1) {
	width: 50px;
	height: 50px;
	margin-left: 0px;
}

.item-h > h1 {
	font-size: 2em;
	font-weight: bolder;
}


	

	.item-j {
		grid-area: part-1;
		margin-top: 60px;
		justify-self: center;
		align-self: center;
		}
		.item-k {
		grid-area: part-2;
		/* border: 1px solid #161616; */
		margin-top: 60px;
		justify-self: center;
		align-self: center;
		}
		.item-l {
		grid-area: part-3;
		/* border: 1px solid #161616; */
		margin-top: 60px;
		justify-self: center;
		align-self: center;
		}

	.footer-area-2 {
		display: grid;
		grid-template-columns: 33.33% 33.33% 33.33%;
		grid-template-rows: auto;
		grid-template-areas: 
			"part-1 part-2 part-3";
		}


		

		

/*		.right-circle {
			
		}*/

		.img-area-bottom {
			display: grid;
			grid-template-columns: 33.33% 33.33% 33.33%;
			grid-template-rows: auto;
			grid-template-areas: "part-1 part-2 part-3";
		}
		.cir-one {
			grid-area: part-1;
			/*margin-top: -150px;*/
		}
		.cir-two {
			grid-area: part-1;
		}
		.cir-three {
			grid-area: part-1;
		}
		@media screen and (max-width: 860px) {
			/* header */
			.hero {
				display: table;
				height: 450px;
				background: url("../img/background.jpg") no-repeat center center fixed;
			}
			.hero2 {
				display: table;
				height: 450px;
				background: url("../img/upholstery-cleaning-home.jpg") no-repeat center center fixed;
			}
			.hero3 {
				display: table;
				height: 450px;
				background: url("../img/rug-background.jpg") no-repeat center center fixed;
			}
			.hero4 {
				display: table;
				height: 450px;
				background: url("../img/air-duct-backgroundjpg.jpg") no-repeat center center fixed;
			}
			.hero5 {
				display: table;
				height: 450px;
				background: url("../img/tile-&-grout-background.jpg") no-repeat center center fixed;
			}
			.hero6 {
				display: table;
				height: 450px;
				background: url("../img/dryer-vent-background.jpg") no-repeat center center fixed;
			}
			.hero7 {
				display: table;
				height: 450px;
				background: url("../img/contact-background.jpg") no-repeat center center fixed;
			}
			.header-item > h1 {
				display: none;
			}
			
			.header-item > h2 {
				display: none;
			}
		
			.header-item > a {
				outline: none;
				vertical-align: center;
				margin: 5px auto;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, .7);
			}
			.header-item > a:hover {
				outline: none;
				box-shadow: 5px 5px 0px rgba(255, 255, 255, .7),
										10px 10px 0px rgba(255, 255, 255, .5);
			} 
			.header-item > a:focus {
				outline: none;
				box-shadow: 5px 5px 0px rgba(255, 255, 255, .7),
										10px 10px 0px rgba(255, 255, 255, .5);
			} 
			/* logo */
			.logo {
				width: 25%;
			}
		
			/* menu */
		
			.hamburger{
				top:0px;
				right:5px;
				line-height:38px;
				font-size:1.5em;
				}
			.cross{
				top:0px;
				right:2px;
				font-size:2.5em;
				line-height:60px;
				}
			.menu {
				top: 55px;
				font-size:.8em; 
			}
			.menu li {
					line-height: 40px;
			}
		
			/* coup-section
			.coup-section {
				background: rgba(232, 199, 170,1);
				color: #161616;
				width: 70%;
				height: auto;
				left: -70%;
			}
			.coup-section::after {
				top:6.5%;
				left: 103%;
				transform: translate(-50%,-50%);
				transform-origin: 70% -50%;
				width: 35px;
				height: 35px;
			}	
			.item-cop-1,.item-cop-2,.item-cop-3,.item-cop-4 {
			text-align:center;
			padding: 3px 3px;
			}
			.cop-sec{
			display:grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: 50% 50%;
			grid-template-areas: "one two" "three four";
			}
		 */
			/*  main section*/
		
				.item-a {
				grid-area: header;
				text-align: left;
				}
				.item-a > h1 {
					font-size: 2em;
				}
				.item-a > p {
					font-size: 14px;
					text-align: justify;
				}
			
				.item-b-1,.item-b-2,.item-b-3,.item-b-4,.item-b-5 {
					padding: 5px 5px;
				}
				.item-b {
				grid-area: main;
				display: grid;
				grid-template-columns: 25% 25% 25% 25%;
				grid-template-rows: auto;
				grid-template-areas: 
					"b-4 b-4 b-4 b-4"
					"b-1 b-2 b-3 b-5";
				}
				
				.main-part-1 {
				display: grid;
				grid-template-columns: 25% 25% 25% 25%;
				grid-template-rows: auto;
				grid-template-areas: 
					"header header header header"
					"main main main main";
				}
		
				/* main-part-two  */
		.item-c {
			grid-area: part-1;
			}
			.item-d {
			grid-area: part-2;
			}
			.item-e {
			grid-area: part-3;
			padding: 5px 5px 5px 0px;
			}
		
				.item-f-1 {
				grid-area: part-1;
				padding: 5px 5px 5px 5px;
				}
				.item-f-2 {
				grid-area: part-2;
				padding: 5px 0px 5px 5px;
				}
		
			.item-f {
			grid-area: part-4;
			display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: auto;
			grid-template-areas:
							"part-1 part-2";
			}
			.main-part-2 {
				display: grid;
				grid-template-columns: 50% 50%;
				grid-template-rows: auto;
				grid-template-areas: 
					"part-1 part-1"
					"part-2 part-2"
					"part-3 part-3"
					"part-4 part-4";
			}
		
			.item-c,.item-d {
				padding-right: 0px;
			}
		
			.item-c > h2,.item-d > h2 {
			font-weight: bolder;
			font-size: 2em;
			}
			
			.item-c > p,.item-d > p {
			font-size: 14px;
			text-align: justify;
			}  

					/* main-part-3 */
		.item-phone-area {
			grid-area: phone-1;
			}
			.item-phone-area-2 {
			grid-area: phone-2;
			width: 200px;
			height: 80px;
			}
			.item-phone-area-2 > a {
				font-size: 4em;
			}
			.main-part-3 {
			padding-top: 60px;
			display: grid;
			grid-template-columns: 33.33% 33.33% 33.33%;
			grid-template-rows: auto;
			grid-template-areas: 
				"phone-2 phone-2 phone-2"
				"phone-1 phone-1 phone-1";
			}

			/* footer */

	.item-g {
		grid-area: part-1;
		/* border: 1px solid #161616; */
		}
	
		.item-h {
		grid-area: part-2;
		/* border: 1px solid #161616; */
		}
	
		.item-i {
		grid-area: part-3;
		/* border: 1px solid #161616; */
		padding: 20px;
		}
		
	.footer-area {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-template-areas: 
			"part-3"
			"part-1"
			"part-2";
		}
	
	
	.item-g > div > div {
		width: 35px;
		height: 35px;
	}
	
	.item-g > div > div > a > i {
		font-size: 1.5em;
	}
	.item-h > h1 {
		font-size: 1.5em;
	}
	.item-i > div > h5 {
		font-size: 1.5em;
	}

		/* form */
		.form-area > h5 {
			font-size: 1.5em;
		}

		.form-area > form > button:hover {
			cursor: pointer;
			box-shadow: 5px 5px 0px rgba(255, 255, 255, .9),
									10px 10px 0px rgba(255, 255, 255, .7);
		}
	
		.footer-area-2 {
			display: grid;
			grid-template-columns: 20% 60% 20%;
			grid-template-rows: auto;
			grid-template-areas: 
				"part-1 part-2 part-3";
		}

				.hero,
				.hero2,
				.hero3,
				.hero4,
				.hero5,
				.hero6,
				.hero7,
				.header-item > h1,
				.header-item > h2,
				.header-item > a,
				.header-item > a:hover,
				.header-item > a:focus,
				.logo,
				.hamburger,
				.cross,
				.menu,
				.menu li,
				.coup-section,
				.item-cop-1,
				.item-cop-2,
				.item-cop-3,
				.item-cop-4,
				.cop-sec,
				.item-a,
				.item-a > h1,
				.item-a > p,
				.item-b-1,
				.item-b-2,
				.item-b-3,
				.item-b-4,
				.item-b-5,
				.item-b,
				.main-part-1,
				.item-c,
				.item-d,
				.item-e,
				.item-f-1,
				.item-f-2,
				.item-f,
				.main-part-2,
				.item-c,
				.item-d,
				.item-c > h2,
				.item-d > h2,
				.item-c > p,
				.item-d > p,
				.item-phone-area,
				.item-phone-area-2,
				.item-phone-area-2 > a,
				.main-part-3,
				.item-g,
				.item-h,
				.item-i,
				.footer-area,
				.item-g > div > div,
				.item-g > div > div > a > i,
				.item-h > h1,
				.item-i > div > h5,
				.form-area > h5,
				.form-area > form > button:hover,
				.footer-area-2 {
					transition: all .5s;
					-webkit-transition: all .5s;
					-o-transition: all .5s;
				} 
		
		}



@media screen and (max-width: 430px) {
	/* header */
	.hero {
		display: table;
		height: 360px;
		background: url("../img/background.jpg") no-repeat center center fixed;
	}
	.hero2 {
		display: table;
		height: 360px;
		background: url("../img/upholstery-cleaning-home.jpg") no-repeat center center fixed;
	}
	.hero3 {
		display: table;
		height: 360px;
		background: url("../img/rug-background.jpg") no-repeat center center fixed;
	}
	.hero4 {
		display: table;
		height: 360px;
		background: url("../img/air-duct-backgroundjpg.jpg") no-repeat center center fixed;
	}
	.hero5 {
		display: table;
		height: 360px;
		background: url("../img/tile-&-grout-background.jpg") no-repeat center center fixed;
	}
	.hero6 {
		display: table;
		height: 360px;
		background: url("../img/dryer-vent-background.jpg") no-repeat center center fixed;
	}
	.hero7 {
		display: table;
		height: 360px;
		background: url("../img/contact-background.jpg") no-repeat center center fixed;
	}
	.header-item > h1 {
		display: none;
	}
	
	.header-item > h2 {
		display: none;
	}

	.header-item > a {
		outline: none;
		vertical-align: center;
		margin: 5px auto;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, .7);
	}
	.header-item > a:hover {
		outline: none;
		box-shadow: 5px 5px 0px rgba(255, 255, 255, .7),
								10px 10px 0px rgba(255, 255, 255, .5);
	} 
	.header-item > a:focus {
		outline: none;
		box-shadow: 5px 5px 0px rgba(255, 255, 255, .7),
								10px 10px 0px rgba(255, 255, 255, .5);
	} 
	/* logo */
	.logo {
		width: 25%;
	}

	/* menu */

	.hamburger{
		top:0px;
		right:5px;
		line-height:38px;
		font-size:1.5em;
		}
	.cross{
		top:0px;
		right:2px;
		font-size:2.5em;
		line-height:60px;
		}
	.menu {
		top: 55px;
		font-size:.8em; 
	}
	.menu li {
			line-height: 40px;
	}

	/* coup-section */
	/* .coup-section {
		background: rgba(232, 199, 170,1);
		color: #161616;
		width: 250px;
		height: 133px;
	}
		
	.item-cop-1,.item-cop-2,.item-cop-3,.item-cop-4 {
	text-align:center;
	padding: 3px 3px;
	}
	.cop-sec{
	display:grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 50% 50%;
	grid-template-areas: "one two" "three four";
	} */

	/*  main section*/

		.item-a {
		grid-area: header;
		text-align: left;
		}
		.item-a > h1 {
			font-size: 1.6em;
		}
		.item-a > p {
			font-size: 13px;
			text-align: justify;
		}
	
		.item-b-1,.item-b-2,.item-b-3,.item-b-4,.item-b-5 {
			padding: 5px 5px;
		}
		.item-b {
		grid-area: main;
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-rows: auto;
		grid-template-areas: 
			"b-4 b-4 b-4 b-4"
			"b-1 b-2 b-3 b-5";
		}
		
		.main-part-1 {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-rows: auto;
		grid-template-areas: 
			"header header header header"
			"main main main main";
		}

		/* main-part-two  */
		.item-c {
			grid-area: part-1;
			}
			.item-d {
			grid-area: part-2;
			}
			.item-e {
			grid-area: part-3;
			padding: 5px 5px 5px 0px;
			}
		
				.item-f-1 {
				grid-area: part-1;
				padding: 5px 5px 5px 5px;
				}
				.item-f-2 {
				grid-area: part-2;
				padding: 5px 0px 5px 5px;
				}
		
			.item-f {
			grid-area: part-4;
			display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: auto;
			grid-template-areas:
							"part-1 part-2";
			}
			.main-part-2 {
				display: grid;
				grid-template-columns: 50% 50%;
				grid-template-rows: auto;
				grid-template-areas: 
					"part-1 part-1"
					"part-2 part-2"
					"part-3 part-3"
					"part-4 part-4";
			}
		
			.item-c,.item-d {
				padding-right: 0px;
			}
		
			.item-c > h2,.item-d > h2 {
			font-weight: bolder;
			font-size: 1.6em;
			}
			
			.item-c > p,.item-d > p {
			font-size: 13px;
			text-align: justify;
			}  

		/* main-part-3 */
		.item-phone-area {
		grid-area: phone-1;
		}
		.item-phone-area-2 {
		grid-area: phone-2;
		width: 200px;
		height: 80px;
		}
		.item-phone-area-2 > a {
			font-size: 4em;
		}
		.main-part-3 {
		padding-top: 60px;
		display: grid;
		grid-template-columns: 33.33% 33.33% 33.33%;
		grid-template-rows: auto;
		grid-template-areas: 
			"phone-2 phone-2 phone-2"
			"phone-1 phone-1 phone-1";
		}



	/* footer */

	.item-g {
		grid-area: part-1;
		/* border: 1px solid #161616; */
		}
	
		.item-h {
		grid-area: part-2;
		/* border: 1px solid #161616; */
		}
	
		.item-i {
		grid-area: part-3;
		/* border: 1px solid #161616; */
		padding: 20px;
		}
		
	.footer-area {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-template-areas: 
			"part-3"
			"part-1"
			"part-2";
		}
	
	
	.item-g > div > div {
		width: 35px;
		height: 35px;
	}
	
	.item-g > div > div > a > i {
		font-size: 1.5em;
	}
	.item-h > h1 {
		font-size: 1.5em;
	}
	.item-i > div > h5 {
		font-size: 1.5em;
	}

		/* form */
		.form-area > h5 {
			font-size: 1.5em;
		}

		.form-area > form > button:hover {
			cursor: pointer;
			box-shadow: 5px 5px 0px rgba(255, 255, 255, .9),
									10px 10px 0px rgba(255, 255, 255, .7);
		}
	
		.footer-area-2 {
			display: grid;
			grid-template-columns: 20% 60% 20%;
			grid-template-rows: auto;
			grid-template-areas: 
				"part-1 part-2 part-3";
		}

		.hero,
		.hero2,
		.hero3,
		.hero4,
		.hero5,
		.hero6,
		.hero7,
		.header-item > h1,
		.header-item > h2,
		.header-item > a,
		.header-item > a:hover,
		.header-item > a:focus,
		.logo,
		.hamburger,
		.cross,
		.menu,
		.menu li,
		.coup-section,
		.item-cop-1,
		.item-cop-2,
		.item-cop-3,
		.item-cop-4,
		.cop-sec,
		.item-a,
		.item-a > h1,
		.item-a > p,
		.item-b-1,
		.item-b-2,
		.item-b-3,
		.item-b-4,
		.item-b-5,
		.item-b,
		.main-part-1,
		.item-c,
		.item-d,
		.item-e,
		.item-f-1,
		.item-f-2,
		.item-f,
		.main-part-2,
		.item-c,
		.item-d,
		.item-c > h2,
		.item-d > h2,
		.item-c > p,
		.item-d > p,
		.item-phone-area,
		.item-phone-area-2,
		.item-phone-area-2 > a,
		.main-part-3,
		.item-g,
		.item-h,
		.item-i,
		.footer-area,
		.item-g > div > div,
		.item-g > div > div > a > i,
		.item-h > h1,
		.item-i > div > h5,
		.form-area > h5,
		.form-area > form > button:hover,
		.footer-area-2 {
			transition: all .5s;
			-webkit-transition: all .5s;
			-o-transition: all .5s;
		} 

}
.fade {
	display: none;
}

.form-page-part-2 {
    width: 50%;
    margin: 30px auto;
}




.item-i .form-area form textarea {
	background: white;
	color: #00333C;
	border: 1px solid #fff;
}
.item-i .form-area form textarea:hover {
	background: rgb(223, 223, 223);
	color: #00333C;
	border: 1px solid #fff;
}

.CUS{
  
  padding: 0;
  border-radius: 30px;
}

.CUS p{
  padding: 0;
 }

form.CUS input.subject {
    display: none;
}

.CUS .form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.CUS .form-row p {
    flex: 1;
    margin: 0;
}

.CUS textarea {
    width: 100%;
    font-size: 15px;
    border: 1px solid #020202;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
    background-color: #f0f0f0;
	color: #1c1d1d;
}

.CUS .submit {
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
    background-color: #f0f0f0;
    color: #161515;
}

.CUS input,
.CUS select {
    width: 100%;
    font-size: 15px;
     border: 1px solid #d4d4d4;
    box-sizing: border-box;
    font-weight: normal;
    padding: 10px;
    margin: 5px 0;
    background-color: #f0f0f0;
	color: #1c1d1d;

}

.CUS label {
    font-size: 15px;
    display: block;
    margin-top: 10px;
    font-weight: bold;
    text-align: left;
    color: #3b3b3b;
}

.CUS legend {
    font-size: 20px;
    text-align: left;
    color: #ffffff;
}

form.CUS,
.CUS fieldset {
    border: none;
}


@media only screen and (max-width:500px){
    .CUS .form-row {
        flex-direction: column;  
        align-items: stretch;    
    }

    .CUS .form-row p {
        flex: 1 0 100%;
        width: 100%;
    }
 }