#contactHeader{
	height: 60vh;
	display: flex;
	background: var(--Main-Grey);
	justify-content: flex-end;
    align-items: center;
}

#contactHeader img{
	height: 100%;
}

#contactHeader .contentHolder{
	width: 80%;
    margin-left: 15%;
    margin-right: 5%;
}

#contactHeader .contentHolder .mainTitle{
	text-align: left;
}

#contact{
	height: 120vh;
	min-height: fit-content;
	margin-bottom: 60px;
}
#contact .background{
    --size: 45px;
    --line: #34323d17;
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
    overflow: hidden;
    mask: linear-gradient(0deg, transparent 150px, white);
    position: absolute;
    top: calc(60vh + 100px);
    width: 100%;
    height: 120vh;
}

#contact .contentHolder{
	padding-top: 60px;
	align-content: center;
}

#contact .contentHolder .content{
    display: flex;
    justify-content: center;
	gap: 40px;
	height: 100%;
}


#contact .contactForm{
	text-align: center;
	padding-top: 20px;
	z-index:10;
	position: relative;
	width: 550px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	background: #fff;
	border-radius:15px;
}


#contact .contactForm .subTitle{
	width: 100%;
	margin: 0px 
}

#contact .contactForm .bodyText{
	width: 80%;
	margin: 20px auto 40px auto;
}

#contact .contactForm label{
	font-weight: 600;
	text-align: left;
}

#contact .contactForm p:has(.wpcf7-spinner){
	display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#contact .contactForm input:not(.wpcf7-submit), #contact .contactForm textarea{
	width: 400px;
	border-radius:5px;
	padding: 5px;
	border: 1px solid var(--Main-Light);
	background: var(--Main-Grey);
}


#contact .contactForm input:not(.wpcf7-submit):focus, #contact .contactForm textarea:focus, #contact .contactForm input:not(.wpcf7-submit):hover, #contact .contactForm textarea:hover{
	background: #fff;
}


#contact .contactForm input.wpcf7-submit{
	width: 200px;
    background: var(--Main-Dark);
    color: #fff;
    height: 50px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0px 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	font-weight: 600;
    font-size: 1.3em;
	border: 0px;
}

#contact .contactForm input.wpcf7-submit:hover{
	background: var(--Main-Light);
	cursor: pointer;
}

#contact .rightContainer{
	width: 45%;
	height:100%;
	display: flex;
	flex-direction: column;
}


#contact .customerSupport{
	text-align: center;
	padding-top: 20px;
	z-index:10;
	position: relative;
	width: 100%;
	max-width: 1000px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	background: #fff;
	border-radius:15px;
}

#contact .customerSupport .pageCol{
	width: 30%;
	text-align: start;
	margin: 40px 0px;
}

#contact .customerSupport .pageCol:last-child{
	width: 35%;
	text-align: start;
	margin: 40px 0px;
}

#contact .customerSupport .pageCol:has(i){
	text-align: center;
	color: var(--Main-Orange);
	font-size: 3em;
	width: 15%
}

#contact .customerSupportImg{
	width: 100%;
	max-width: 1000px;
    margin-top: 40px;
    z-index: 10;
    position: relative;
}

#contact .customerSupportImg img{
	width: 100%;
    border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

#contact .wpcf7-response-output{
	margin: 5px;
	border-radius: 15px;
}

#contactMobileHeader{
	width:100%;
	height: 50vh;
    background-position: center;
    background-size: cover;
    background-image: url(https://tailored-dev.co.uk/wp-content/themes/SubbieProTheme/images/support-image.jpg);
    background-repeat: no-repeat;
	align-content: center;
	
}


#contactMobileHeader .contentHolder{
	width: 100%;
}

#contactMobileHeader .contentHolder .content{
	width: 80%;
	margin: auto;
	background: rgb(231 239 255 / 80%);
	padding: 20px;
	border-radius: 15px;
	text-align: center;
}

@media only screen and (max-width: 1240px) {
	#contact .backgroundImage{
		position: absolute;
		top:25vh;
		left:0;
		height: 50vh;
	}
	#contact{
		height: 150vh;
		min-height: 0vh;
		margin-bottom: 0px;
	}
	
	#contact .background{
		height: 90vh;
		top: 180px;
	}
	
	#contact .contactForm form p{
		    text-align: start;
	}
	
	#contact .contactForm form{
	    width: 90%;
    	margin: auto;
	}
	
	#contact .contactForm form label{
		width: 100%;	
	}
	
	#contact .contactForm input:not(.wpcf7-submit), #contact .contactForm textarea{
		width: 100%;
	}
	
	#contact .contentHolder .content{
		flex-direction: column;
	}
	
	#contact .contactForm, #contact .rightContainer{
		width: 80%;
		margin: auto;
	}
	#contact .customerSupport{
		padding: 20px 0px;
	}

	#contact .customerSupport .pageCol{
		width: 80%;
		margin: auto;
		text-align: center;
		padding: 10px 0px;
	}
	
	#contact .background{
		display: none;
	}
	#contact .contactForm .subTitle{
		padding: 0px 10px;
	}
}

@media only screen and (max-width: 900px) {
	#contact{
		height: 175vh;
	}
}

@media only screen and (max-width: 500px) {
	#contact{
		height: 180vh;
	}
}

@media only screen and (max-width: 420px) {
	#contact{
		height: 190vh;
	}
}

@media only screen and (max-width: 360px) {
	#contact{
		height: 200vh;
	}
}