@font-face {
	font-family: Jost;
	src: url(Jost.ttf);
}

@font-face {
	font-family: Jost;
	font-style: italic;
	src: url(Jost-Italic.ttf);
}

:root{
	--fg: #171C25;
	--fg-a: #171C25CC;
	--bg: #F1F5F8;
	--secondary: #D2D9E7;
	--accent: #222D68;
	--accent-hover: #313E8C;
}

@media (width >= 1250px) {
	:root{
		--a-larger: 6.5em;
		--a-large: 4em;
		--a-medium: 2em;
		--a-small: 1em;
		--a-tiny: .5em;
	}

	.xxlarge {
		font-size: 5em;
		line-height: 100%;
	}

	.xlarge, h2{
		font-size: 2.5em;
	}

	.large, h3{
		font-size: 1.75em;
	}

	.regular{
		font-size: 1.25em;
	}

	#wordlogo{
		height: 1.5em; 
		margin-block: 1.75em;
	}

	#logo{
		height: 5em;
	}

	header > div {
		gap: 1em;
	}
}

@media (width < 1250px) {
	:root{
		--a-larger: 5em;
		--a-large: 3em;
		--a-medium: 1.5em;
		--a-small: 0.75em;
		--a-tiny: .5em;
	}

	.xxlarge {
		font-size: 3.5em;
		line-height: 100%;
	}

	.xlarge, h2{
		font-size: 2em;
	}

	.large, h3{
		font-size: 1.5em;
	}

	.regular{
		font-size: 1em;
	}

	#wordlogo{
		height: 1em; 
		margin-block: 1em;
	}

	#logo{
		height: 3em;
	}

	header > div {
		gap: .5em;
	}
}



.m0{
	margin: 0;
}

.m-top{
	margin-top: var(--a-medium);
}

.m-top-large{
	margin-top: var(--a-large);
}

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

*{
	scroll-behavior: smooth;
	font-family: "Jost";
	transition: all .2s;
}

footer, section#services, section#about{
	background-color: var(--fg);
	color: var(--bg);
}

footer{
	padding-block: var(--a-medium);
}

.center-medium{
	width: 90%;
	max-width: 92em;
	margin: auto;
}

button, a.button, input[type="submit"]{
	padding: var(--a-tiny);
	padding-inline: 0.75em;
	text-decoration: none;
	border: none;
	color: var(--bg);
	background-color: var(--accent);
}

button:hover, a.button:hover, input[type="submit"]:hover{
	color: var(--bg);
	background-color: var(--accent-hover);
}

header p, footer p:not(#made-by){
	font-weight: 700;
	margin: 0;
}

header{
	z-index: 100;
	position: fixed;
	width: 100vw;
	background-color: var(--fg-a);
	backdrop-filter: blur(1em);
}

header > div {
	display: flex;
}

#logo{
	/*background-color: var(--accent);*/
}

section#slogan{
	height: 85vh;
	background:linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(images/sloganbg.webp);
	background-size: cover;
	background-position: center center;
	background-color: #ffffffbb;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

section#services{
	padding-top: var(--a-large);
	padding-bottom: var(--a-medium);
}

section#services .grid{
	display: grid;

	--grid-layout-gap: 2em;
	--grid-column-count: 3;
	--grid-item--min-width: 270px;

	--gap-count: calc(var(--grid-column-count) - 1);
	--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
	--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

	--min-max: minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr);

	grid-template-columns: repeat(auto-fill, var(--min-max));
	grid-gap: var(--grid-layout-gap);

	img{
		/*height: 2em;*/
		/*height: var(--min-max);*/
	}
}



section#services .grid img{

	aspect-ratio: 1 / 1;
	/*height: 30em;*/
	width: 100%;
	object-fit: cover;
}


section#about > div{
	padding-top: var(--a-large);
	padding-bottom: var(--a-larger);
	display: grid;
	align-items: center;
	justify-items: center;

	--grid-layout-gap: 2em;
	--grid-column-count: 2;
	--grid-item--min-width: 20em;

	--gap-count: calc(var(--grid-column-count) - 1);
	--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
	--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

	grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
	grid-gap: var(--grid-layout-gap);
	flex-wrap: wrap;
	
}

section#about img{
	width: 35vw;
	max-width: 420px;
	min-width: 300px;
	padding: var(--a-small);
}

section#about a.button{
	display: inline-block; 
	color: var(--accent); 
	background-color: var(--bg);
}

section#about a.button:hover{
	background-color: var(--secondary);
}

section#contact{
	margin-block: var(--a-large);
}

section#contact > div{
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

section#contact form{
	width: 90vw;
	max-width: 40em;
	display: flex;
	flex-direction: column;
	text-align: left;
}

section#contact form input[type="text"], section#contact form textarea{
	margin-bottom: var(--a-small);
	width: 100%;
	box-sizing: border-box;
	border: none;
	background-color: var(--secondary);
	padding: var(--a-tiny);
}

section#contact form input[type="submit"]{
	margin-top: var(--a-small);
	align-self: center;
	cursor: pointer;
}

section#contact form input.input-warning:empty{
	outline: solid 2px red;
}

section#reviews .splide__slide{
	padding: 3em;
	display: flex;
	justify-content: center;
}

section#reviews .splide__slide div{
	width: 50em;
}

section#reviews .splide__slide .comment{
	font-size: 1.5em;
	font-weight: 700;
}

section#reviews .splide__pagination__page{
	background-color: var(--fg);
	opacity: 40%;	
}

section#reviews .splide__pagination__page.is-active{
	opacity: 80%;
}

.fadeIn {
	animation: fade-in 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.fadeOut {
	animation: fade-out 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {   
		opacity: 1;
	}
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}
	100% {   
		opacity: 0;
	}
}

@media (prefers-reduced-motion: no-preference){
	.scroll-animation-inactive, .scroll-animation-child-inactive{
		opacity: 0;
		transform: translateY(25px);
		transition: transform 0.3s cubic-bezier(.11,.47,.39,.94) 0.2s,
					opacity 0.3s cubic-bezier(.11,.47,.39,.94) 0.2s;
	}

	.scroll-animation-long-delay{
		transition: transform 0.3s cubic-bezier(.11,.47,.39,.94) 0.4s,
					opacity 0.3s cubic-bezier(.11,.47,.39,.94) 0.4s;
	}

	.scroll-animation-active{
		opacity: 1;
		transform: translateY(0);
	}
}