*, *::before, *::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
input, button, textarea, select {
	font: inherit;
}
a { text-decoration: none; }

:root {
	--color-header-bkg:#1e355e;
	--color-header-txt:#FFF;

	--color-main-bkg: #FFF;
	--color-main-txt: #111;
	--color-red-accent: #ec1d26;

	--color-info-title-bkg:#DDD;
	--color-info-title-txt:#000;

	@media (prefers-color-scheme: dark) {
		--color-main-bkg: #222;
		--color-main-txt: #FFF;

		--color-info-title-bkg:#666;
		--color-info-title-txt:#FFF;
	}
}

.wpContent {
	width:100%;
	max-width:1100px;
	margin:0 auto;
}

.social-networks {
	display:flex;
	flex-direction: row;
	gap:1em;
	color:inherit;
	justify-content:end;

	& a {
		color:inherit;
	}
}
.communication-links {
	display:flex;
	flex-direction: row;
	gap:1em;
	color:inherit;

	& a {
		color:inherit;
	}
}

.final-links {
	display:flex;
	flex-direction: column;
	gap:0.5em;
	color:inherit;

	& a {
		color:inherit;
	}

	@media ( width <= 720px ) {
		width:fit-content;
		margin:0 auto;
	}
}

svg.icon {
	fill:currentColor;
	aspect-ratio:1;

	&.inline {
		height: 1em;
		display: inline-block;
	}
	&.mr {
		margin-right:0.5em;
	}
}

.hero-image {
	position:relative;
	aspect-ratio:16 / 9;
	overflow: hidden;

	& > img {
		position:absolute; 
		top:0;
		left:0;
		aspect-ratio:16 / 9;
	}

	& > .title {
		position:absolute;
		top:23%;
		left:5%;
		color:#FFF;
		text-shadow: #111 3px 3px;
		font-size: clamp(2rem, 0.7143rem + 5.7143vw, 5rem);
		font-weight:bold;
	}

	& > .description {
		display:inline-block;
		padding:1em;
		font-size: clamp(1rem, 0.7081rem + 1.2973vw, 1.6rem);
		background-color:#1e355eCC;
		position:absolute;
		top:40%;
		left:5%;
		width:60%;
		color:#FFF;
		text-shadow: #111 2px 2px;
		border-radius:10px;
	}

	@media (width <= 360px) {
		height:calc(100vh - 50px);
		aspect-ratio: unset;


		& > img {
			height:calc(100vh - 50px);
			object-fit: cover;
		}

		& > .title {
			top:35%;
		}
		& > .description {
			top:unset;
			bottom: 5vw;
			left:5vw;
			width: 90vw;
		}
	}

	@media ( 360px < width <= 720px ) {
		& > img {
			height:calc(100vh - 50px);
			object-fit: cover;
		}

		& > .title {
			top:30%;
			color:red;
		}
		& > .description {
			bottom:5vw;
			left:5vw;
			width: 90vw;
		}
	}
}

body {
	min-height:100vh;
	display:flex;
	flex-direction: column;
	font-family: sans-serif;

	color: var(--color-main-txt);
	background-color: var(--color-main-bkg);

	& .information {
		display:flex;
		flex-direction: column;
		gap:1em;
		padding:1em;
	}

	& > header {
		color: var(--color-header-txt);
		background-color: var(--color-header-bkg);

		& > .wpContent {
			display:flex;
			flex-direction: row;
			justify-content:space-between;
		}

		& > .mobile {
			display:none;
		}
	}

	& > main {
		flex:1;

		display:flex;
		flex-direction:column;
		gap:1em;
	}

	& > footer {
		color: var(--color-header-txt);
		background-color: var(--color-header-bkg);

		& > .wpContent {
			display:flex;
			flex-direction: column;
			gap:1em;
			padding:1em;
		}

		& .footer-row {
			display:flex;
			flex-direction: row;
			justify-content:space-between;
		}

		& .social-networks {
			justify-content: left;
		}
	}

	
	@media ( width <= 720px ) {
		& > header {
			height: 50px;

			& > .desktop {
				display:none;
			}

			& > .mobile {
				display:block;

				& > img {
					height:40px;
					margin:5px auto;
				}
			}
		}

		& > footer {
			text-align: center;

			& .footer-row {
				flex-direction: column;
				gap:1em;
			}

			& .social-networks {
				justify-content: center;
			}
		}
	}
}

.logo-container {
	position:relative;

	& img {
		width: 100%;
	}

	& .logo-image {
		position:absolute;
		width:200px;
		background-color: #FFF;
		padding:20px;
		border:2px solid var(--color-header-bkg);
		border-top:0;
		z-index:3;
	}

	@media ( width <= 720px ) {
		& .logo-image {
			position:unset;
			width:auto;
			height: 50px;
		}
	}
}

.information-section {
	padding:1em;
	display:flex;
	flex-direction:column;
	gap:1em;

	& > .title {
		font-weight:bold;
		font-size:1.8rem;
		text-transform:uppercase;
		
		padding:1em;
		width:fit-content;

		background-color: var(--color-info-title-bkg);
		color:var(--color-info-title-txt);

		b {
			color:var(--color-red-accent);
		}
	}

	& > .content {
		max-width: 900px;
		margin: 0 auto;
		display:flex;
		flex-direction:row;
		gap:1em;
		font-size:1.6rem;
	}

	& img {
		display: block;
		aspect-ratio: 1;
		background-color:#EEE;
		min-width: 400px;
		border-radius:5px;
	}

	@media ( width <= 720px ) {

		& > .title {
			font-size:1.3rem;
		}
	
		& > .content {
			flex-direction:column;
			font-size:1.2rem;
		}
	
		& img {
			min-width:unset;
		}
	
	}
}

.btn-more-info {
	display:block;
	font-weight: bold;
	margin:1em auto 0;
	width:fit-content;
	padding:1em;
	border-radius:3px;
	background-color: var(--color-header-bkg);
	color: #FFF;
	border-radius: 10px;
}

.logo-bottom {
	width:200px;

	@media ( width <= 720px ) {
		margin:1em auto;
	}
}