:root {
	--qtech-blue: #239AD6;
	--qtech-orange: #EC6719;
}

html, body {height:100%; scroll-behavior:smooth;}
* {box-sizing: border-box; outline: none;}
a, a:hover, button {text-decoration:none; cursor:pointer;}
b {font-weight:700!important;} p {padding:10px 0;}
img {display: block; height: auto; width: 100%;}
body {font:300 14px/1.1 "Lato",sans-serif; overflow-x:hidden; margin:0; padding:0; background-color:#fff; position:relative; color: #222;}
main, footer {margin: 0 auto;}
.bold {font-weight: 700;}
.fooler2 {grid-column: span 2;}
section {margin: 0; padding: 0; min-height: 100dvh; display: grid; place-content: center;}
footer {
	font-size: 11px; color: #000; margin: 4em 0; display: grid; grid-template-columns: 1fr; gap: 6px; place-content: center;
	p {margin: 0; padding: 0; text-align: center;}
	.links {
		display: flex; gap: 12px; width: fit-content; margin: auto; line-height: 1em;
		a {font-weight: 700; color: var(--qtech-blue);}
	}
	img {width: 200px; height: auto; display: block; margin: 20px auto;}
}
.center {text-align: center;}
.allCaps {text-transform: uppercase;}
.oneGrid {display: grid; place-content: center; gap: 14px;
	h2 {font-size: clamp(1.2rem, 1.2222rem + 0.8889vw, 2rem);}
}

form {display:flex;flex-direction:column;gap:1em;}
form .buttonWrapper{display:flex;gap:1em;justify-content:flex-end;}
form button{font-weight:700;border:2px solid var(--qtech-blue);background:#eee;color:#000;border-radius:6px;padding:10px 32px;transition:all .3s;cursor:pointer;}
form button:hover{box-shadow:0 0 24px rgba(0,0,0,.3);border-color:#fff;border-radius:2em;}
form button.accent{background-color: var(--qtech-blue);color:#fff;}
form input,form textarea, form select {width:100%;font-family:"Poppins",sans-serif;border:2px solid #eee;background:none; border-radius:4px; padding:6px 8px;}
form input,form textarea, form select {transition:all .25s; font-size:12px; line-height:1.1em;}
form input:focus,form textarea:focus{border-color:#286118;}

#formElement {
	width: min(100%, 500px); position: fixed; inset: 0; margin: auto; padding: 16px; z-index: 998; display: none; height: fit-content;
	.capsular {
		display: flex; flex-direction: column; transition: all .5s ease-in-out; box-shadow: 0 0 0 #00000080; margin: auto;
		background-color: #FFF; border-radius: 12px; padding: 36px; box-shadow: 10px 10px 40px #00000060;

		h2 {font-size: 2em; color: var(--qtech-blue)}
		span {display: block; font-size: .8em; line-height: .9em;}
		#formMessage {display: none; padding: 10px 16px;}
		#formMessage.ko {border: 2px solid red; color: red;}
		#formMessage.ok {border: 2px solid green; color: green;}
		.close {position:absolute; top:30px;right:30px; cursor:pointer; z-index:11001; width: 16px; height: auto;}
	}
}



.fonts-clamp-Bigger {font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);}
.fonts-clamp-Big {font-size: clamp(1.3rem, 0.56rem + 3.36vw, 3.5rem);}
.fonts-clamp-Medium {font-size: clamp(1.2rem, 1.2222rem + 0.8889vw, 2rem)}
.fonts-clamp-Normal {font-size: clamp(1rem, 0.88rem + 0.48vw, 1.3rem);}

.fixedBG {background-attachment: fixed !important;}
.wrapper {display: grid; grid-template-columns: 1fr; width: min(82vw, 1400px); margin: 5em auto; padding: 0 min(2vw, 3em);}
.wrapper.fullwidth {grid-template-columns: repeat(5, 1fr); width: 100dvw; margin: 0; padding: 0;}
.three-cols {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: min(30px,40px)}

section#hero {
	display: flex; background: #FFF url('/assets/images/relax.jpg') no-repeat center; background-size: cover; 
	.wrapper {
		.topper {
			display: flex; align-items: start;
			.logo {width: min(60vw, 24em); filter: drop-shadow(0 0 1.5em #FFFFFF)}
		}
		.bottomer {
			color: #FFF; align-self: end;
			.title {font-weight: 900; line-height: 1.1em; text-shadow: 4px 4px 24px #00000040; padding: 0;}
			.text {font-weight: 400; line-height: 1.2em; padding: 1em 0; text-shadow: 0px 0px 24px #00000040}
			.buttons {display: flex; gap: 12px;}
			button {border: 0; background-color: #FFF; color: var(--qtech-blue) ; border-radius: 8px; padding: 8px 2em; font-size: 1em; font-weight: 700;}
			#getQuote {background-color: var(--qtech-blue); color: #FFF;}

		}
	}
}

.bicols {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; place-content: center;
	.content, .figure {display: grid; place-content: center; gap: 1em;}
	h2 {font-size: 2em; color: var(--qtech-blue); font-weight: 700; margin-bottom: 1em;}
}

.fourCols {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; place-content: center;
	div {padding: 8px 12px; border: 1px solid #00000040}
}

#ready .fourCols div {background-color: #FFD1CC}

section#cybersecurity-hero {
	display: flex; background: #FFF url('/assets/images/cybersecurity-hero.jpg') no-repeat center; background-size: cover; 
	.wrapper {
		.topper {
			display: flex; align-items: start;
			.logo {width: min(60vw, 24em); filter: drop-shadow(0 0 1.5em #FFFFFF)}
		}
		.bottomer {
			color: #FFF; align-self: end;
			.title {font-weight: 900; line-height: 1.1em; text-shadow: 4px 4px 24px #00000040; padding: 0;}
			.text {font-weight: 400; line-height: 1.2em; padding: 1em 0; text-shadow: 0px 0px 24px #00000040}
			.buttons {display: flex; gap: 12px;}
		}
	}
}

#get-your-free-audit {
	background-color: #F5F5F5;
	.dock {max-width: 700px; margin: auto;
		form {
			p.inputs {display: flex; gap: 8px; align-items: center}
			label.radio {display: flex; gap: 8px; align-items: flex-start;
				input {width: 1em;}
			}
			input, label, select {width: 100%;}
		}
		.audit-choice {margin-block: .4em 1em;}
	}
} 

button, .button {border: 0; background-color: #FFF; color: var(--qtech-blue) ; border-radius: 8px; padding: 8px 2em; font-size: 1em; font-weight: 700;}
.learnMore {background-color: var(--qtech-blue); color: #FFF;}

section#chatgpt {
	display: flex; background: #FFF url('/assets/images/training.jpg') no-repeat center; background-size: cover; 
	.wrapper {
		.topper {
			display: flex; align-items: start;
			.logo {width: min(60vw, 24em); filter: drop-shadow(0 0 1.5em #FFFFFF)}
		}
		.bottomer {
			color: #FFF; align-self: end;
			.title {font-weight: 900; line-height: 1.1em; text-shadow: 4px 4px 24px #00000040; padding: 0;}
			.text {font-weight: 400; line-height: 1.2em; padding: 1em 0; text-shadow: 0px 0px 24px #00000040}
			.buttons {display: flex; gap: 12px;}
			button, a.button {border: 0; background-color: #FFF; color: var(--qtech-blue) ; border-radius: 8px; padding: 8px 2em; font-size: 1em; font-weight: 700;}
			#getQuote {background-color: var(--qtech-blue); color: #FFF;}

		}
	}
}

section#cybersecurity {
	display: flex; background: #FFF url('/assets/images/team.jpg') no-repeat center; background-size: cover; 
	.wrapper {
		.topper {
			display: flex; align-items: start;
			.logo {width: min(60vw, 24em); filter: drop-shadow(0 0 1.5em #FFFFFF)}
		}
		.bottomer {
			color: #FFF; align-self: end;
			.title {font-weight: 900; line-height: 1.1em; text-shadow: 4px 4px 24px #00000040; padding: 0;}
			.text {font-weight: 400; line-height: 1.2em; padding: 1em 0; text-shadow: 0px 0px 24px #00000040}
			.buttons {display: flex; gap: 12px;}
			button, a.button {border: 0; background-color: #FFF; color: var(--qtech-blue) ; border-radius: 8px; padding: 8px 2em; font-size: 1em; font-weight: 700;}
			#getQuote {background-color: var(--qtech-blue); color: #FFF;}

		}
	}
}

#entreprise-grade {background-color: #FFD1CC;}
#comprehensive {background-color: #FFAD94;
	.wrapper {gap: 1.5em;}
}
#ready .wrapper {gap: 1.5em;}
p.note {background-color: #FFF; padding: 12px 24px; border-radius: 12px; border: 2px solid #00000030}
section#endpoint {
	.wrapper {gap: 4em;}
}

section#emails {
	background: #D2D4D1 url('/assets/images/key.jpg') no-repeat right center; background-size: cover; 
	.wrapper {gap: 3em;
		.header {font-weight: 900; margin-bottom: 2em}
		.capsula {background-color: #CED0CDBB; padding: 1em; border-radius: 12px; width: min(100%, 500px)}
	}
	.three-rows {
		display: grid; grid-template-columns: 1fr; gap: 2em;

		.item {
			font-weight: 400;
			h3 {font-weight: 900;}
		}
	}

}

section#networks {
	background: #000 url('/assets/images/roads.jpg') no-repeat center; background-size: cover; 
	.wrapper {

		.emblem {
			grid-column: 1/3; display: grid; place-content: center;
			img {width: min(100%, 280px); margin: auto; padding: 2em;}

		}
		.content {
			grid-column: 3/6; border: 6px #000 solid; border-right: 0; border-radius: 24px 0 0 24px; color: #FFF;
			background-color: #00000080; backdrop-filter: blur(4px); padding: 3em 4em;
			.three-rows {
				width: min(100%, 560px); display: grid; gap: 1em;
				h4 {font-weight: 700;}
			}
		}
	}
}

section#cloud {
	.wrapper {gap: 4em;}
}

.three-cols {
		.item {
			font-weight: 400; display: grid; gap: 1em;
			h3 {font-weight: 700; font-size: 1.2em;}
			img {width: min(60%, 130px)}
			.fullWidth {width: 100%;}
		}
	}

section#hipaa {
	background-color: #d0e8f4; background-image: url('/assets/images/hipaa.png'); background-size: cover;
  	background-repeat: no-repeat; background-position: left center;

	.wrapper {gap: 3em; grid-template-columns: 1fr 1fr;
		.header {font-weight: 300; color: #188FCB;}
	}
	.three-rows {
		display: grid; grid-template-columns: 1fr; gap: 2em; grid-column: 2/3;
		background-color: #d0e8f4cc; padding: 1.2em; border-radius: 12px;
		.item {
			font-weight: 400; width: min(100%, 600px);
			h3 {font-weight: 900 !important; color: #188FCB;}
		}
	}
}

section#expertise {
	display: flex; background: #FFF url('/assets/images/laptop.jpg') no-repeat center; background-size: cover; color: #FFF;
	h3 {margin: .5em 0; font-weight: 700;}
	.title {margin-bottom: 1em;}
	.partners {
		display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; background-color: #FFF; padding: 24px;
		border-radius: 16px; margin: 24px 0;
		img {width: auto; height: auto; max-width: 140px; max-height: 50px; margin: auto;}
	}

}



@media (max-width: 500px) {
	section#hipaa {
		.wrapper {gap: 3em; grid-template-columns: 1fr;}
		.three-rows {grid-column: unset;}
	}
	section#networks {
		.wrapper {
			.emblem {display: none}
			.content {
				grid-column: 2/6; padding: 1em 2em;
			}
		}
	}
	.fourCols {grid-template-columns: 1fr}
	#get-your-free-audit .dock form {grid-template-columns: 1fr;
		button {grid-column: -1/1;}
	}
}

@media (min-width: 501px) and (max-width: 700px) {
	section#hipaa {
		.wrapper {gap: 3em; grid-template-columns: 1fr;}
		.three-rows {grid-column: unset;}
	}
	section#networks {
		.wrapper {
			.emblem {display: none}
			.content {
				grid-column: 2/6; padding: 1em 2em;
			}
		}
	}
}

@media (max-width: 1200px) {
	
}

@media (max-width: 1300px) {
	
}

@media (min-width: 601px) and (max-width: 960px) {
	
}

@supports (-webkit-touch-callout: none) {
	section.fixedBG {background-attachment: scroll !important}
}