@charset "ISO-8859-1";

.container{
	 display: grid;
    grid-template-rows: 8rem minmax(calc(100vh - 10rem), max-content) min-content; 
   grid-template-columns:[full-start] minmax(6rem, 1fr) [center-start] repeat(9, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];

display:grid;
align-items:center;
}
.header-area{
	grid-column: full-start / full-end;
}
.footer-area{
	grid-column: full-start / full-end;
	
}

.contactForm{
grid-column: col-start 3 / col-end 7;

}
.para{
	font-size:2.4rem;
	padding:2rem;
	margin-top:5rem;
	line-height:1.5;
	text-align:center;
	color:var(--color-primary);
}
/*contactUs form */
	
	
.form {
	margin: 5rem auto;
	border: 3px solid var(--color-grey-light-3);
	background-color:var(--color-grey-light-1);
	 padding: 3rem 2rem; 
	border-radius: 8px;
box-shadow:var(--shadow-dark);

}
.form label {
	display: block;
	font-size: 2.4rem;
	color:var(--color-primary);
	margin-bottom: 1.5rem;
	margin-top:2.2rem;
  font-weight:500;
  line-height: 1.2;
}
.inputfield-contactUs{
	display:block;
 font-size:var(--fs-input);
 padding: 1.2rem 2rem; 
 margin: .5rem auto .5rem;
  outline: 0;
 /*background-color:var(--color-primary-light);*/ 
  border: 1px solid var(--color-primary);
  border-radius: 0.6rem;
 color:var(--color-primary-dark);
  text-align:left;
  cursor: input;
  transition: all 0.3s;
  width:100%;
}
.inputfield-contactUs:hover{
	background-color:white;
}
.inputfield-contactUs:focus{
	box-shadow:var(--shadow-input);
}
.inputfield-contactUs.sucess{
	border-color:green;
	background-color:green;
}

.inputfield-error{
	border-color:red;
	background-color:red;
}

/****Responsive *********/
@media only screen and (max-width:50em) {
	/*** 800 / 16 =50 **/
.contactForm{
grid-column: col-start 1 / col-end 9;
}
}

@media only screen and (max-width:30em) {
	/*** 480/ 16 =30 **/
	.container{
    grid-template-columns:[full-start] minmax(2rem, 1fr) [center-start] repeat(9, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(2rem, 1fr) [full-end];
}
}












































 