@font-face {
	font-family: "Inter";
	src: url(./fonts/Inter/Inter-VariableFont_slnt,wght.ttf);
}

* {
	margin: 0;
	padding: 0;
	font-family: Inter;
	box-sizing: border-box;
	color: white;
	line-height: 1;
}

html {
	background-color: #192134;
	scroll-behavior: smooth;
}

h2 {
	text-align: center;
	font-size: 2rem;
	font-variation-settings: "wght" 700; /*bold*/
}

h3 {
	font-size: 1.5rem;
	font-weight: 500;
}

p {
	font-variation-settings: "wght" 400; /*regular*/
}

.button {
	border-radius: 10px;
	padding: 1rem;
	background-color: #a11515;
	width: fit-content;
	max-width: 65vw;
	text-decoration: none;
	box-shadow: 0px 0px 30px -18px rgba(0, 0, 0, 0.7);
}

.button:hover {
	background-color: #e01e1e;
}

/*-----------------HERO-----------------*/
#hero {
	min-height: 100vh;
}

#header {
	min-height: 10vh;
	text-align: right;
	padding: 2rem;
}

#header a {
	font-size: 1.2rem;
	margin: 0 1rem;
	font-variation-settings: "wght" 500; /*medium*/
	text-underline-offset: 0.3rem;
	text-decoration-thickness: 0.1rem;
}

#header a:hover {
	text-decoration-color: #a11515;
	text-decoration-thickness: 0.2rem;
}

#hero-content {
	min-height: 90vh;
	padding: 2rem;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto min-content min-content min-content auto;
	grid-template-areas:
		"logo ."
		"logo container"
		"logo container"
		"logo container"
		"logo .";
	row-gap: 1rem;
}

#hero-content #logo {
	grid-area: logo;
	justify-self: center;
	align-self: center;
	max-width: 50vw;
	max-height: 85vh;
}

#hero-content #container {
	grid-area: container;
	display: flex;
	flex-direction: column;
	line-height: 1;
	gap: 1rem;
}

#hero-content #container p {
	font-variation-settings: "wght" 500; /*medium*/
}

#hero-content #container h1 {
	font-size: 4rem;
	max-width: 30vw;
	font-variation-settings: "wght" 600; /*semi-bold*/
}

#hero-content #container a {
	font-variation-settings: "wght" 500; /*medium*/
}
/*-----------------SERVICE-----------------*/
#service {
	padding-top: 5rem;
}

#service-grid {
	margin-top: 7rem;
	display: grid;
	grid-template-columns: min-content min-content;
	grid-template-rows: repeat(3, 1fr);
	row-gap: 4rem;
	column-gap: 8vw;
	align-items: center;
	justify-items: center;
	justify-content: center;
}

.service-item {
	width: fit-content;
	max-width: 80vw;
	display: grid;
	grid-template-columns: min-content min-content;
	grid-template-rows: min-content min-content;
	grid-template-areas:
		"dot headline"
		". description";
	column-gap: 0.7rem;
	align-self: start;
}

.service-item .dot {
	padding: 0.7rem 0;
	font-size: 1.5rem;
	grid-area: dot;
}
.service-item h3 {
	padding: 0.7rem 0;
	grid-area: headline;
	font-variation-settings: "wght" 600; /*semi-bold*/
}
.service-item .description {
	width: 30rem;
	max-width: 70vw;
	grid-area: description;
}

/*-----------------CONTENT-----------------*/
#content {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 8rem;
}

.block {
	max-width: 80vw;
	background-color: rgba(229, 229, 229, 0.18);
	border-radius: 20px;
	padding: 0 3rem;
	margin-top: 2rem;
	box-shadow: 0px 0px 30px -18px rgba(0, 0, 0, 0.7);
}

.cause-item {
	margin: 2rem 0;
}

.cause-item h3 {
	font-variation-settings: "wght" 600; /*semi-bold*/
}

.cause-item p {
	padding-top: 0.5rem;
}

/*-----------------CONTACT-----------------*/
#contact {
	margin-top: 8rem;
}

#contact-content {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: 1/2 1/2;
	grid-template-rows: min-content min-content;
	grid-template-areas:
		"text text"
		"calltoaction mail";
	align-items: center;
	justify-content: center;
	row-gap: 1rem;
	column-gap: 1rem;
}

#contact-content p {
	min-width: 60vw;
	max-width: 70vw;
	grid-area: text;
}
#contact-content h3 {
	max-width: 70vw;
	grid-area: calltoaction;
	justify-self: end;
	font-variation-settings: "wght" 500; /*medium*/
}
#contact-content a {
	grid-area: mail;
	justify-self: start;
	font-variation-settings: "wght" 500; /*medium*/
}

#contact-content .button {
	max-width: 90vw;
	width: fit-content;
}

/*-----------------FOOTER-----------------*/
#footer {
	margin-top: 8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	background-color: #3e4454;
	height: 7vh;
	box-shadow: 0px 0px 30px -18px rgba(0, 0, 0, 0.7);
}

#footer a {
	text-decoration: none;
	font-size: 0.8rem;
	font-variation-settings: "wght" 600; /*semi-bold*/
	transition: all 0.2s;
}

#footer a:hover {
	text-decoration: underline;
}

/*-----------------IMPRESSUM-----------------*/


/*-----------------DATENSCHUTZ-----------------*/


/*-----------------MEDIA QUERIES-----------------*/
@media screen and (max-width: 1200px) {
	#service-grid {
		grid-template-columns: min-content;
	}

	#hero-content #logo {
		max-width: 40vw;
	}

	#hero-content #container h1 {
		width: min-content;
		font-size: 3rem;
	}
}

@media screen and (max-width: 750px) {
	#hero-content {
		grid-template-columns: 1fr;
		grid-template-rows: min-content min-content;
		grid-template-areas:
			"logo"
			"container";
		row-gap: 1rem;
		justify-items: center;
		justify-content: center;
		align-items: center;
		align-content: center;
		padding-top: 2rem;
	}

	#hero-content #container h1 {
		max-width: 80vw;
	}

	#hero-content #container p {
		grid-area: name;
		margin-top: 3rem;
	}

	#hero-content #container a {
		grid-area: button;
		align-self: center;
		justify-self: center;
		margin-top: 2rem;
		max-width: 100%;
	}

	#container {
		width: min-content;
		justify-content: start;
		align-items: start;
	}

	/*-----------------MOBILE-CONTACT-----------------*/

	#contact-content {
		margin-top: 1.5rem;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: min-content min-content min-content;
		grid-template-areas:
			"text"
			"calltoaction"
			"mail";
		align-items: center;
		align-content: center;
		justify-items: center;
		justify-content: center;
	}

	#contact-content h3 {
		margin-top: 3rem;
		grid-area: calltoaction;
		justify-self: center;
	}
	#contact-content a {
		grid-area: mail;
		justify-self: center;
	}
}

@media screen and (max-width: 450px) {
	h2 {
		max-width: 70vw;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#header {
		height: 5vh;
		padding-right: 0.5rem;
		padding-bottom: 0rem;
		padding-top: 1rem;
	}

	#header a {
		margin: 0 0.5rem;
		font-size: 1rem;
		text-decoration-thickness: 0.05rem;
	}

	#hero-content {
		padding: 4rem;
		padding-top: 0rem;
	}

	#hero-content #container p {
		justify-self: start;
	}

	#hero-content #container h1 {
		font-size: 2.2rem;
		justify-self: start;
	}

	#hero-content #container a {
		max-width: 100%;
	}

	.button {
		width: 100%;
		min-width: 60vw;
		overflow-wrap: anywhere;
	}

	#service {
		padding-top: 0;
	}

	#service h2,
	#content h2 {
		width: min-content;
	}

	#service-grid {
		margin-top: 4rem;
	}
}