:root {
	--white: #FFFFFF;
	--base-color: #0385FF;
	--base-color-hover: #036DC9;
	--blue-light: #71BCFD;
	--black: #0A0A0A;
	--black-light: #000F1C;
}

@font-face {
    font-family: "Inter";
    src: local('Inter Regular'), local('Inter-Regular'),
        url('./fonts/Inter-Regular.woff2') format('woff2'),
        url('./fonts/Inter-Regular.woff') format('woff'),
        url('./fonts/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: local('Inter Medium'), local('Inter-Medium'),
        url('./fonts/Inter-Medium.woff2') format('woff2'),
        url('./fonts/Inter-Medium.woff') format('woff'),
        url('./fonts/Inter-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: local('Inter Semi Bold'), local('Inter-Semi-Bold'),
        url('./fonts/Inter-SemiBold.woff2') format('woff2'),
        url('./fonts/Inter-SemiBold.woff') format('woff'),
        url('./fonts/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: local('Inter Bold'), local('Inter-Bold'),
        url('./fonts/Inter-Bold.woff2') format('woff2'),
        url('./fonts/Inter-Bold.woff') format('woff'),
        url('./fonts/Inter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    font-family: "Inter", sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

button {
    font-family: "Inter", sans-serif;
    outline: none;
    border: none;
    cursor: pointer;
}

input,
textarea,
select {
    font-family: "Inter", sans-serif;
    outline: none;
}

ul,
li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
}

p {
    font-weight: 400;
    padding: 0;
    margin: 0;
}

a,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    outline: none;
}

body {
	background: var(--black-light);
}

html.no-scroll {
    overflow: hidden;
}

.container {
	max-width: 1280px;
	padding: 0 20px;
	margin: 0 auto;
}

.button {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-align: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	height: 44px;
	background: var(--base-color);
	border-radius: 100px;

	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	letter-spacing: 0.01em;
	color: var(--white);
	cursor: pointer;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.button:hover {
	background: var(--base-color-hover);
}

.d-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.ai-center {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.jc-center {
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.jc-between {
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.fd-column {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.g-10 {
	gap: 10px;
}

.g-16 {
	gap: 16px;
}

.header {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
    padding-top: 40px;
}

.header .button {
	width: 190px;
}

.location {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	color: var(--white);
}

.location span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 20px;
	height: 24px;
}

.location span img {
	width: 100%;
	height: 100%;
}

.logo {
	max-width: 126px;
}

.logo img {
	width: 100%;
	height: 100%;
}

.main {
	padding-top: 232px;
	margin: -84px 0 148px;
}

.main__container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 20px;
}

.main__logo {
	width: 295px;
	height: 56px;
	margin-bottom: 70px;
}

.main__logo img {
	width: 100%;
	height: 100%;
}

.main .button {
	display: none;
}

.main__content .button {
	display: flex;
}

.title {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 48px;
	color: var(--white);
	text-transform: uppercase;
	margin-bottom: 22px;
}

.title span {
	opacity: 0.8;
}

.main__content {
	max-width: 505px;
}

.main__form div {
	position: relative;
	margin-bottom: 10px;
}

.main__form div::before {
	content: "";
	position: absolute;
	background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='44' height='44' rx='22' fill='white'/%3E%3Cpath d='M19.8058 28.4623L23.8295 31.9645C24.0764 32.1856 24.3851 32.3467 24.725 32.4317C25.0649 32.5166 25.4243 32.5224 25.7676 32.4486C26.113 32.3784 26.432 32.2317 26.6938 32.0225C26.9557 31.8133 27.1515 31.5489 27.2627 31.2544L33.8704 13.9372C34.0084 13.6128 34.0369 13.2605 33.9525 12.9223C33.868 12.5841 33.6744 12.2742 33.3945 12.0294C33.1146 11.7847 32.7601 11.6153 32.3734 11.5415C31.9866 11.4678 31.5836 11.4926 31.2127 11.6132L11.4076 17.391C11.0592 17.495 10.7489 17.6785 10.5088 17.9225C10.2686 18.1665 10.1074 18.4622 10.0417 18.7789C9.97388 19.067 9.98897 19.3653 10.0856 19.647C10.1823 19.9287 10.3575 20.185 10.5954 20.3928L15.6528 24.8149L15.4867 30.4152L19.8058 28.4623Z' stroke='%23161829' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33.2799 11.9681L15.6528 24.8148' stroke='%23161829' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	width: 44px;
	height: 44px;
}

.main__form input {
	width: 100%;
	height: 44px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 12px 24px 12px 56px;
	border: 2px solid var(--white);
	border-radius: 100px;
	background: transparent;

	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.7);
}

.main__form .button {
	width: 100%;
}

.main__img {
	position: relative;
	max-width: 610px;
	height: 428px;
}

.main__img img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 32px;
}

.main__img::before {
	content: "";
	position: absolute;
	width: 200px;
	height: 200px;
	background: center / cover no-repeat url(./img/sticker.avif);
	left: -110px;
	top: -64px;
}

.about__content {
	margin-bottom: 128px;
}

.about__title {
	margin-bottom: 30px;
}

.about__title-img {
	max-width: 232px;
	height: 78px;
}

.about__title-img img {
	width: 100%;
	height: 100%;
}

.about__title h2 {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 34px;
	text-transform: uppercase;
	background: -o-linear-gradient(300.39deg, var(--base-color-hover) 22.73%, var(--blue-light) 49.05%, var(--base-color-hover) 95.83%);
	background: linear-gradient(149.61deg, var(--base-color-hover) 22.73%, var(--blue-light) 49.05%, var(--base-color-hover) 95.83%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}

.about__list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 20px;
}

.about__item {
	width: calc(100% / 3 - 14px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	height: 192px;
	background: var(--white);
	-webkit-box-shadow: 0px 2px 20px rgba(41, 52, 43, 0.05);
	        box-shadow: 0px 2px 20px rgba(41, 52, 43, 0.05);
	border-radius: 14px;
	padding: 30px 30px 22px 30px;
}

.about__item:nth-child(4),
.about__item:nth-child(5) {
	width: calc(50% - 10px);
}

.about__item h4 {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 100%;
	color: rgba(0, 15, 28, 0.6);
}

.about__item p {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 100%;
	text-align: right;
	color: var(--base-color);
}

.feedback {
	position: relative;
	max-width: 820px;
	margin: 0 auto 148px;
	z-index: 0;
}

.feedback__title {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 34px;
	text-align: center;
	text-transform: uppercase;
	color: var(--white);
	margin-bottom: 30px;
}

.feedback__field {
	position: relative;
	max-width: 400px;
	margin: 0 auto 20px;
}

.feedback__field input {
	width: 100%;
	height: 44px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 12px 24px;
	border: 2px solid var(--white);
	border-radius: 100px;
	background: transparent;

	text-align: center;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: rgba(255, 255, 255, 0.7);
}

.feedback__field--error input {
	border: 2px solid red;
}

.feedback__field-tg input {
	padding: 12px 24px 12px 56px;
}

.feedback__field-tg::before {
	content: "";
	position: absolute;
	background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='44' height='44' rx='22' fill='white'/%3E%3Cpath d='M19.8058 28.4623L23.8295 31.9645C24.0764 32.1856 24.3851 32.3467 24.725 32.4317C25.0649 32.5166 25.4243 32.5224 25.7676 32.4486C26.113 32.3784 26.432 32.2317 26.6938 32.0225C26.9557 31.8133 27.1515 31.5489 27.2627 31.2544L33.8704 13.9372C34.0084 13.6128 34.0369 13.2605 33.9525 12.9223C33.868 12.5841 33.6744 12.2742 33.3945 12.0294C33.1146 11.7847 32.7601 11.6153 32.3734 11.5415C31.9866 11.4678 31.5836 11.4926 31.2127 11.6132L11.4076 17.391C11.0592 17.495 10.7489 17.6785 10.5088 17.9225C10.2686 18.1665 10.1074 18.4622 10.0417 18.7789C9.97388 19.067 9.98897 19.3653 10.0856 19.647C10.1823 19.9287 10.3575 20.185 10.5954 20.3928L15.6528 24.8149L15.4867 30.4152L19.8058 28.4623Z' stroke='%23161829' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33.2799 11.9681L15.6528 24.8148' stroke='%23161829' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	width: 44px;
	height: 44px;
}

.feedback .button {
	max-width: 400px;
	width: 100%;
	margin: 0 auto;
}

.footer__container {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding: 60px 0 102px;
}

.footer__logo {
	max-width: 200px;
	height: 38px;
	margin-bottom: 14px;
}

.footer__logo img {
	width: 100%;
	height: 100%;
	margin-bottom: 14px;
}

.footer p {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 34px;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
}

.popup-wrapper,
.popup-success {
	width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: none;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-transition-delay: 0.05s;
         -o-transition-delay: 0.05s;
            transition-delay: 0.05s;
    opacity: 0;
    z-index: -9999;
    background: rgba(0, 0, 0, 0.5);
}

.popup-wrapper--active,
.popup-success--active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	opacity: 1;
    z-index: 9999;
}

.popup {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative;
    background: var(--white);
    width: 510px;
    z-index: 99999;
    margin: auto;
    border-radius: 12px;
    -webkit-filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.14));
            filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.14));
    padding: 24px;
	cursor: default;
}

.popup .feedback {
	margin-bottom: 0;
}

.popup .feedback__title {
	color: var(--black);
}

.popup .feedback__field input {
	border: 2px solid var(--black);
	color: rgba(0, 0, 0, 0.7);
}

.popup .feedback__field-tg::before {
	content: "";
	position: absolute;
	background-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='44' height='44' rx='22' fill='%23161829'/%3E%3Cpath d='M19.8058 28.4623L23.8295 31.9645C24.0764 32.1856 24.3851 32.3467 24.725 32.4317C25.0649 32.5166 25.4243 32.5224 25.7676 32.4486C26.113 32.3784 26.432 32.2317 26.6938 32.0225C26.9557 31.8133 27.1515 31.5489 27.2627 31.2544L33.8704 13.9372C34.0084 13.6128 34.0369 13.2605 33.9525 12.9223C33.868 12.5841 33.6744 12.2742 33.3945 12.0294C33.1146 11.7847 32.7601 11.6153 32.3734 11.5415C31.9866 11.4678 31.5836 11.4926 31.2127 11.6132L11.4076 17.391C11.0592 17.495 10.7489 17.6785 10.5088 17.9225C10.2686 18.1665 10.1074 18.4622 10.0417 18.7789C9.97388 19.067 9.98897 19.3653 10.0856 19.647C10.1823 19.9287 10.3575 20.185 10.5954 20.3928L15.6528 24.8149L15.4867 30.4152L19.8058 28.4623Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M33.2799 11.9681L15.6528 24.8148' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	width: 44px;
	height: 44px;
}

.popup-success .popup {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 60px;
	width: 548px;
	text-align: center;
}

.popup-success .popup__img {
	width: 60px;
	height: 60px;
	margin-bottom: 10px;
}

.popup-success .popup__img img {
	width: 100%;
	height: 100%;
}

.popup-success .popup__title {
	font-family: "Inter", sans-serif;;
	font-weight: 700;
	font-size: 28px;
	line-height: 110%;
	color: var(--black-light);
	margin-bottom: 4px;
}

.popup-success .popup__subtitle {
	font-family: "Inter", sans-serif;;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	color: var(--black-light);
}

@media screen and (max-width: 1280px) {
	.container {
		max-width: 1028px;
	}

	.header {
		padding-top: 20px;
	}

	.main {
		margin: -64px 0 148px;
	}

	.main__content {
		width: 484px;
	}

	.main__img {
		max-width: 484px;
		height: 368px;
	}

	.main__img::before {
		width: 160px;
		height: 160px;
		left: -90px;
		top: -44px;
	}

	.about__content {
		margin-bottom: 148px;
	}

	.footer__container {
		border-top: none;
	}

	.footer {
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}
}

@media screen and (max-width: 1024px) {
	.container {
		max-width: 770px;
	}

	.main {
		padding-top: 172px;
		margin: -64px 0 84px;
	}

	.main__content {
		width: 338px;
	}

	.main__logo {
		width: 200px;
		height: 38px;
		margin-bottom: 50px;
	}

	.title {
		font-size: 32px;
		line-height: 39px;
		margin-bottom: 18px;
	}

	.main__form div {
		margin-bottom: 20px;
	}

	.main__img {
		max-width: 355px;
		height: 300px;
	}

	.about__content {
		margin-bottom: 84px;
	}
	
	.about__title h2 {
		font-size: 22px;
		line-height: 27px;
	}

	.about__item {
		padding: 30px 30px 26px 30px;
	}

	.about__item p {
		font-size: 32px;
		line-height: 100%;
	}

	.feedback {
		margin-bottom: 84px;
	}
}

@media screen and (max-width: 768px) {
	.header {
		padding-top: 60px;
	}

	.header .button {
		display: none;
	}

	.main {
        padding-top: 121px;
        margin: -87px 0 8px;
    }

	.main__container {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.main__content {
		max-width: 100%;
		width: 100%;
	}

	.main__logo {
		width: 180px;
		height: 34px;
		margin: 0 auto 8px;
	}

	.title {
		text-align: center;
		font-size: 22px;
		line-height: 27px;
		margin-bottom: 0;
	}

	.main__img {
		max-width: 100%;
		height: 240px;
		margin-bottom: 60px;
	}

	.main__img::before {
		width: 120px;
		height: 120px;
		top: calc(100% - 60px);
		left: 50%;
		-webkit-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		        transform: translateX(-50%);
	}

	.main .button {
		display: flex;
	}
	
	.main__content .button {
		display: none;
	}

	.about__content {
		margin-bottom: 54px;
	}

	.about__title {
		margin-bottom: 20px;
	}

	.about__list {
		gap: 10px;
	}

	.about__item {
		padding: 10px 12px 10px 10px;
		height: 102px;
	}

	.about__item {
		width: calc(100% / 3 - 7px);
	}

	.about__item:nth-child(4), 
	.about__item:nth-child(5) {
		width: calc(50% - 5px);
	}

	.about__item h4 {
		font-size: 14px;
		line-height: 100%;
	}

	.about__item p {
		font-size: 22px;
		line-height: 100%;
	}

	.feedback {
		margin-bottom: 58px;
	}

	.feedback__title {
		margin-bottom: 20px;
		font-size: 22px;
		line-height: 27px;
	}

	.footer__container {
		padding: 40px 0;
	}

	.footer__logo {
		max-width: 180px;
		height: 34px;
	}

	.footer p {
		font-size: 14px;
		line-height: 17px;
	}

	.popup-success .popup__title {
		font-size: 22px;
	}

	.popup-success .popup__subtitle {
		font-size: 14px;
		line-height: 21px;
	}
}

@media screen and (max-width: 480px) {
	.logo {
		max-width: 81px;
		height: 15px;
	}

	.location {
		font-size: 14px;
		line-height: 100%;
	}

	.main__img {
		height: 197px;
		margin-bottom: 40px;
	}

	.main__img::before {
		width: 100px;
		height: 100px;
		top: calc(100% - 50px);
	}

	.about__title-img {
		height: 40px;
		min-width: 112px;
	}

	.about__item,
	.about__item:nth-child(5) {
		width: calc(100% / 2 - 5px);
	}

	.about__item:nth-child(5) {
		-webkit-box-ordinal-group: 5;
		    -ms-flex-order: 4;
		        order: 4;
	}

	.about__item:nth-child(1) {
		-webkit-box-ordinal-group: 2;
		    -ms-flex-order: 1;
		        order: 1;
	}

	.about__item:nth-child(2) {
		-webkit-box-ordinal-group: 3;
		    -ms-flex-order: 2;
		        order: 2;
	}

	.about__item:nth-child(3) {
		-webkit-box-ordinal-group: 4;
		    -ms-flex-order: 3;
		        order: 3;
	}

	.about__item:nth-child(4) {
		-webkit-box-ordinal-group: 6;
		    -ms-flex-order: 5;
		        order: 5;
		width: 100%;
	}

	.about__item:nth-child(5) h4 {
		font-size: 12px;
		line-height: 100%;
	}

	.popup-success .popup {
		height: 400px;
		-webkit-box-pack: center;
    	-ms-flex-pack: center;
        justify-content: center;
		padding: 20px;
	}

	.popup .feedback__title {
		font-size: 18px;
		line-height: 100%;
	}
}