:root {
	--c-primary: #00105D;
	--c-secondary: #0BC1D0;
	--c-accent: #DD3333;
	--c-accent-hover: #c22d2d;
	--c-dark: #141726;
	--transition: .2s;
	--shadow: 0 4px 25px rgba(79, 137, 142, 0.251);
	--radius-1: 16px;
	--radius-2: 24px;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex-grow: 1;
}

.page-dna {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	line-height: 1.25;
	color: var(--c-dark);

	h1,
	h2,
	h3,
	h4,
	h5 {
		font-family: inherit;
		font-weight: 700;
		color: var(--c-primary);
	}

	h1 {
		font-size: 3rem;
		line-height: 1.15;
	}

	h2 {
		font-size: 2.5rem;
		line-height: 1.2;
	}

	h3 {
		font-size: 2rem;
	}

	h4 {
		font-size: 1.75rem;
	}

	h5 {
		font-size: 1.25rem;
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56px;
		padding: 0 25px;
		border-radius: 150px;
		background: var(--c-accent);
		transition: background var(--transition);
		font-family: inherit;
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.1;
		text-transform: uppercase;
		color: #fff;
	}

	.button:hover {
		background: var(--c-accent-hover);
		color: #fff;
	}

	.button:active {
		translate: 0 1px;
	}

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

	.hero {
		position: relative;
	}

	.hero-bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hero-inner {
		padding: 108px 0;
	}

	.hero-content {
		max-width: 700px;
		padding: 32px 28px;
		background: rgba(255, 255, 255, 0.25);
		border-radius: var(--radius-2);
		backdrop-filter: blur(25px);
		color: #fff;
	}

	.hero-heading {
		margin-bottom: 20px;
		color: #fff;
	}

	.hero-subheading {
		margin-bottom: 16px;
	}

	.hero-info {
		display: flex;
		align-items: center;
		gap: 23px;
		max-width: 468px;
		padding: 30px;
		border-radius: var(--radius-2);
		background: #fff;
		color: var(--c-primary);
	}

	.hero-info-icon {
		width: 56px;
		height: 56px;
	}

	.hero-info-text {
		line-height: 1.5;
	}

	.overflow-wrapper {
		overflow: hidden;
		position: relative;
	}

	.blue-light {
		position: absolute;
		width: 1100px;
		height: 1100px;
		background: radial-gradient(circle, rgba(11, 193, 208, 1) 1%, rgba(255, 255, 255, 0) 68%);
		opacity: .4;
	}

	.blue-light-1 {
		top: 0;
		right: 0;
		translate: 20% -20%;
	}

	.blue-light-2 {
		top: 0;
		left: 0;
		translate: -10% 35%;
	}

	.features {
		margin-bottom: 60px;
	}

	.features-inner {
		position: relative;
		padding-top: 60px;
	}

	.features-heading {
		margin-bottom: 24px;
	}

	.features-items {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	.feature-card {
		padding: 29px 16px;
		background: #fff;
		border-radius: var(--radius-1);
		box-shadow: var(--shadow);
	}

	.feature-card-icon {
		width: 50px;
		height: 50px;
		margin-bottom: 12px;
	}

	.feature-card-text {
		font-weight: 600;
	}

	.catalog {
		position: relative;
		margin-bottom: 60px;
	}



	.catalog-heading {
		margin-bottom: 24px;
	}

	.catalog-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.text-card {
		display: flex;
		align-items: center;
		gap: 24px;
		padding: 20px;
		border-radius: 16px;
		background: #fff;
		box-shadow: var(--shadow);
	}

	.text-card-img-wrapper {
		overflow: hidden;
		position: relative;
		flex: 0 0 360px;
		align-self: stretch;
		border-radius: var(--radius-1);
	}

	.text-card-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.text-card-badge {
		position: absolute;
		top: 16px;
		right: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		padding: 0 32px;
		border-radius: 100px;
		background: #fff;
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--c-primary);
	}

	.text-card-content {
		flex-grow: 1;
	}

	.text-card-title {
		margin-bottom: 10px;
	}

	.text-card-subtitle {
		margin-bottom: 16px;
		font-weight: 600;
		color: var(--c-secondary);
	}

	.text-card-body {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 32px;
	}



	.text-card-info-title {
		margin-bottom: 4px;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--c-primary);
	}



	.list {

		ul {
			padding-left: 23px;
		}

		li {
			position: relative;
			line-height: 1.5;
		}

		li::before {
			content: "";
			position: absolute;
			top: 9px;
			left: -15px;
			width: 4px;
			height: 4px;
			background: var(--c-dark);
			border-radius: 50%;
		}
	}

	.text-card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}



	.text-card-price {
		margin-bottom: 4px;
	}

	.text-card-additionally {
		font-weight: 600;
	}



	.process {
		margin-bottom: 60px;
	}



	.process-heading {
		margin-bottom: 8px;
	}

	.process-subheading {
		margin-bottom: 30px;
	}

	.process-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	.process-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1;
		border-radius: 50%;
		border: 3px solid var(--c-secondary);
	}

	.process-item-num {
		position: absolute;
		top: 0;
		left: 50%;
		translate: -50% -50%;
		display: none;
		width: 35px;
		height: 35px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--c-secondary);
		font-weight: 700;
		color: #fff;
	}

	.process-item::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: 50%;
		right: 0;
		translate: calc(50% + 15px) -50%;
		width: 85px;
		height: 85px;
		background-image: url(../images-2/arrow-right.svg);
		background-size: contain;
		background-repeat: no-repeat;
	}

	.process-item:last-child::before {
		display: none;
	}

	.process-item-icon {
		width: 56px;
		height: 56px;
		margin-bottom: 16px;
		fill: var(--c-dark);
	}

	.process-item-title {
		line-height: 1.4;
		text-align: center;
	}

	.messages {
		overflow: hidden;
		position: relative;
		margin-bottom: 60px;
		border-radius: var(--radius-2);
	}

	.messages::before {
		content: "";
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 200px;
		backdrop-filter: blur(2px);
		mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
	}

	.messages::after {
		content: "";
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200px;
		backdrop-filter: blur(2px);
		mask-image: linear-gradient(to top, black 0%, transparent 100%);
	}

	.messages-bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.messages-inner {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 30px;
		height: 605px;
	}

	.messages-heading {
		position: relative;
		z-index: 3;
		top: 40px;
		left: 0;
		color: #fff;
	}

	.slider {
		position: relative;
		z-index: 1;
		height: 100%;
	}

	.swiper {
		overflow: initial;
		height: 100%;
	}

	.swiper-wrapper {
		translate: 0 170px;
	}

	.message {
		height: auto;
	}



	.patients {
		margin-bottom: 60px;
	}



	.patients-heading {
		margin-bottom: 24px;
		max-width: 680px;
	}

	.patients-cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.patient {
		padding: 15px;
		background: #fff;
		border-radius: var(--radius-1);
		box-shadow: var(--shadow);
	}

	.patient-image {
		width: 100%;
		aspect-ratio: 1.509;
		margin-bottom: 16px;
		object-fit: cover;
		border-radius: 12px;
	}



	.faq {
		margin-bottom: 60px;
	}



	.faq-heading {
		margin-bottom: 16px;
	}

	.accordion {
		width: 100%;
	}

	.accordion-item {
		background: #fff;
		border-bottom: 1px solid var(--c-dark);
	}

	.accordion-button {
		cursor: pointer;
		position: relative;
		justify-content: flex-start;
		width: 100%;
		padding: 16px 0;
		padding-right: 60px;
		border: 0;
		background: transparent;
		font-size: 1.25rem;
		font-weight: 700;
		text-align: left;
		text-transform: initial;
		color: var(--c-primary);
	}

	.accordion-button:hover {
		background: transparent;
		box-shadow: none;
	}

	.accordion-button-icon {
		pointer-events: none;
		position: absolute;
		top: 16px;
		right: 30px;
		width: 18px;
		height: 18px;
		fill: var(--c-primary);
		transition: rotate var(--transition);
	}

	.accordion-item.active .accordion-button-icon {
		rotate: -180deg;
	}

	.accordion-content {
		overflow: hidden;
		height: 0;
		transition: .2s;
	}

	.accordion-content-inner {
		padding: 0 25px 15px 0;
	}

	.callback {
		position: relative;
	}

	.callback-bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.callback-inner {
		position: relative;
		padding: 60px 0;
	}

	.callback-form {
		max-width: 610px;
		width: 100%;
		padding: 30px;
		border-radius: var(--radius-2);
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(15px);
	}

	.callback-heading {
		margin-bottom: 10px;
		color: #fff;
	}

	.callback-subheading {
		margin-bottom: 15px;
		color: #fff;
	}

	.callback-fields {
		margin-bottom: 8px;
	}

	.callback-button {
		max-width: 283px;
		width: 100%;
		margin-top: 16px;
	}

	.field-group {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}



	.input {
		width: 100%;
		height: 60px;
		padding: 0 25px;
		border-radius: var(--radius-1);
		background: #fff;
		font-family: inherit;
		font-size: 1rem;
		color: var(--c-primary);
	}

	.input::placeholder {
		color: var(--c-dark);
	}



	.combobox {
		cursor: pointer;
		position: relative;
	}

	.combobox-field {
		position: relative;
	}

	.combobox-input {
		cursor: pointer;
	}

	.combobox-icon {
		position: absolute;
		top: 50%;
		right: 25px;
		translate: 0 -50%;
		width: 13px;
		height: 13px;
		fill: var(--c-dark);
		transition: rotate var(--transition);
	}

	.combobox.active .combobox-icon {
		rotate: -180deg;
	}

	.combobox-list {
		overflow: hidden;
		position: absolute;
		z-index: 1;
		top: calc(100% + 5px);
		translate: 0 10px;
		transition: var(--transition);
		width: 100%;
		padding: 10px 0;
		opacity: 0;
		visibility: hidden;
		background: #fff;
		border-radius: var(--radius-1);
	}

	.combobox.active .combobox-list {
		translate: 0 0;
		opacity: 1;
		visibility: visible;
	}

	.combobox-list-item {
		cursor: pointer;
		padding: 10px 25px;
		transition: background var(--transition);
		font-size: 1rem;
	}

	.combobox-list-item:hover {
		background: #eeeeee;
	}

	.checkbox {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		cursor: pointer;
		font-size: 0.875rem;
		font-weight: 400;
		color: #fff;
	}

	.checkbox-input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.checkbox-fake {
		position: relative;
		width: 18px;
		height: 18px;
		border-radius: 4px;
		border: 1px solid #ffffff80;
	}

	.checkbox-fake::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 12px;
		height: 12px;
		background: #fff;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		border-radius: 2px;
		opacity: 0;
		transition: 0.2s;
	}

	.checkbox-input:checked+.checkbox-fake::before {
		opacity: 1;
	}

	.checkbox-text a {
		display: inline;
		text-decoration: underline;
		color: #fff;
	}

	.checkbox-text a:hover {
		color: #fff;
	}

	@media (max-width: 1199px) {
		.blue-light-1 {
			translate: 50% -50%;
		}

		.process-item::before {
			width: 65px;
			height: 65px;
		}

		.process-item-title {
			font-size: 1rem;
		}

		.messages {
			border-radius: 0;
		}

		.messages::before,
		.messages::after {
			display: none;
		}

		.message-image {
			width: 350px;
			height: auto;
		}
	}

	@media (max-width: 991px) {
		.features-items {
			gap: 15px;
		}

		.feature-card-text {
			font-size: 0.875rem;
		}

		.text-card-img-wrapper {
			flex: 0 0 260px;
		}

		.text-card-badge {
			height: 38px;
			right: 16px;
			padding: 0 15px;
			font-size: 0.875rem;
		}

		.text-card-title {
			font-size: 1.5rem;
		}

		.text-card-subtitle {
			font-size: 1rem;
		}

		.text-card-info {
			font-size: 0.875rem;
		}

		.text-card-additionally {
			font-size: 1.125rem;
		}

		.text-card-footer {
			flex-wrap: wrap;
			gap: 15px;
		}

		.process-list {
			grid-template-columns: repeat(3, 1fr);
		}

		.process-item:before {
			display: none;
		}

		.messages {
			background-color: var(--c-dark);
		}

		.messages-bg {
			opacity: .8;
		}

		.messages-inner {
			height: 400px;
		}

		.messages-heading {
			flex: 0 0 0;
		}

		.slider {
			flex: 0 0 auto;
		}

		.message-image {
			width: 300px;
		}

		.patients-cards {
			gap: 15px;
		}

		.patients-info {
			font-size: 0.875rem;
		}
	}

	@media (max-width: 767px) {
		.hero-inner {
			padding: 80px 0;
		}

		.hero-heading {
			font-size: 2.25rem;
		}

		h2 {
			font-size: 2.2rem;
		}

		.features-items {
			grid-template-columns: repeat(2, 1fr);
		}



		.text-card-img-wrapper {
			display: none;
		}

		.text-card-footer {
			gap: 30px;
		}

		.process-list {
			gap: 15px;
			row-gap: 20px;
		}

		.process-item {
			border-radius: var(--radius-2);
		}

		.process-item-num {
			display: flex;
		}

		.process-item-title {
			font-size: 0.875rem;
		}

		.slider {
			flex: 1 0 0;
		}

		.patients-cards {
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
		}

		.patients-info {
			font-size: 1rem;
		}
	}

	@media (max-width: 575px) {
		:root {
			--radius-1: 10px;
			--radius-2: 20px;
		}

		.hero {
			background: #eeeeee;
		}

		.hero-inner {
			display: flex;
			flex-direction: column;
			padding: 50px 0;
			padding-bottom: 0;
		}

		.hero-bg {
			position: relative;
			inset: auto;
			order: 1;
			width: auto;
			max-width: initial;
			height: auto;
			aspect-ratio: 2;
			margin: 0 -15px;
			margin-top: -50px;
			backdrop-filter: none;
			object-fit: cover;
		}

		.hero-content {
			position: relative;
			z-index: 1;
			padding: 0;
			background: transparent;
			color: var(--c-primary);
			backdrop-filter: none;
		}

		.hero-heading {
			font-size: 1.875rem;
			color: var(--c-primary);
		}

		.hero-info {
			gap: 15px;
			padding: 20px;
			border-radius: 16px;
		}

		.hero-info-text {
			font-size: 0.875rem;
			line-height: 1.3;
		}

		.blue-light {
			display: none;
		}

		.features {
			margin-bottom: 50px;
		}

		.features-inner {
			padding-top: 50px;
		}

		h2 {
			font-size: 1.775rem;
		}

		.catalog {
			margin-bottom: 50px;
		}

		.text-card {
			padding: 15px;
		}

		.text-card-additionally {
			font-size: 1rem;
		}

		.text-card-price {
			font-size: 1.5rem;
		}

		.list {
			padding-left: 16px;
		}

		.item::before {
			left: -13px;
		}

		h3 {
			font-size: 1.25rem;
		}

		.process-list {
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
			row-gap: 20px;
		}



		.process-item-icon {
			width: 46px;
			height: 46px;
		}

		.messages {
			background: #fff;
		}

		.messages-bg {
			display: none;
		}

		.messages-inner {
			flex-direction: column;
			gap: 40px;
			height: auto;
			padding: 0;
			padding-bottom: 0;
		}

		.messages-heading {
			top: 0;
			color: var(--c-primary);
		}

		.slider {
			flex: 0 0 0;
		}

		.swiper-wrapper {
			translate: 0 0;
		}

		.message {
			width: 300px;
		}

		.message-image {
			width: 100%;
		}

		.patients {
			margin-bottom: 50px;
		}

		.patients-cards {
			gap: 15px;
		}

		.patients-info {
			font-size: 0.875rem;
		}

		.accordion-button {
			padding-right: 30px;
			font-size: 1.125rem;
		}

		.accordion-button-icon {
			top: 22px;
			right: 0;
			width: 12px;
			height: 12px;
		}
	}

	@media (max-width: 480px) {
		.features-items {
			grid-template-columns: 1fr;
		}

		.feature-card-text br {
			display: none;
		}

		.text-card-button {
			width: 100%;
		}

		.patients-cards {
			grid-template-columns: repeat(1, 1fr);
		}

		.patients-info {
			font-size: 1rem;
		}

		.callback-form {
			padding: 15px;
		}

		.callback-heading {
			font-size: 1.6em;
		}

		.callback-subheading {
			font-size: 1.125rem;
			font-weight: 500;
		}

		.callback-button {
			max-width: 100%;
		}
	}
}