:root {
	--accent: #35FFFF;
	--darkAccent: #1c1ae1;
	--secondaryAccent: #60c0c2;
	--tertiaryAccent: #42898a;
	
	--page-gradient: #001F3F;
	
	font-size: 20px;
	
	--dfs-1: 4.75rem;
	--dfs-2: 3.8rem;
	
	--fs-1: 3.05rem;
	--fs-2: 2.45rem;
	--fs-3: 1.95rem;
	--fs-4: 1.55rem;
	--fs-5: 1.25rem;
	--fs-6: 0.8rem;
	
	--bfs-l: 1.25rem;
	--bfs-r: 1rem;
	--bfs-s: 0.8rem;
	--bfs-c: 0.65rem;
	
	--max-width: 1600px;
}

html,
body {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: black;
	background-repeat: no-repeat;
	background-size: 100vw 100vh;
	color: #FFF;
	font-family: "Nunito", sans-serif;
}

header,
main > section,
main > article {
	padding-inline: max((100vw - var(--max-width)) / 2, 30px);
}

header,
main {
	background: black;
	position: relative;
	z-index: 10;
}

header {
	//background-image: radial-gradient(var(--darkAccent), var(--page-gradient) 80%);
	background-image: linear-gradient(to bottom, #001f3f 0%, #1e1be5 55%, #001c36 100%);
	margin: 0;
	padding-block: 30px;
	section {
		padding: 0 0 100px;
	}
	div {
		align-items: center;
		display: flex;
		flex-direction: row-reverse;
		text-align: right;
		p {
			border-right: 1px solid var(--accent);
			font-size: var(--fs-4);
			font-weight: 600;
			margin: 0 20px 0 0;
			padding: 0 25px 0 0;
		}
		img {
			width: 50px;
		}
		&.has-img img{
			margin-top: -6rem;
			width: 300px;
		}
	}
}

header section,
h1 {
	em {
		color: var(--accent);
		font-style: normal;
	}
}

nav {
	ol {
		align-items: center;
		display: flex;
		font-size: var(--fs-6);
		justify-content: space-between;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	li:last-child {
		a {
			display: inline-block;
			position: relative;
			&:before {
				border-radius: 5px;
				bottom: -7px;
				content: '';
				display: block;
				height: 5px;
				position: absolute;
				width: 100%;
			}
			&:hover:before,
			&.selected:before {
				background: var(--accent);
			}
			&:not(:first-child) {
				margin-left: 50px;
			}
		}
	}
	img {
		display: block;
		width: 200px;
	}
}

main {
	border-bottom: 1px solid var(--darkAccent);
	min-height: 75vh;
	section {
		margin: 0;
		padding-block: 30px 130px;
		&:last-child {
			padding-block: 0 230px;
		}
	}
}

h1,h2,h3,h4,
.hero {
	font-family: Montserrat, sans-serif;
	font-weight: bold;
}

h1 {
	font-size: var(--dfs-1);
	line-height: 1;
}

h1 {
	margin: 0;
	padding: 100px 0 30px;
	em {
		color: var(--accent);
		font-style: normal;
	}
}

h2,
h3,
h4,
h5 {
	color: var(--accent);
	font-weight: bold;
}

/*h2,
h3 {
	font-size: var(--fs-2);
	line-height: var(--fs-2);
}*/
h2 {
	font-size: var(--fs-1);
	font-weight: bold;
	line-height: 1.1;
	em {
		color: white;
		font-style: normal;
	}
}

h3 {
	font-size: var(--fs-1);
	font-weight: bold;
}

h4 {
	font-size: var(--fs-4);
}

h5 {
	font-size: var(--fs-5);
}

h6 {
	font-size: var(--fs-6);
}

a {
	color: #FFF;
	position: relative;
	text-decoration: none;
}

footer {
	background-image: url('/images/logo-clipped.png'), linear-gradient(black, #001b35);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100vw auto;
	display: flex;
	padding: 100px max((100vw - var(--max-width)) / 2, 120px) 400px;
	//padding: 100px 120px 400px;
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	> div:first-child {
		flex: 1;
	}
	> div:last-child div {
		display: flex;
	}
	h4 {
		font-size: var(--fs-2);
		line-height: 1.1;
		margin-block: 0 0;
		em {
			color: #FFF;
			font-style: normal;
		}
	}
	h5 {
		color: #FFF;
		font-size: var(--fs-4);
		line-height: 1.2;
		margin-block: 15px 0;
	}
}

table {
	border-collapse: collapse;
	margin: 0 auto;
	width: calc(100% - 200px);
}

#we-are,
#say-hi {
	background-image: linear-gradient(#001c36, transparent);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% 75%;
	padding-top: 130px;
	img {
		float: right;
		margin-top: calc(var(--fs-1) * 2);
		width: 380px;
		&:first-child {
			display: block;
		}
		&:nth-child(2) {
			display: none;
		}
	}
	p {
		font-family: Montserrat, sans-serif;
		font-size: var(--fs-3);
		font-weight: bold;
		em {
			color: var(--accent);
		}
	}
}

#we-do {
	ol {
		display: flex;
		justify-content: space-between;
		list-style-type: none;
		li {
			align-items: center;
			display: flex;
			font-family: Montserrat, sans-serif;
			font-size: var(--bfs-l);
			font-weight: 500;
			width: 30%;
		}
	}
	big {
		color: var(--accent);
		font-family: Montserrat, sans-serif;
		font-size: calc(var(--dfs-2));
		font-weight: bold;
		margin-right: 10px;
	}
}

#what {
	ul {
		display: flex;
		justify-content: space-between;
		list-style-type: none;
		margin: 0;
		padding: 0;
		li {
			border: 1px solid var(--secondaryAccent);
			border-radius: 15px;
			box-shadow: 0 3px 7px 3px var(--secondaryAccent);
			box-sizing: border-box;
			font-family: Montserrat, sans-serif;
			font-size: var(--bfs-l);
			font-weight: 500;
			padding: 35px 75px 35px 35px;
			position: relative;
			width: calc(20% - 20px);
			&:after {
				background-size: cover;
				color: var(--accent);
				content: '';
				height: 45px;
				display: block;
				position: absolute;
				right: 10px;
				top: 10px;
				width: 53px;
			}
			&.up:after {
				background-image: url('/images/arrow-up.png');
			}
			&.down:after {
				background-image: url('/images/arrow-down.png');
			}
			&.equal:after {
				background-image: url('/images/equal.png');
			}
		}
	}
}

#accomplished {
	background: linear-gradient(transparent, var(--page-gradient));
	td {
		font-family: Montserrat, sans-serif;
		font-size: var(--bfs-l);
		padding-block: 65px 25px;
		font-weight: bold;
	}
	tr td:last-child {
		border-bottom: 1px solid white;
	}
	img {
		margin-right: 45px;
		width: 70px;
	}
	em {
		font-style: normal;
		text-transform: uppercase;
	}
}

#why {
	background: linear-gradient(var(--page-gradient), transparent);
}

#reasons {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
	margin: 60px 0 0;
	padding: 0;
	li {
		align-items: center;
		//background-image:  linear-gradient(to bottom right, rgba(255,255,255,0.5), transparent 50%), linear-gradient(to right, var(--accent), #151b9e);
		background-image: url('/images/card-bg-dark-1.png');
		background-size: cover;
		border-radius: 0 25px 0 25px;
		box-shadow: 0 2px 5px 1px var(--secondaryAccent);
		box-sizing: border-box;
		display: flex;
		font-family: Montserrat, sans-serif;
		font-size: var(--bfs-l);
		font-weight: 600;
		min-height: 275px;
		width: 30%;
		span {
			display: block;
			margin: 0 auto;
			padding-inline: 60px;
			max-width: fit-content;//calc(100% - 100px);
		}
	}
}

#clients {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	list-style-type: none;
	margin: 200px 100px 0;
	padding: 0;
	li {
		margin-bottom: 5vw;
		width: 30%;
		img {
			display: block;
			margin: 0 auto;
			max-width: 150px;
			width: 100%;
		}
	}
}

#accreditations {
	background-image: linear-gradient(#000, var(--page-gradient));
	h3 {
		margin-top: 0;
	}
	tr {
		td {
			border-bottom: 1px solid white;
			padding-bottom: 40px;
		}
		&:not(:first-child) td {
			padding-top: 85px;
		}
	}
	td {
		strong {
			font-family: Montserrat, sans-serif;
			font-size: var(--bfs-l);
		}
		&:last-child {
			text-align: right;
			img {
				height: 125px;
				width: auto;
			}
		}
	}
}

#site {
	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		li {
			margin-top: 10px;
		}
	}
}

#follow {
	margin: 0 0 0 65px;
	ul {
		display: flex;
		line-height: 1.5;
		list-style-type: none;
		margin: 0;
		padding: 0;
		li:not(:first-child) {
			margin-left: 5px;
		}
	}
	img {
		display: block;
		width: 30px;
	}
}

#privacy {
	h2 {
		color: #FFF;
		font-family: "Nunito", sans-serif;
		font-size: var(--fs-5);
		font-weight: 400;
		&:first-child {
			margin: 0;
			padding: 60px 0 0;
		}
		em {
			color: var(--accent);
		}
	}
	
	main article {
		background-image: linear-gradient(var(--page-gradient), black 20%, var(--page-gradient) 70%, var(--page-gradient) 95%, black);
		position: relative;
	}
	
	section:first-child {
		ol {
			color: var(--accent);
			li {
				font-size: var(--bfs-r);
				a {
					display: block;
					margin: 0 0 25px;
					padding: 10px 100px 10px 0;
					position: relative;
					&:after {
						--borderSize: 3px;
						background: black;
						border-radius: var(--borderSize);
						content: '';
						display: block;
						height: var(--borderSize);
						position: absolute;
						bottom: var(--borderSize);
						width: 100%;
					}
					&.in-view,
					&:active,
					&:focus,
					&:hover {
						&:after {
							background: var(--accent);
						}
					}
				}
			}
		}
	}
	
	p,
	li,
	table {
		font-family: Nunito, sans-serif;
		font-size: var(--bfs-s);
		line-height: 1.5;
	}
	
	p,
	li,
	table {
		max-width: 80ch;
	}
	
	table {
		border-collapse: separate;
		border-spacing: 0;
		border-radius: 10px;
		box-shadow: 0 3px 7px 1px var(--darkAccent);
		margin: 30px 0;
		width: 100%;
		thead {
			background: var(--darkAccent);
			color: #FFF;
			th {
				font-size: var(--bfs-r);
				&:first-child {
					border-radius: 10px 0 0 0;
				}
				&:last-child {
					border-radius: 0 10px 0 0;
				}
			}
		}
		tr {
			&:not(:last-child) {
				td {
					border-bottom: 1px solid #FFF;
				}
			} 
			td {
				background: var(--page-gradient);
				padding: 25px;
			}
		}
		th,
		td {
			position: relative;
			text-align: left;
			.nowrap {
				white-space: nowrap;
			}
		}
		th {
			padding: 10px 25px;
			&:not(:first-child) {
				&:before {
					background: #FFF;
					bottom: 10px;
					content: '';
					left: 0;
					position: absolute;
					top: 10px;
					width: 1px;
				}
			}
		}
	}
}

#contact {
	header {
		div {
			&.has-img img{
				width: 130px;
			}
		}
	}
}

#error {
	h2 {
		font-size: var(--fs-3);
	}
}

.invert {
	color: var(--accent);
	em {
		color: #FFF!important;
	}
}

@media screen and (max-width: 400px) {
	footer {
		> div {
			flex: 0;
		}
	}
}

@media screen and (max-width: 768px) {
	:root {
		--dfs-1: 1.55rem;
		--fs-1: 1.35rem;
		--fs-3: 1.25rem;
		--fs-4: 1.05rem;
		--fs-5: 0.95rem;
		--fs-6: 0.8rem;
	}
	header {
		section {
			padding-bottom: 60px;
		}
		p {
			text-align: left;
		}
		.has-img {
			display: none;
		}
	}
	nav {
		li {
			width: 50%;
			img {
				max-width: 100px;
			}
		}
		ol li:last-child a:not(:first-child) {
			margin-left: 10px;
		}
	}
	h1 {
		padding: 35px 0;
	}
	h3 {
		font-size: var(--fs-3);
	}
	main section {
		padding-block: 30px 50px!important;
	}
	footer {
		padding-inline: max((100vw - var(--max-width)) / 2, 30px);
		//padding-inline: 30px;
		padding-bottom: 120px;
		flex-wrap: wrap;
		h4 {
			font-size: var(--fs-3);
		}
		h5 {
			font-family: Montserrat, sans-serif;
			font-size: 1.1rem;
			margin: 0 0 10px;
		}
		> div {
			width: 40%;
			&:first-child {
				order: 0;
			}
			&#site {
				margin-top: 20px;
				order: 2;
				li {
					font-size: var(--fs-6);
					margin: 0;
					a {
						display: block;
						width: max-content;
					}
				}
			}
			&#follow {
				order: 1;
			}
		}
	}
	.hero p {
		font-family: Nunito, sans-serif;
		flex: 1;
	}
	#we-are,
	#say-hi {
		img {
			width: 60px;
			&:first-child {
				display: none;
			}
			&:nth-child(2) {
				display: block;
			}
		}
	}
	#we-do {
		background-image: linear-gradient(transparent, var(--page-gradient));
		ol {
			flex-wrap: wrap;
			margin: 0;
			padding: 0;
			li {
				font-size: var(--fs-5);
				width: 100%;
				&:not(:last-child) {
					margin-bottom: 35px;
				}
			}
		}
		big {
			font-size: var(--dfs-1);
		}
		span {
			font-family: Nunito, sans-serif;
			font-size: 
		}
	}
	#what {
		background-image: linear-gradient(to top, transparent, var(--page-gradient));
		ul {
			flex-wrap: wrap;
			gap: 20px;
			justify-content: space-around;
			li {
				font-size: var(--fs-4);
				padding: 15px 50px 15px 25px;
				width: calc(50% - 20px);
				&:after {
					height: 30px;
					width: 36px;
				}
			}
		}
	}
	#accomplished {
		table {
			margin-inline: 0;
			width: 100%;
			td {
				font-family: Nunito, sans-serif;
				font-size: var(--fs-5);
				padding-block: 40px 15px;
				img {
					margin-right: 15px;
					width: 55px;
				}
			}
		}
	}
	#reasons {
		flex-wrap: wrap;
		gap: 20px;
		li {
			background-image: url('/images/card-bg-light-1.png');
			min-height: 200px;
			width: 100%;
			span {
				padding-inline: 30px;
			}
		}
	}
	#clients {
		margin: 100px 0 0;
	}
	#accreditations {
		h3 {
			margin-bottom: 10px;
		}
		table {
			width: 100%;
		}
		tr td {
			padding: 30px 0 15px!important;
			vertical-align: top;
			strong {
				font-family: Nunito, sans-serif;
				font-size: var(--fs-5);
			}
			&:last-child {
				img {
					height: 70px;
				}
			}
		}
	}
	
	#privacy {
		h2:first-child {
			padding-top: 30px;
		}
		p,
		ol,
		ul,
		li {
			box-sizing: border-box;
		}
		.table {
			overflow-x: auto;
			padding: 0 30px;
			position: relative;
			left: -30px;
			width: 100%;
		}
		table {
			width: 100%;
			tr {
				th,
				td {
					padding: 5px 10px;
					white-space: normal;
				}
				th {
					font-size: var(--fs-6);
				}
			}
		}
	}
}

@media screen and (max-width: 1200px) {
	#what {
		ul {
			li {
				font-size: var(--bfs-s);
				padding: 50px 15px 15px;
			}
		}
	}	
}

@media screen and (min-width: 768px) {
	#privacy {
		article {
			align-items: flex-start;
			display: grid;
			gap: 75px;
			grid-template-columns: 1fr 2fr;
		}
		section:first-child {
			position: sticky;
			top: 0;
		}
	}
}