@charset "UTF-8";
/* CSS Document */


#subBanner, 
#section9{
  display: none;
}

#section1{
	padding: 6rem 0 0;
}

#section1 .textSection:before{
	content: '';
	display: block;
	width: 80vw;
	height: calc(100% + 20px);
	background: red;
	background: var(--navy) url(thumbnaillarge/bg-dark-section.jpg) no-repeat bottom center / cover;
	position: absolute;
	left: 0;
	top: -10px;
	padding: 0;
	border-radius: 0px 40px 40px 0px;
}

.grid-6-4{
	display: grid;
	grid-template-columns: 6fr 4fr;
	gap: var(--gap);
}

.contact-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin: 1em 0;
}

.form-wrap{
	width: 100%;
}


#footer-enquiry{
	padding: 4em 4em;
}



.contact-wrap .contact{
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 40px;
	align-items: flex-start;
  background: white;
}

.contact-wrap .contact:after{
	content:'';
	height: 12px;
	width: 100%;
	background: var(--cyan);
	position: absolute;
	bottom: 0;
}

.contact-wrap .contact.support:after{
	background: var(--purple);
}

.contact-wrap .contact .icon{
	max-width: 100px;
	margin: 0 auto;
}

.contact .icon svg{
	width: 100%;
	height: 100%;
}

.contact-wrap .contact .contact-heading{
	font-weight: 900;
	letter-spacing: -1px;
	margin: 0;
	padding: .5em 0 .2em;
}

.contact-wrap .contact span.label{
	display: block;
	font-size: 18px;
	text-transform: uppercase;
}

.contact-wrap .contact .email{
	font-size: 20px;
	margin: 1em 0;
}

.contact-wrap .contact .email a{
	display: block;
	font-size: 1.2em;
	margin-top: .2em;
}

.contact-wrap .contact a:after{
	display: none;
}

.contact-wrap .contact a:hover{
	color: var(--green);
}

.contact-wrap .contact a{
	text-decoration: none;
	color: inherit;
	font-weight: 700;
}

.contact-wrap .contact.sales .phone span{
	padding: .5em 0 .3em;
}

.contact-wrap .contact.sales .phone a{ 
	font-size: 40px;
}


.contact-wrap .contact.support .phone{
	font-size: 18px;
}

.contact-wrap .contact.support .phone div{
	display: grid;
	grid-template-columns: 100px 1fr;
	padding: .5em 0;
}

@media all and (max-width:1400px){
	
	.grid-6-4{grid-template-columns: 1fr;}
	
	#section1 .textSection:before{
		width: 100vw;
		height: calc(100% + 20px);
		position: absolute;
		left: 0;
		top: -10px;
		border-radius: 0;
	}
	#footer-enquiry{
	   padding: 4em 2em;
  }
	#footer-enquiry .grid-6-6{
		grid-template-columns: 1fr 1fr;
		gap: 2em;
	}
	.contact-wrap{
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 1100px){
	.contact-wrap .contact .email a{
		font-size: 1em;
	}
	.contact-wrap .contact{
		grid-template-columns: 50px 1fr;
	}
	.contact-wrap .contact{
		gap: 1em;
	}
}

@media (max-width: 900px){
	.contact-wrap .contact{
		grid-template-columns: 1fr;
	}
	.contact-wrap .contact .icon{
			position: absolute;
			top: 10px;
			right: 10px;
			width: 50px;
			height: 50px;
		}
}

@media all and (max-width: 700px){
	#section1{
		padding-top: 3rem;
	}
	#section1 h1{
		font-size: 13vw;
	}
	#section1 .textSection:before{
		width: 100vw;
		border-radius: 0;
	}
	#footer-enquiry{
		padding: 2em .5em;
	}
	#footer-enquiry .grid-6-6{
		grid-template-columns: 1fr;
		gap: 0;
	}
	.contact-wrap{
		grid-template-columns: 1fr;
		gap: 1em;
	}

	.contact-wrap .contact{
		grid-template-columns: 1fr;
		gap: 1em;
		padding-bottom: 3em;
	}
	.contact-wrap .contact .contact-heading{
		line-height: normal;
		padding-bottom: .2em;
	}
	.contact-wrap .contact.support .phone div{
		padding: .2em 0;
	}
	.contact-wrap .contact .email a{
		font-size: 1em;
	}
	#section2{
		padding-bottom: 0;
	}
	.contact-wrap .contact .icon{
		position: absolute;
		top: 10px;
		right: 10px;
		width: 50px;
		height: 50px;
	}

}