:root {
	--padding-container: 100px 0;
	--color-title: #001A49;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Poppins', sans-serif;
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	padding: var(--padding-container);
}

.hero {
	width: 100%;
	height: 100vh;
	min-height: 600px;
	max-height: 800px;
	position: relative;
	display: grid;
	grid-template-rows: 100px 1fr;
}

.hero:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
/*	background-image: url('../img/fer2.jfif');*/
	background-image: linear-gradient(180deg, #0000008c 0%, #ffffff8c 100%), url('../img/cargaB.jpg');
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	object-fit: fill;
	clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 95%, 0 80%);
	z-index: -1;
}

.nav {
	--padding-container: 0;
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
	justify-content: flex-end;
}

.nav__title {
	font-weight: 300;
	color: #fff;
}

.nav__link {
	display: grid;
	margin-left: auto;
	padding: 0;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	gap: 2em;
}

.nav__items {
	list-style: none;
}

.nav__links {
	color: #fff;
	text-decoration: none;
}

.nav__menu {
	background: none;
	margin-left: auto;
	cursor: pointer;
	display: none;
}

.nav__img {
	display: block;
	width: 30px;
}

.nav__close {
	display: var(--show, none);
}


/*HEro Container*/

.hero__container {
	max-width: 800px;
	display: grid;
	--padding-container: 0;
	grid-auto-rows: max-content;
/*	border: 1px solid black;*/
	align-content: center;
	gap: 1em;
	padding-bottom: 100px;
	text-align: justify;
}

.hero__title {
	font-size: 3rem;
}

.hero__paragraph {
	margin-bottom: 20px;
}

.cta {
	display: inline-block;
	background-color: #2091f9;
	justify-self: center;
	color: #fff;
	text-decoration: none;
	padding: 13px 30px;
	border-radius: 32px;
}


/*ABOUT*/

.about {
	text-align: center;
}

.subtitle {
	color: var(--color-title);
	font-size: 2rem;
	margin-bottom: 25px;
}

.about__paragraph {
	line-height: 1.7;
}

.about__main {
	padding-top: 80px;
	display: grid;
	width: 90%;
	margin: 0 auto;
	gap: 1em;
	overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(260px, auto));
}

.about__icons {
	display: grid;
	gap: 1em;
	justify-items: center;
	width: 260px;
	overflow: hidden;
	margin: 0 auto;
	text-align: justify;
}

.about__icon {
	width: 40px;
}

/*KNOWLEDGE*/

.knowledge {
	background-color: #e5e5f7;
/*	opacity: 0.8;*/
	background-image:  radial-gradient(#444cf7 0.5px, transparent 0.5px), radial-gradient(#444cf7 0.5px, #e5e5f7 0.5px);
	background-size: 20px 20px;
	background-position: 0 0,10px 10px;
	overflow: hidden;
}

.knowledge__container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	align-items: center;
}

.knowledge__picture {
	max-width: 500px;
}

.knowledge__img{
	width: 100%;
	display: block;
}

.footer-date {
	text-align: center;
	font-size: 0.6rem;
}

.hide {
	display: none;
}
@media (width <= 768px) {
	.hide {
		display: block;
	}

	.nav-collapse {
		display: none;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80vh;
		z-index: 3000;
		background-color: #fff9;
		margin: 0;
		place-content: center;
		/*color: #1b1b1b;*/
	}

	.visible {
		display: grid;
	}

	.btn-close {
		/*display: block;*/
		position: absolute;
		top: 40px;
		right: 40px;
		width: 26px;
		height: 26px;
		cursor: pointer;
		/*background-color: #111;*/
		border: none;
		background: none;
		&:hover {
			background: #fff;
			img {
				color: #fff;

			}
		}
		/*color: #fff;*/
	}

	.nav__link {
		display: flex;
		flex-direction: column;
		/*flex-grow: 1;*/
		place-content: center;
		margin: auto;
		width: 90vw;
		height: 60vh;
		color: #1b1b1b;
		gap: 0;
		/*text-align: ;*/
	}

	.nav__items {
		width: fit-content;
		margin: 0 30px 0.2em auto;
		padding: 1.6em 1em;
		border-right: 3px solid #1b1b1b83;
		cursor: pointer;
		transition: all .3s ease-in-out;
		&:hover {
			background-color: #1b1b1b83;
			border-right: 3px solid #1b1b1bf3;
			.nav__links {
				color: #fafafa;			
			}
		}
	}

	.nav__links {
		color: #1b1b1b;
		font-weight: 700;
	}

}