:root {
	--max-width-screen: 1080px;
	--blue: #232b79;
	--orange: #ed9805;
}

* {
	margin: 0;
	padding: 0;
	font-family: "roboto slab", serif;
	list-style: none;
}

html {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
}

.header {
	height: 100px;
	display: flex;
	justify-content: center;
	background: linear-gradient(#121212, var(--blue));
}

.header__container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: var(--max-width-screen);
	align-items: center;
	width: 100%;
	padding: 12px 32px;
}

.header__container__image {
	height: 100%;
}

.header__container__nav {
	display: flex;
	flex-direction: row;
	list-style: none;
	gap: 12px;
}

.header__container__nav__item {
	text-decoration: none;
	color: white;
}

.header__container__burger_menu {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	height: 20px;
	width: 25px;
	cursor: pointer;
	position: relative;
	z-index: 1;
}

.header__container__burger_menu.active .header__container__burger_menu__item:nth-child(1) {
	transform: rotate(45deg);
	top: 9px;
}

.header__container__burger_menu.active .header__container__burger_menu__item:nth-child(2) {
	opacity: 0;
}

.header__container__burger_menu.active .header__container__burger_menu__item:nth-child(3) {
	transform: rotate(-45deg);
	top: -9px;
}

.header__container__burger_menu__item {
	width: 100%;
	height: 2px;
	background-color: white;
	position: relative;
	transition: all 0.3s ease-in-out;
}

.hero {
	display: flex;
	justify-content: center;
	height: calc(80vh - 120px);
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/banner.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero__container {
	max-width: var(--max-width-screen);
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero__container__texts {
	background-color: var(--blue);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 2rem 6rem;
}

.hero__container__texts__item {
	color: #f1c50e;
	font-size: clamp(1.5rem, 1.069rem + 1.3793vw, 3rem);
	font-weight: 600;
}

.about {
	display: flex;
	justify-content: center;
}

.about__container {
	display: flex;
	flex-direction: row;
	max-width: var(--max-width-screen);
	width: 100%;
	padding: 64px 32px;
	gap: 16px;
}

.about__container__picture {
	max-width: 50%;
}

.about__container__picture__image {
	width: 100%;
}

.about__container__texts {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 50%;
}

.about__container__texts__title {
	margin-bottom: 4px;
	font-size: clamp(1.5rem, 1.2845rem + 0.6897vw, 1.75rem);
}

.about__container__texts__buttons {
	display: flex;
	flex-direction: row;
	gap: 12px;
	margin-top: .5rem;
}

.factory {
	display: flex;
	justify-content: center;
	background-color: #c8d1db;
}

.factory__container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	max-width: var(--max-width-screen);
	width: 100%;
}

.factory__container__texts {
	display: flex;
	flex-direction: column;
}

.factory__container__texts__text {
	font-weight: bold;
	font-size: clamp(1.5rem, 1.069rem + 1.3793vw, 2rem);
	color: #213c8f;
}

.factory__container__texts__subtext {
	font-size: clamp(1.375rem, 1.0517rem + 1.0345vw, 1.75rem);
	color: #000;
}

.factory__container__solutions {
	display: flex;
	flex-direction: column;
	list-style: none;
	gap: 12px;
}

.factory__container__solution {
	display: block;
	background-color: #213c8f;
	color: white;
	padding: 12px;
	text-align: center;
	font-size: clamp(1.125rem, 0.9095rem + 0.6897vw, 1.375rem);
	cursor: pointer;
	text-decoration: none;
}

.mentoring {
	display: flex;
	justify-content: center;
	background-color: #f2f2f2;
}

.mentoring__container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	max-width: 870px;
	padding: 32px;
}

.mentoring__container__texts {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	margin-bottom: 12px;
}

.mentoring__container__image {
	object-fit: cover;
	width: 100%;
}

.values {
	display: flex;
	justify-content: center;
	background-color: white;
}

.values__container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	max-width: var(--max-width-screen);
	width: 100%;
}

.values__container__texts {
	display: flex;
	flex-direction: column;
	color: white;
	background-image: url("../images/values-bg.webp");
	padding: 0 64px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	max-width: 100vw;
	height: 100%;
}

.values__container__texts__title {
	margin-top: 12px;
}

.values__container__texts__values {
	display: grid;
	grid-template:
		"values__container__texts__values__item values__container__texts__values__item"
		"values__container__texts__values__item values__container__texts__values__item"
	;
	gap: 12px;
	margin-top: 16px;
}

.values__container__texts__values__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
	text-align: center;
	padding: 12px;
	gap: 8px;
	max-width: 150px;
	width: 100%px;
	height: auto;
	color: black;
}

.values__container__image {
	object-fit: cover;
	width: auto;
}

.newsletter {
	display: flex;
	justify-content: center;
	background-image: url(../images/newsletter.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.newsletter__container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	max-width: 870px;
	background-color: white;
	margin: 32px 0;
}

.newsletter__container__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 64px 64px 32px 64px;
}

.newsletter__container__form__wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.newsletter__container__form__wrapper__input {
	border: 1px solid black;
	border-radius: 0;
	outline: 0;
	margin-left: 4px;
	padding: 12px 32px 12px 12px;
}

.newsletter__container__form__wrapper__button {
	text-transform: uppercase;
	border: none;
	padding: 13px 22px;
	background-color: var(--blue);
	color: white;
}

.newsletter__container__form__lgpd {
	max-width: 450px;
}

.newsletter__container__social {
	background-color: #f2f2f2;
	padding: 32px 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.newsletter__container__social__networks {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 4px;
	gap: 8px;
}

.course {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 32px;
	color: white;
	flex: 1;
	background: url(../images/course.webp);
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.course__text {
	padding: 8px 0 12px 0;
	text-align: center;
}

.contact {
	display: flex;
	justify-content: center;
	width: 100%;
}

.contact__container {
	max-width: var(--max-width-screen);
	display: flex;
	justify-content: center;
	flex-direction: row;
	width: 100%;
	gap: 22px;
}

.contact__container__texts {
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 12px;
	width: 50%;
	font-size: 20px;
	color: #808080;
}

.contact__container__form {
	display: flex;
	flex-direction: column;
	width: 50%;
	gap: 4px;
	justify-content: center;
	align-items: center;
}

.contact__container__form__input {
	border-radius: 0;
	border: none;
	background-color: #f2f2f2;
	padding: 12px;
	width: 100%;
}

.contact__container__form__input:nth-child(3) {
	margin-bottom: 12px;
}

.curriculum {
	width: 100%;
	display: flex;
	justify-content: center;
}

.curriculum__container {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: var(--max-width-screen);
	flex: 1;
}

.curriculum__container::before {
	content: "";
	position: absolute;
	top: 14%;
	left: 38%;
	background-color: yellow;
	width: 100%;
	height: 100%;
	max-width: 500px;
	max-height: 380px;
	z-index: -1;
}

.curriculum__container__texts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 500px;
	border: 1px solid black;
	padding: 16px;
	position: relative;
	background-color: white;
	z-index: 1;
}

.curriculum__container__texts__title {
	margin-bottom: 2px;
}

.curriculum__container__texts__subtitle {
	margin-bottom: 2px;
}

.curriculum__container__texts__subsubtitle {
	margin-bottom: 8px;
}

.curriculum__container__texts__paragraph {
	margin-bottom: 8px;
}

.curriculum__container__texts__paragraph:nth-child(3) {
	margin-bottom: 16px;
}

.portfolio {
	display: flex;
	justify-content: center;
	width: 100%;
}

.portfolio__container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 32px;
	max-width: var(--max-width-screen);
	width: 100%;
}

.portfolio__container__title {
	font-size: clamp(2rem, 2.1379rem + 2.7586vw, 4rem);
	color: var(--blue);
	margin-bottom: 16px;
}

.portfolio__container__text {
	margin-bottom: 12px;
}

.portfolio__container__images {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	user-select: none;
}

.portfolio__container__images__item {
	width: 180px;
	height: 270px;
	position: relative;
	cursor: pointer;
}

.portfolio__container__images__item__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolio__container__images__item__text {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}

.portfolio__container__images__item__text__paragraph {
	color: white;
	font-size: 22px;
	font-weight: 600;
}

.customer {
	margin-top: 64px;
	display: flex;
	justify-content: center;
	width: 100%;
}

.customer__container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: var(--max-width-screen);
	width: 100%;
}

.customer__container__image {
	max-width: 500px;
	width: 100%;
	height: auto;
}

.portfolio_images {
	display: flex;
	justify-content: center;
}

.portfolio_images__container {
	display: flex;
	justify-content: center;
	row-gap: 8px;
	column-gap: 8px;
	flex-wrap: wrap;
	padding: 32px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.portfolio_images__container__title {
	display: block;
	font-weight: 600;
	font-size: 2rem;
	margin-top: 22px;
}

.portfolio_images__container__subtitle {
	display: block;
}

.portfolio_images__container__images {
	display: flex;
	justify-content: center;
	row-gap: 8px;
	column-gap: 8px;
	flex-wrap: wrap;
}

.portfolio_images__container__images__image {
	height: auto;
	width: 100%;
	max-width: 500px;
}


footer {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32px;
	background-color: black;
	color: white;
	text-align: center;
}

@media screen and (max-width: 1080px) {
	.header__container__nav {
		position: fixed;
		flex-direction: column;
		padding-top: 32px;
		justify-content: flex-start;
		align-items: center;
		gap: 22px;
		background-color: #121212;
		left: -50%;
		top: 0;
		height: 100vh;
		width: 50%;
		transition: .3s ease-in-out;
	}

	.header__container__nav.active {
		left: 0;
		top: 0;
	}

	.header__container__burger_menu {
		display: flex;
	}

	.hero__container__texts {
		padding: 2rem;
	}

	.about__container {
		align-items: center;
		flex-direction: column;
	}

	.about__container__picture {
		max-width: 100%;
	}

	.about__container__texts {
		width: 100%;
	}

	.factory__container {
		flex-direction: column;
		gap: 32px;
	}

	.factory__container__texts {
		align-items: center;
		text-align: center;
	}

	.values__container {
		padding: 0;
		flex-direction: column-reverse;
	}

	.values__container__texts {
		align-items: center;
		padding: 12px 32px;
	}

	.values__container__image {
		max-width: 100vw;
	}

	.newsletter__container {
		width: 100%;
	}

	.newsletter__container__form__wrapper__label {
		display: none;
	}

	.contact__container {
		flex-direction: column;
		align-items: center;
	}

	.curriculum__container::before {
		display: none;
	}
}