* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23000000' fill-opacity='1'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	--main-color: #fa8100;
	--main-transparent-color: rgba(250, 129, 0, 0.9);
	--secondary-color: #ffc77d;
	--secondary-transparent-color: rgba(255, 199, 125, 0.98);
}

input,
button,
textarea,
select {
	font: inherit;
}

p {
	line-height: 2;
}

.page {
	background-color: var(--secondary-transparent-color);
}

.lakate-background {
	background-image: url("img/paysage.jpg");
	background-size: cover;
	background-position: 0% 50%;
	border-radius: 0 0 300px 300px;
}

.lakate {
	padding: 40px 10px;
	background-color: var(--main-transparent-color);
	border-radius: 0 0 300px 300px;
}

.lakate .logo {
	display: block;
	margin: auto;
	margin-bottom: 40px;
	width: 200px;
	border-radius: 30px;
}

.presentation {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 100px;
	margin-bottom: 40px;
}

.presentation h1 {
	width: fit-content;
	margin-bottom: 20px;
	padding: 10px;
	background-color: var(--secondary-color);
	color: var(--main-color);
	border-radius: 5px;
}

.presentation p {
	max-width: 500px;
	color: white;
}

.presentation img {
	max-width: 25%;
}

.cards {
	display: flex;
	justify-content: center;
	gap: 50px;
	padding: 100px 50px;
}

.card {
	padding: 20px 50px;
	background-color: rgba(255, 255, 255, 0.7);
	border-top: 10px solid var(--main-color);
	border-bottom: 10px solid var(--main-color);
	border-radius: 20px;
	text-align: center;
}

.card img {
	width: 70px;
}

.card h2 {
	margin: 20px 0;
	color: var(--main-color);
}

.block {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 100px;
	padding: 100px 10px;
	background-color: var(--main-transparent-color);
	border-radius: 300px 300px 0 0;
}

.block h1 {
	width: fit-content;
	margin-bottom: 20px;
	padding: 10px;
	background-color: var(--secondary-color);
	color: var(--main-color);
	border-radius: 5px;
}

.block p {
	max-width: 800px;
	color: white;
}

.block img {
	max-width: 30%;
}

.contact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50px 0;
	background-color: var(--secondary-transparent-color);
	color: var(--main-color);
}

.contact h1 {
	width: fit-content;
	padding: 10px;
	background-color: var(--main-color);
	color: white;
	border-radius: 5px;
}

.contact h3 {
	margin-bottom: 10px;
	text-decoration: underline;
}

.contact ul {
	line-height: 2;
}

form div {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 30px 0;
}

form label {
	font-weight: bold;
}

form input,
form textarea {
	padding: 10px;
	border: none;
	border-radius: 10px;
	font-size: 1.1rem;
}

form input {
	height: 20px;
}

form button {
	display: block;
	margin: 30px auto;
	padding: 15px 100px;
	background-color: var(--main-color);
	border: none;
	border-radius: 10px;
	color: white;
	font-size: 1.3rem;
}

form button:hover {
	background-color: #ff8d00;
	cursor: pointer;
}

.main {
	padding: 50px 0;
}

.main h1 {
	width: fit-content;
	margin: auto;
	margin-bottom: 50px;
	padding: 10px;
	background-color: var(--main-color);
	color: white;
}

.main h2 {
	margin: 30px 0;
	color: var(--main-color);
}

.main p {
	line-height: 2;
}

.main ul {
	list-style-position: inside;
}

.main .content {
	max-width: 1000px;
	margin: auto;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
	background-color: var(--main-color);
	text-align: center;
	font-size: 1rem;
}

footer span {
	margin-right: 20px;
}

footer a {
	padding: 0 20px;
	text-decoration: none;
	border-left: 1px solid black;
	color: black;
}

footer a:hover {
	color: white;
}

@media (max-width: 1200px) {
	.lakate-background,
	.lakate {
		border-radius: 0 0 100px 100px;
	}

	.lakate {
		padding: 40px 50px;
	}

	.presentation img {
		display: none;
	}

	.presentation p {
		max-width: 800px;
	}

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

	.block {
		border-radius: 100px 100px 0 0;
		gap: 50px;
	}

	.main {
		padding: 50px 10px;
	}
}

@media (min-width: 768px) {
	form {
		min-width: 500px;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 1rem;
	}

	.cards {
		padding: 30px 10px;
	}

	.block {
		padding: 40px 50px;
	}

	.block img {
		display: none;
	}

	form input,
	form textarea,
	form button {
		font-size: 1rem;
	}

	footer {
		flex-direction: column;
	}

	footer span {
		margin-right: 0;
		margin-bottom: 10px;
	}

	footer a {
		padding: 10px 0;
		border-left: 0;
		border-top: 1px solid black;
	}
}