@charset "UTF-8";

#site-header #nav_home {
	border-color: var(--sentry_orange);
}

:root {
	--h-padding: max(max(calc(calc(100vw - 100rem) / 2), 6%), 2rem);
	--v-padding: max(3%, 1rem);
	--page-header-height: calc(100vh - var(--site-header-height) - 8vh);
	@media ( max-width: 57rem ) {
		--page-header-height: 90vh;
	}
}

main>* {
	text-align: center;
	padding: 4% 6%;

	&:last-child{
		padding-bottom: 4%;
	}

	h1, h2, h3, h4, p, blockquote {
		margin: 1em 0;
		&:first-child { margin-top: 0; }
		&:last-child { margin-bottom: 0; }
	}
}

main>header {
	display: grid;
	grid-template-rows: 1fr max-content;
	grid-template-areas:
		"text"
		"actions";
	.header-text { grid-area: "text"; }
	.call_to_action { grid-area: "actions"; }
	color: white;
	height: var(--page-header-height);
	padding: 0;

	.header-text {
		align-content: center;
		text-shadow: 0 0 .5em #0008;
	}
	h1 {
		margin-top: 0;
		font-size: 2.5rem;
		font-weight: bold;
	}
	p {
		font-size: 1.4rem;
		font-weight: bold;
		margin: 0;
	}
	video{
		position: absolute;
		top: var(--site-header-height);
		left: 0;
		width: 100%;
		max-width: 100%;
		height: var(--page-header-height);
		z-index: -100;
		object-fit: cover;
	}
}

.call_to_action{
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	width: 100%;
	padding: 0 var(--h-padding);
	margin-bottom: 2rem;

	a {
		width: 26vw;
		background: #d1d1d170;
		border: .25rem solid;
		border-color: #4d4d4d70;
		transition:
			border-color 1s,
			background 1s;
		display: flex;
		flex-direction: row;
		@media ( max-width: 45rem ) {
			flex-direction: column; }
		align-items: center;
		color: black;
		padding: .5rem;
		&:hover {
			background: #d1d1d1;
			border-color: #4d4d4d;
		}
	}
	p {
		margin: 0;
		font-size: 1.1rem;
		width: 100%;
		font-family: "Montserrat", sans-serif;
	}
	img, svg {
		height: 4.5rem;
		width: auto;
		&.news_icon {
			fill: var(--sentry_grey);
		}
	}
}

.about_work {
	padding-top: 2%;
	p {
		font-size: 1.1rem;
	}
}

.triple_section {
	background-image: url("/img/services_background.png");
	background-size: cover;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr 1fr 1fr;
	section {
		background: white;
		position: relative;
		display: flex;
		flex-direction: column;
		h2, p {
			padding: 0 1rem;
		}
		img{
			background: var(--background_grey);
		}
		a {
			display: block;
			align-self: center;
			padding: .5rem .4rem;
			background: var(--sentry_orange);
			color: black;
			margin-bottom: 1rem;
			margin-top: auto;
			transition: .8s;
			&:hover {
				padding: .5rem .7rem;
			}
		}
	}
	@media ( max-width: 52rem ) {
		background-size: contain;
		grid-template-columns: 1fr;
		section{
			max-width: 35rem;
			justify-self: center;
		}
	}
}