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

.hidden {
	display: none;
}

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

input {
	outline: none;
	border: 1px solid #333;
	padding: 5px 15px;
	border-radius: 5px;
	font-size: 16px;
}

select {
	font-size: 16px;
}

/* =====  files start  ==== */
.file-boxes {
	display: flex;
	justify-content: space-between;
}

.file-box {
	width: 49%;
}

.file-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
  }
  .file-upload input[type="file"] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
  .file-label {
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 5px;
  }
  .file-name {
    /* font-style: italic; */
    margin-left: 5px;
  }
  .preview-image {
    display: block;
    max-width: 200px;
	max-height: 200px;
    margin-top: 10px;
  }
/* =====  files end  ====== */


.w100 {
	width: 100%;
}

.w50 {
	width: 49.5%;
}

.ml20 {
	margin-left: 20px;
}

.mr10 {
	margin-right: 10px;
}

.mb10 {
	margin-bottom: 10px;
}

.mb40 {
	margin-bottom: 40px;
}

.bn {
	border: none;
}

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

li {
	list-style: none;
}

a {
	text-decoration: none;
}

.container {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "open-sans", sans-serif;
	font-size: 16px;
	position: relative;
}

.header {
	-webkit-box-shadow: 1px 15px 20px 0px rgba(34, 60, 80, 0.2);
	-moz-box-shadow: 1px 15px 20px 0px rgba(34, 60, 80, 0.2);
	box-shadow: 1px 15px 20px 0px rgba(34, 60, 80, 0.2);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
}

.header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	-webkit-box-shadow: 1px 15px 20px 0px rgba(34, 60, 80, 0.2);
	-moz-box-shadow: 1px 15px 20px 0px rgba(34, 60, 80, 0.2);
	box-shadow: 1px 15px 20px 0px rgba(34, 60, 80, 0.2);
	z-index: 3;
}

.header__body {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
}

.header__menu--list {
	display: flex;
	height: 24px;
	align-items: center;
}

.header__logo {
	z-index: 4;
	display: block;
	width: 200px;
	height: 50px;
}

.header__logo--img {
	display: block;
	width: 100%;
	height: 100%;
}

.header__menu--item {
	z-index: 4;
}

.header__menu--item:not(:first-child) {
	margin-left: 30px;
}

.header__menu--link {
	text-transform: capitalize;
	color: #000;
	font-weight: 300;
}

/* ============  main  ================= */

.main {
	background: linear-gradient(135deg, #eaf6f6, #3c6e71, #a5d8d8, #3c6e71);
	width: 100%;
	min-height: 100vh;
	margin-top: 80px;
	padding: 60px 0;
}

.main__info {
	max-width: 700px;
	margin: 0 auto 70px auto;
	text-align: center;
}

.main__title {
	font-size: 64px;
	line-height: 1.3;
	color: #fff;
	margin-bottom: 48px;
}

.main__text {
	color: #fff;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.3;
	margin-bottom: 5px;
}

.main__subtext {
	color: #000;
	line-height: 1.5;
	font-weight: 400;
	margin-bottom: 70px;
}

.main__link {
	border: 1px solid #fff;
	border-radius: 28px;
	padding: 20px;
	color: #fff;
	font-weight: 500;
}

.main__cards {
	display: flex;
	justify-content: space-between;
}

.main__card:not(:first-child) {
	margin-left: 10px;
}

.main__card {
	background-color: rgba(255, 255, 255, 0.1);
	width: 33%;
}

.main__card--img {
	width: 100%;
}

.main__card--img img {
	width: 100%;
}

.main__card--text {
	text-align: center;
	padding: 20px 15px;
}

/* =========  about-first  ============== */

.about__first {
	padding: 80px 0;
}

.about__first--container {
	display: flex;
}

.about__first--title {
	width: 50%;
	font-size: 32px;
	line-height: 1.3;
	margin-left: 40px;
}

.about__first--info {
	width: 50%;
	margin-left: 40px;
}

.about__first--text {
	line-height: 1.5;
	font-weight: 300;
	margin-bottom: 10px;
}

.about__first--count-blocks {
	display: flex;
	margin-bottom: 20px;
}

.about__first--count-block:not(:last-child) {
	margin-right: 80px;
}

.about__first--num {
	font-size: 48px;
	line-height: 1.3;
	font-weight: 500;
	color: #3c6e71;
}

.about__first--num-info {
	line-height: 1.5;
	font-weight: 300;
}

.about__first--img {
}

.about__first--img img {
	border-radius: 20px;
	display: block;
	width: 100%;
}

/* =============  about-second  ================== */

.about__second {
	background: #1a3b4d;
	padding: 80px 0;
	text-align: center;
}

.about__second--title {
	font-size: 32px;
	line-height: 1.3;
	font-weight: 500;
	color: #fff;
	margin-bottom: 20px;
}

.about__second--subtitle {
	font-weight: 400;
	line-height: 1.5;
	color: #fff;
	margin-bottom: 80px;
}

.about__second--blocks-photo {
	display: flex;
	gap: 2%;
}

.about__second--block-photo {
	width: 32%;
}

.about__second--block-photo img {
	display: block;
	width: 100%;
	border-radius: 20px 20px 0 0;
}

.about__second--blocks-info {
	display: flex;
	gap: 2%;
}

.about__second--block-info {
	background-color: #fff;
	width: 100%;
	padding: 30px;
	min-height: 40%;
}

.about__second--block-title {
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: 20px;
}

.about__second--block-text {
	font-weight: 300;
}

/* ============  contacts  ================= */

.contacts {
	padding: 80px 0;
}

.contacts__container {
	display: flex;
}

.contacts__left {
	width: 50%;
}

.contacts__left--title {
	font-size: 48px;
	line-height: 1.3;
	margin-bottom: 15px;
}

.contacts__left--subtitle {
	line-height: 1.5;
	font-weight: 300;
	max-width: 70%;
}

.contacts__right {
	width: 50%;
}

.contacts__form {
	padding: 0 20px 20px 20px;
	border-radius: 0 0 0 20px;
	z-index: 2;
	position: relative;
	background: #fff;
	border-left: 1px solid #333;
	border-bottom: 1px solid #333;
}

.contacts__form--title {
	margin-bottom: 20px;
}

.contacts__form--radio {
	display: flex;
	justify-content: space-between;
}

.labels {
	display: flex;
}

.contacts__form--radio p {
	display: inline-block;
	margin-right: 20px;
}

.contacts__form--radio label {
	margin-right: 40px;
}

.contacts__image {
	width: 100%;
	transform: translateY(-60px);
}

.contacts__image img {
	display: block;
	width: 100%;
	border-radius: 20px;
}

button {
	border: 1px solid #333;
	border-radius: 10px;
	padding: 10px 50px;
	font-size: 16px;
	background-color: rgba(160, 20, 20, 0.9);
	color: #fff;
	margin-top: 20px;
	margin-bottom: 20px;
}
/* ============  footer  =============== */

.footer {
	padding: 80px 0;
	background: #1a3b4d;
	color: #fff;
}

.footer__container {
	display: flex;
	justify-content: space-around;
}

.footer__left--title {
	font-size: 26px;
	line-height: 1.3;
	margin-bottom: 30px;
}

.footer__left--subtitle {
	font-weight: 300;
	margin-bottom: 10px;
}

.footer__left--privacy {
	display: flex;
	gap: 10px;
}

.footer__left--privacy a {
	color: #fff;
	text-decoration:underline;
}

.footer__right--title {
	font-size: 20px;
	margin-bottom: 30px;
}

.footer__right--phone {
	margin-bottom: 10px;
}

/* =========  popup  =============== */

.popup {
	display: none;
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	padding: 20px 30px;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-shadow: 0 0 10px #999;
	z-index: 999;
}

/* =============  media max 430  ==================== */

@media (max-width: 430px) {
	body.lock {
		overflow: hidden;
	}

	.container {
		padding: 0 40px;
	}

	/* ========  header  ============ */

	.header {
		justify-content: space-between;
	}

	.header__body {
		padding: 20px 0;
	}

	.header__logo {
		z-index: 4;
		height: 30px;
		width: 120px;
	}

	.header__menu {
		position: fixed;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding: 100px 40px 0 40px;
		transition: all 0.3s ease 0s;
	}

	.header__menu.active {
		top: 0;
	}

	.header__menu--list {
		flex-direction: column;
		align-items: end;
	}

	.header__menu--item {
		margin-bottom: 20px;
		font-size: 20px;
	}

	.header__menu--item:not(:first-child) {
		margin-left: 0;
	}

	/* ===========  main  =============== */

	.main {
		margin-top: 68px;
		padding: 68px 0;
	}

	.main__info {
		max-width: 85%;
		margin-bottom: 100px;
	}

	.main__title {
		font-size: 40px;
		margin-bottom: 38px;
		font-weight: 500;
	}

	.main__text {
		font-size: 16px;
		margin-bottom: 20px;
		letter-spacing: 0.5px;
	}

	.main__subtext {
		margin-bottom: 90px;
		letter-spacing: 0.5px;
	}

	.main__cards {
		flex-direction: column;
	}

	.main__card {
		margin-bottom: 15px;
		width: 100%;
	}

	.main__card--text {
		padding: 40px;
	}

	.main__card:not(:first-child) {
		margin-left: 0px;
	}

	/* ===============  about (first)  ================ */

	.about__first {
		padding: 68px 0;
	}

	.about__first--info {
		margin-left: 0;
		margin-bottom: 20px;
		width: 100%;
	}

	.about__first--title {
		font-size: 24px;
		margin: 0 0 20px 0;
	}

	.about__first--text {
		margin-bottom: 20px;
	}

	.about__first--num {
		font-size: 30px;
	}

	.about__first--container {
		flex-direction: column;
	}

	/* ===============  about (second)  ================= */

	.about__second {
		padding: 68px 0;
	}

	.about__second--blocks-photo {
		flex-direction: column;
	}

	.about__second--block-photo {
		width: 100%;
		margin-bottom: 15px;
	}

	.about__second--block-info {
		padding: 15px;
		min-height: 150px;

	}

	/* ===============  contacts  ===================== */

	.contacts {
		padding: 68px 0;
	}

	.contacts__container {
		flex-direction: column;
	}

	/* ============  contacts (left)  ============= */

	.contacts__left--title {
		font-size: 32px;
	}

	/* =============  contacts (right)  ================ */

	.contacts__right {
		width: 100%;
	}

	.contacts__left {
		width: 100%;
		text-align: center;
	}

	.contacts__left--subtitle {
		max-width: 100%;
		margin-bottom: 50px;
	}

	.contacts__form {
		padding: 0;
		border-radius: 0 0 0 0px;
		border: none;
	}

	.contacts__form--radio {
		flex-direction: column;
	}

	.contacts__form--radio p {
		display: inline-block;
		width: 100%;
		margin-bottom: 10px;
	}

	.contacts__form--radio label {
		margin-bottom: 10px;
	}

	.contacts__image {
		transform: translateY(0px);
	}

	/* =====  form files  ======= */

	.file-boxes {
		display: block;
	}
	
	.file-box {
		width: 100%;
		margin-bottom: 10px;
	}

	/* =========  footer  ============= */

	.footer__container {
		flex-direction: column;
	}

	.footer__left {
		margin-bottom: 60px;
	}

	.footer__left--title {
		margin-bottom: 20px;
	}

	/* ===========  other  ============== */

	.w50 {
		width: 100%;
	}

	.w75 {
		width: 75%;
	}

	button {
		margin-bottom: 40px;
	}

	/* ==========  burger  =============== */

	.header__burger {
		display: block;
		position: relative;
		width: 30px;
		height: 20px;
		z-index: 4;
	}

	.header__burger.active::before {
		transform: rotate(45deg);
		top: 9px;
	}

	.header__burger.active::after {
		transform: rotate(-45deg);
		bottom: 9px;
	}
	.header__burger.active span {
		transform: scale(0);
	}

	.header__burger span {
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #333;
		left: 0;
		top: 9px;
		transform: scale(1);
		transition: all 0.3s ease 0s;
	}

	.header__burger::before,
	.header__burger::after {
		content: "";
		position: absolute;
		background-color: #333;
		width: 100%;
		height: 2px;
		left: 0;
		transition: all 0.3s ease 0s;
	}

	.header__burger::before {
		top: 0;
	}

	.header__burger::after {
		bottom: 0;
	}
}