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

:root {
	--balck: #171717;
	--green: #305619;
	--white: #FFFFFF;
	--white-green: #F4F8F1;
	--bg: #F4F8F1;

	--green-a: #305619c8;

	--font-desktop--p: 1.25vw;
	--font-tablet--p: 2.60417vw;
	--font-mobile--p: 3.333vw;

	--font-desktop--h1: 4vw;
	--font-tablet--h1: 9.11458vw;
	--font-mobile--h1: 10.625vw;

	--font-desktop--h2: 4.5vw;
	--font-tablet--h2: 5.20833vw;
	--font-mobile--h2: 8.333vw;

	--font-desktop--h3: 1.33333vw;
	--font-tablet--h3: 2.60417vw;
	--font-mobile--h3: 4.375vw;

	--font-desktop--h4: 1.33333vw;
	--font-tablet--h4: 2.60417vw;
	--font-mobile--h4: 4.375vw;

	--title: "NAMU";
	--text: "SF_Pro_Display";
	--CTA: "RFD"
}

h1 span,
h1 {
	font-family: var(--title);
	font-size: var(--font-desktop--h1);
	line-height: 1.2;
}

h2 {
	font-family: var(--title);
	font-size: var(--font-desktop--h2);
	line-height: 1.2;
}

h3 {
	font-family: var(--title);
	font-size: var(--font-desktop--h3);
	line-height: 1.2;
}

h4 {
	font-family: var(--title);
	font-size: var(--font-desktop--h4);
	line-height: 1.2;
}

input,
span,
button,
a,
P {
	font-family: var(--text);
	font-size: var(--font-desktop--p);
	line-height: 1.2;
}

html {
	background-color: #F4F8F1;
}

body {
	font-family: 'NAMU', sans-serif;
	scroll-behavior: smooth;
	background-color: #F4F8F1;
	/* max-width: 1440px; */
	margin: auto;
}

object,
svg,
img,
.user-unselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

::selection {
	background-color: var(--green);
	color: var(--white);
}

.green-select::selection {
	background-color: var(--white);
	color: var(--green);
}

/* header start */
.header {
	position: fixed;
	top: 10%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);

	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffffc2;
	padding: 1.042vw 3.333vw;
	border-radius: 20px;
	margin: 20px auto;
	width: 90%;
	z-index: 1000;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: all .3s ease;
}

.logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.logo:hover .logo-circle {
	background-color: var(--green);
	color: var(--white);
}

.logo-circle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5vw;
	height: 2.5vw;
	border-radius: 50%;
	border: solid 2px var(--green);
	font-family: var(--text);
	color: var(--green);
	margin-right: 10px;
	transition: all .3s ease;
}

.logo-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--balck);
}

.nav a,
.logo-text span {
	font-size: 0.972vw;
	font-weight: 300;
}

.nav a {
	position: relative;
	font-family: 'SF_Pro_Display';
	margin-left: 1.667vw;
	text-decoration: none;
	color: var(--balck);
	transition: all .3s ease;
}

/* .nav a::after {
	position: absolute;
	top: 150%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);

	content: "";
	height: 1px;
	width: 50%;
	background-color: var(--balck);
	opacity: 0;
	transition: all .3s ease;
}

.nav a:hover::after {
	top: 110%;
	opacity: 1;
} */

.nav a:hover {
	color: var(--green);
}

/* header end */

/* contact header start */

.contact-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--white);
	/* Фоновий колір */
	padding: .7vw 2vw;
	width: 100%;
}

.contact-info-right,
.contact-info-left {
	display: flex;
	justify-content: space-between;
}

.sidebar .contact-item {
	margin: 0;
}

.contact-item {
	display: flex;
	align-items: center;
	color: var(--balck);
	margin: 0 0.8vw;
}

.contact-info .contact-item {
	font-size: 0.972vw;
}

.contact-item span {
	font-size: .7vw;
}

.contact-item img {
	width: .7vw;
	margin-right: 8px;
	color: var(--green);
}

/* contact header end */

.hero {
	position: relative;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.button-wrapper {
	position: absolute;
	top: 16vw;
}

.background-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(36, 77, 39, 0.7);
	z-index: 2;
}

.content {
	position: absolute;
	top: 35%;
	left: 10%;
	margin-right: -50%;
	z-index: 3;
	color: var(--white);
	/* max-width: 1200px; */
	/* Фіксована максимальна ширина */
	width: 100%;
	/* Для адаптивності */
}

h1 {
	font-size: var(--font-desktop--h1);
	font-weight: bold;
	margin-bottom: 20px;
	white-space: pre-wrap;
	/* Для переносу тексту */
	overflow: hidden;
	position: relative;
	text-transform: uppercase;
}

.hero h1 {
	line-height: 1.2;
}

.cursor {
	display: inline-block;
	width: 10px;
	margin-left: 5px;
	animation: blink 1s infinite;
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


.btn {
	display: inline-block;
	padding: 1.667vw 2.222vw 1.667vw 2.222vw;
	background-color: var(--white);
	font-size: 1.25vw;
	color: #2d2d2d;
	text-decoration: none;
	border-radius: .6vw;
	transition: all .3s ease;
	line-height: 1;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.btn.green {
	background-color: var(--green);
	color: var(--white);
}

.btn.border {
	border: solid 2px var(--green);
}

.btn.bg {
	background-color: var(--bg);
}

.btn span {
	font-size: 1.5vw;
	top: .2vw;
	position: relative;
	display: block;
	float: right;
	margin-left: .6vw;
	line-height: 1.3vw;
	transition: all .3s ease;
}

.btn:hover span {
	transform: rotate(-45deg);
	margin-left: .5vw;
	margin-right: .1vw;
}

.btn-wrapper .btn:hover span {
	top: 0vw;
}

.hero .btn:hover span {
	margin-left: .5vw;
	margin-right: .1vw;
}

.services-grid .btn span {
	font-size: 1.1vw;
	top: 0;
}

#horizontal-sections .services-grid .btn span {
	top: 5px;
}

.service-info h3 {
	font-size: 1.9vw;
}

/* horizontal scroll */

#horizontal-sections {
	position: relative;
	height: calc(100vh * 3);
	/* height: calc(100vh * 3); */
	/* Кількість секцій */
}

.sticky-wrapper {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.horizontal-content {
	display: flex;
	width: calc(100vw * 3);
	/* Кількість секцій */
	height: 100%;
	transition: transform 0.1s ease-out;
}

.horizontal-content>section {
	flex: 0 0 100vw;
	height: 100%;
}

/* start services */

.services {
	background-color: #f4f7f2;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	padding: 50px 0;
}

.services.archive {
	flex-direction: column;
	margin-bottom: 10vw;
	padding: 0;
}

.services.archive.p1 {
	margin-top: 8vw;
}

.archive .btn {
	margin-top: 1.4vw;
	padding: 1.5vw 2vw;
}

.service-card a,
.service-info a {
	font-size: 1.25vw;
}

.archive .btn-wrapper .btn {
	margin-top: 2.222vw;
}

.archive h3 {
	margin-bottom: 0;
}

.archive .btn span {
	font-size: 1.4vw;
	top: 5px;
}

.archive .service-card:hover span {
	top: .1vw;
	/* margin-top: -.3vw;
	margin-left: .1vw; */
	margin-right: 0;
}

.archive .services-header {
	text-align: center;
	width: 98%;
	margin-bottom: 4.167vw;
	text-transform: uppercase;
}

.services-header {
	text-align: left;
	margin-bottom: 40px;
	width: 48%;
}

.services-header h2 {
	color: #000;
	padding-left: 40px;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 48%;
}

.archive .services-grid {
	width: 91%;
	grid-template-columns: repeat(4, 1fr);
}

.service-card {
	background-color: #fff;
	padding: 2.222vw;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: start;
	transition: all .3s ease;
	cursor: pointer;
}

.archive .service-card {
	padding: 3.333vw 2.222vw;
}

#horizontal-sections .service-card {
	padding-top: 5vw;
	padding-bottom: 3.333vw;
}

.service-card .btn {
	padding: 0;
}

#horizontal-sections .index .service-card:last-child {
	padding-top: 2.5vw;
	display: block;
	grid-column: span 2;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-bottom: 2.222vw;
}

#horizontal-sections .index .service-card:last-child h3 {
	margin-top: 0;
}

.service-card img {
	width: 50px;
	height: 50px;
	margin-bottom: 15px;
}

.service-card svg {
	fill: var(--green);
	max-width: 2vw;
	height: auto;
	transition: all .3s ease;
}

.index .service-card:last-child svg {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 20px;
}

.service-card h3 {
	margin: 1.528vw 0;
}

.service-card a {
	text-decoration: none;
	color: var(--balck);
	display: flex;
	align-items: center;
}

.service-card a span {
	margin-left: 5px;
}

.service-card:hover {
	background-color: var(--green);
	color: var(--white);
}

.service-card:hover .btn {
	color: var(--white);
	background-color: var(--green);
}

.service-card:hover .btn span {
	transform: rotate(-45deg);
	margin-left: 5px;
}

.service-card:hover svg {
	fill: var(--white);
}

/* respect-block start */

.respect-block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--green);
	padding: 50px;
}

.image-left,
.image-right {
	flex: 1;
}

.image-left img,
.image-right img {
	width: 80%;
	border-radius: 10px;
	object-fit: cover;
}

.image-left {
	margin-bottom: 300px;

}

.image-right {
	margin-top: 300px;
}

.text-center {
	flex: 2;
	text-align: center;
	color: var(--white);
	z-index: 10;
}

.text-center h2 {
	margin-bottom: 20px;
	font-size: 4.1vw;
}

.icon-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icon {
	margin-bottom: 10px;
}

#horizontal-sections .icon-text p {
	color: var(--white);
	font-weight: 200;
	width: 17.153vw;
	line-height: 1.2;
}

#horizontal-sections .confidentiality-block .icon-text p {
	color: var(--green);
	font-weight: 300;
}

@media (max-width: 1024px) {
	.respect-block {
		flex-direction: column;
		text-align: center;
	}

	.image-left,
	.image-right {
		margin-bottom: 20px;
	}
}

/* confidentiality start */

.confidentiality-block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 50px;
	border-radius: 10px;
}

.image-left,
.image-right {
	flex: 1;
	padding: 10px;
}

.image-left img,
.image-right img {
	width: 80%;
	border-radius: 10px;
	object-fit: cover;
}

.image-right img {
	float: right;
}

.confidentiality-block .text-center {
	flex: 2;
	text-align: center;
	color: var(--green);
}

.text-center h2 {
	margin-bottom: 20px;
}

.icon-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.icon-text img {
	width: 2.5vw;
}

.icon {
	color: var(--green);

}

.confidentiality-block .icon-text p {
	color: #2d2d2d;
	margin-top: 10px;
}

@media (max-width: 1024px) {
	.confidentiality-block {
		flex-direction: column;
		text-align: center;
	}

	.image-left,
	.image-right {
		margin-bottom: 20px;
	}
}


/* about us start */

.about-notary {
	width: 90%;
	margin: auto;
	display: flex;
	justify-content: space-evenly;
	align-items: stretch;
}

.about-text {
	display: flex;
	align-items: center;

	padding: 6vw;
	border-radius: 10px;
	max-width: 48%;
	background-color: var(--white);
	color: var(--green);
}

.about-text h2 {
	margin-bottom: 20px;
}

.about-text h4 {
	margin-bottom: 20px;
}


.about-image {
	max-width: 48%;
}

.about-image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	object-fit: cover;
}

/* start advantages */

.advantages {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	padding: 10vw 0;
}

.advantages-header {
	text-align: left;
	margin-bottom: 40px;
}

.advantages-header h2 {
	color: var(--green);
	/* Темно-зелений колір заголовка */
}

.advantages-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 48%;
}

.advantage-item {
	flex: 1 1 200px;
	/* Мінімальна ширина блоку */
	margin: 20px;
}

.advantage-item h3 {
	font-size: 4vw;
	color: var(--green);
	margin-bottom: 10px;
}

.advantage-item p {
	color: var(--green);
}

/* CTA start */

.consultation {
	max-width: 90%;
	margin: auto;
	background-color: var(--green);
	padding: 70px 110px;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--white);
}

.consultation-text {
	flex: 1;
}

.consultation-text h2 {
	color: var(--white)
}

.consultation-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Відстань між елементами форми */
	flex: 1;
}

input:focus {
	outline: none;
}

.consultation-form textarea,
.consultation-form input {
	font-size: var(--font-desktop--p);
	padding: 1.667vw;
	border: 1px solid var(--white-green);
	border-radius: 0.556vw;
	background-color: transparent;
	text-align: center;
	color: var(--white-green);
	font-weight: 200;
}

.consultation-form input::placeholder {
	color: var(--white-green);
	font-size: 0.972vw;
}

.consultation-form button {
	font-family: var(--CTA);
	padding: 1.528vw;
	background-color: var(--white-green);
	color: var(--green);
	border: none;
	border-radius: 0.556vw;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.consultation-form button span {
	margin-right: 10px;
}

.consultation-form button svg {
	width: 1vw;
	height: 1vw;
	transition: all .3s ease;
}

.consultation-form button:hover {
	background-color: var(--white-green);
}

.consultation-form button:hover svg {
	transform: rotate(45deg);
}

/*	reviews start */


.reviews-section {
	width: 100%;
	padding: 10vw 0;
}

.reviews-section h2 {
	color: var(--green);
	margin-bottom: 3.819vw;
	padding-left: 50px;
}

.reviews-slider {
	display: flex;
	gap: 20px;
	overflow: hidden;
	/* cursor: grab; */
}

.review-card {
	max-width: 30vw;
	height: fit-content;
	padding: 1.667vw;
	border: 1px solid var(--green);
	border-radius: 10px;
	flex-shrink: 0;
}

.review-card object {
	margin-right: .5vw;
	height: 1vw;
}

.review-card h3 {
	color: var(--green);
	padding-bottom: 0.556vw;
}

p.stars {
	font-size: 1vw;
	display: flex;
	margin-top: .2vw;
}

.review-card p:last-child {
	margin-top: 1.25vw;
}

.review-card p {
	color: var(--green);
}

/* Додаткові стилі для адаптивності */
@media (max-width: 768px) {
	.review-card {
		min-width: 250px;
	}
}


/* contact start */

#contacts {
	background-color: var(--green);
	padding: 2.818vw 0;
	border-radius: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 91%;
	margin: auto;
}

#contacts p::selection {
	background-color: var(--white);
	color: var(--green);
}

#contacts .contact-item {
	flex-direction: column;
	color: var(--white);
	padding: 2.7275vw;
}

#contacts .contact-item p {
	position: relative;
	font-size: 3.636vw;
	line-height: 1.2;
	font-family: var(--title);
}

#contacts .contact-item span {
	position: absolute;
	background-color: var(--white);
	font-size: 1.8vw;
	padding: .6vw;
	border-radius: .7vw;
	border: .3vw solid var(--green);
	z-index: 10;
	display: flex;
}

#contacts .contact-item strong {
	font-family: var(--text);
	font-size: 1.364vw;
	font-weight: 300;
	padding-bottom: 0.667vw;
}

#contacts contact-item .icon {
	margin-right: 10px;
	font-size: 24px;
	vertical-align: middle;
}

#contacts .contact-item a {
	text-decoration: none;
	/* margin: 0 10px; */
	font-size: 24px;
}

#contacts .contact-item a:hover {
	text-decoration: underline;
}

#contacts .contact-item img {
	width: 1.944vw;
	margin-right: 0;
}

#geo {
	left: 2vw;
	top: -1vw;
}

#tel {
	left: -3vw;
	bottom: -2vw;
}

#mail {
	bottom: -3vw;
	right: -2vw;
}

#schedule {
	left: -3vw;
	bottom: -2vw;
}

.sidebar .smm a,
#contacts .smm a {
	display: block;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 1.6vw;
	padding: 0.833vw;
	/* width: 2.5vw;
	height: 2.5vw; */
	border-radius: 50%;
	border: 1px solid var(--white);
	background-color: none;
	transition: all .3s ease;
}

.sidebar .smm a {
	border: 1px solid var(--green);
	margin-right: 0.556vw;
}

.sidebar .smm a:hover {
	text-decoration: none;
	background-color: var(--green);
}

#contacts .smm a:hover {
	text-decoration: none;
	background-color: var(--white);
}

.contact-item.smm svg {
	width: 1.667vw;
	height: 1.667vw;
	z-index: 10;
	display: block;
	position: relative;
	fill: var(--white);
	transition: all .3s ease;
}

.sidebar-content .contact-item.smm svg {
	fill: var(--green);
}

.sidebar-content .contact-item.smm a:hover svg {
	fill: var(--white);
}

.sidebar .smm a:hover span,
#contacts .smm a:hover span {
	background-color: inherit;
}

#contacts .smm a:hover svg {
	fill: var(--green);
}

.sidebar .smm .icon,
#contacts .smm .icon {
	padding: 0;
	position: relative;
	background-color: inherit !important;
	border: none;
}

.map,
gmp-map {
	height: 50vh;
	width: 91%;
	border-radius: 10px;
	margin: 50px auto;
	overflow: hidden;
}

/* single */

.container {
	display: flex;
	margin: 0 auto;
	margin-top: 8vw;
	margin-bottom: 9.167vw;
	width: 90%;
}

.sidebar-content {
	width: 20vw;
	background-color: var(--white);
	border-radius: 10px;
	padding: 2.222vw 1.667vw;
	position: sticky;
	top: 8vw;
	bottom: 20px;
	overflow-y: auto;
	margin: 20px;
}

.sidebar-content h3 {
	font-size: 1.944vw;
	text-transform: uppercase;
	margin-bottom: 0.278vw;
}

.sidebar-content span {
	font-size: 0.972vw;
}

.sidebar-content .phone * {
	padding: .3vw 0;
	font-size: 1.2vw;
	display: inline-block;
	transition: all .3s ease;
	text-decoration: none;
	color: var(--balck);

	display: flex;
	align-items: center;
	width: fit-content;
}

.sidebar-content .phone img {
	width: 1.25vw;
	margin-bottom: 0;
	margin-right: 0.556vw;
}

.sidebar-content .phone a:hover img {
	transform: rotate(20deg);
}

.sidebar-content .phone *:hover i {
	transform: rotate(20deg);
}

.sidebar-content .phone i {
	padding-right: .5vw;
	transition: all .3s ease;
}

.sidebar-content .phone,
.sidebar-content .contact-item {
	margin-top: 1.944vw;
}

.main-content {
	flex: 1;
	padding: 20px;
}

.main-content .page-content p {
	padding: .5vw 0;
	line-height: 1.3;
}

.main-content h2 {
	font-size: 3vw;
	text-transform: uppercase;
	margin-top: 5vw;
	margin-bottom: 2.917vw;
	line-height: 1.2;
	color: var(--green);
}

.social-icons a {
	display: inline-block;
	margin-right: 10px;
	text-decoration: none;
}

.sidebar img {
	width: 100%;
	margin-bottom: 1.944vw;
	border-radius: 0.278vw;
}

/* Existing styles from previous code */

.heading-section {
	letter-spacing: 2px;
	background-color: var(--green);
	color: var(--white);
	border-radius: 10px;
	margin-bottom: 20px;
	padding: 5vw 6.111vw;
	font-weight: 300;
}

.heading-section.bar {
	padding: 2.222vw 6.111vw;
	/* padding-bottom: 1.5vw; */
}

.heading-section a {
	color: var(--white);
	text-decoration: none;
	transition: all .3s ease;
	font-size: 0.972vw;
}

.heading-section a:hover {
	/* padding-left: 20px; */
	color: var(--balck);
}

.heading-section h1 {
	font-size: 3.333vw;
	padding: 1.3vw 0;
	line-height: 1.2;
	letter-spacing: 0px;
}

.info-bar {
	display: flex;
	justify-content: flex-start;
	margin-top: 10px;
	font-size: 14px;
	color: var(--white);
}

.info-bar span {
	margin: 0 2vw;
}

.important-box {
	letter-spacing: 2px;
	background-color: var(--green);
	color: var(--white);
	border-radius: 10px;
	margin: 2.917vw 0;
	padding: 2.222vw;
	font-weight: 300;
}

.important-box h4 {
	font-size: 1.944vw;
	text-transform: uppercase;
	margin-bottom: 1vw;
}

.cta-buttons {
	margin-top: 5vw;
}

.cta-buttons .btn {
	font-size: 1vw;
	font-weight: 300;
	padding: 1.4vw 2vw;
	line-height: 1.3;
	border-radius: 0.556vw;
}

.cta-buttons .btn i {
	margin: 0 .4vw;
	font-weight: 100;
}

.cta-buttons .btn span {
	margin: 0;
}

.cta-buttons .btn span:hover {
	margin: 0;
}

.cta-buttons .button {
	display: inline-block;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	margin-right: 10px;
}

.cta-buttons a:nth-child(2) {
	margin-left: 1vw;
	font-weight: 500;
	color: var(--green);
}

.back-link {
	margin-top: 2.917vw;
}

.back-link a {
	text-decoration: none;
	color: var(--green);
	/* font-weight: 300;
	font-size: 1.2vw; */
	transition: all .3s ease;
}

.back-link span {
	top: 100px;
}

.back-link a:hover {
	/* padding-left: 1vw; */
	color: var(--balck);
}


/* modal */

.modal {
	/* display: none; */
	position: fixed;
	z-index: 1;
	left: 0;
	top: -100vh;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: var(--green);
	transition: all .3s ease;
	z-index: 100;

	overflow: hidden;
	overflow-y: hidden;
	/*для вертикального*/
	overflow-x: hidden;
	/*для горизонтального*/
}

.modal.active {
	top: 0;
}

.modal .consultation-form button {
	background-color: var(--green);
	color: var(--white);
}

.modal .consultation-form button svg {
	fill: var(--white);
}

.modal .consultation-form textarea::placeholder,
.consultation-form input::placeholder {
	color: var(--white);
	font-size: var(--font-desktop--p);
	text-align: center;
	font-weight: 400;
}

.modal .consultation-form input::placeholder,
.modal .consultation-form textarea::placeholder {
	color: var(--green);
	text-align: left;
}

.modal .consultation-form textarea,
.modal .consultation-form input {
	border-width: 0.075vw;
	border-color: var(--green);
	color: var(--green);
	text-align: left;
	font-weight: 400;
	font-size: var(--font-desktop--p);
	max-width: 100%;
}

.modal-content {
	transition: all .3s ease;
	background-color: white;
	margin: auto;
	margin-top: 10vw;
	padding: 5vw 7.778vw;
	border-radius: 10px;
	width: 90%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	text-align: left;
}

.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.form-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-text {
	max-width: 50%;
}

.form-text h2 {
	font-size: 4.167vw;
	margin-bottom: 20px;
}

.form-text a {
	display: block;
	margin-top: 10px;
	color: #2d4f2d;
	text-decoration: none;
}

.form-text a:hover {
	color: var(--balck);
}

.form {
	display: flex;
	flex-direction: column;
	width: 45%;
}

input,
textarea {
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
}


.mob {
	display: none;
}


@media (max-width: 768px) {
	.mob {
		display: flex;
	}

	/* .header, */
	.contact-info {
		display: none;
	}

	.cursor,
	.hero h1 {
		font-size: 8.333vw;
	}

	.btn {
		font-size: 3.333vw;
		padding: 4.444vw 7.778vw;
		border-radius: 2.222vw;
	}

	.btn span {
		font-size: 4.333vw;
		top: 1.5vw;
	}

	.button-wrapper {
		top: 43vw;
	}

	.content {
		left: 6.667vw;
	}

	.horizontal-content {
		display: block;
		width: auto;
	}

	.sticky-wrapper {
		position: relative;
		height: auto;
	}

	.confidentiality-block,
	.respect-block {
		padding: 22.222vw 6.667vw;
		display: grid;
		grid-template-columns: 1fr 2fr;
	}

	.image-left {
		float: left;
	}

	.image-right {
		width: 100%;
		margin-top: 0;
		order: 1;
		float: right;
	}

	.text-center {
		width: 88.333vw;
		grid-column: span 2;
		order: 3;
	}

	.image-right,
	.image-left {
		float: left;
	}

	.image-left img,
	.image-right img {
		width: 100%;
		height: 35vw;
	}

	.confidentiality-block .image-right {
		width: auto;
	}

	.confidentiality-block .image-left {
		order: 2;
		width: 100%;
	}

	.services {
		display: block;
		padding: 16.667vw 6.667vw;
	}

	.services-header,
	.services-grid {
		width: 100%;
	}

	.services-header {
		text-align: center;
	}

	.services-header h2 {
		padding-left: 0;
	}

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

	#horizontal-sections .index .service-card:last-child {
		grid-column: auto;
	}

	h2 {
		font-size: var(--font-mobile--h2);
	}

	#horizontal-sections .index .service-card:last-child,
	#horizontal-sections .service-card {
		align-items: center;
		padding: 6.944vw;
		text-align: center;
	}

	.service-info h3 {
		font-size: 5.556vw;
	}

	.service-card svg {
		max-width: 6.667vw;
	}

	.service-card a,
	.service-info a {
		font-size: 3.333vw;
	}

	.service-card .btn {
		width: fit-content;
		margin: auto;
	}

	#horizontal-sections .services-grid .btn span {
		font-size: 3.778vw;
		top: .2vw;
	}

	#horizontal-sections {
		height: auto;
	}

	#horizontal-sections .index .service-card:last-child {
		flex-direction: column;
	}

	#horizontal-sections .index .service-card:last-child h3 {
		margin: 3.889vw 0;
	}

	.index .service-card:last-child svg {
		margin-right: 0;
	}

	.text-center h2 {
		font-size: 8.333vw;
	}

	.icon-text img {
		width: 6.667vw;
	}

	#horizontal-sections .icon-text p {
		font-size: 3.889vw;
		width: 55.556vw;
	}

	.about-notary {
		width: auto;
		flex-direction: column;
		padding: 16.667vw 6.667vw;
	}

	.about-text,
	.about-image {
		max-width: 100%;
	}

	.about-text {
		margin-bottom: 3.333vw;
		padding: 10vw 6.667vw;
	}

	h4 {
		font-size: 4.444vw;
	}

	.about-text h2 {
		margin-bottom: 2.222vw;
	}

	.about-text h4 {
		margin-bottom: 5vw;
		font-size: 3.5vw;
	}

	p {
		font-size: var(--font-mobile--p);
	}

	.advantages {
		flex-direction: column;
	}

	.advantages-content,
	.advantages-header {
		width: 100%;
	}

	.advantages {
		padding: 16.667vw 6.667vw;
		text-align: center;
	}

	.advantages-header h2 {
		text-align: center;
	}

	.advantage-item h3 {
		font-size: 8.333vw;
	}

	.advantage-item {
		margin: 4.444vw 0;
	}

	.consultation {
		padding: 10vw 6.667vw;
		flex-direction: column;
		margin: 0 6.667vw;
	}

	.consultation-form {
		width: 100%;
		margin-top: 6.111vw;
	}

	.consultation-form input::placeholder,
	.consultation-form input {
		font-size: 3.333vw;
		text-align: start;
		padding: 3.889vw 4vw;
	}

	.consultation-form button {
		font-size: 4.444vw;
		padding: 3.889vw 8.889vw;
	}

	.consultation-form button svg {
		height: 4.444vw;
		width: 4.444vw;
	}


	.reviews-slider {
		padding-left: 6vw;
	}

	.reviews-slider.mob {
		margin-top: 6.667vw;
	}

	.review-card h3 {
		font-size: 4.444vw;
		padding-bottom: 2.222vw;
	}

	.review-card p {
		font-size: 2.778vw;
	}

	.review-card object {
		height: 2.778vw;
	}

	.review-card p:last-child {
		margin-top: 5vw;
		font-size: 3.333vw;
	}

	.review-card {
		padding: 5vw 6.667vw;
	}

	#contacts .contact-item strong {
		padding-bottom: 3.333vw;
		font-size: 3.333vw;
	}

	#contacts .contact-item p {
		font-size: 6.667vw;
	}

	#contacts .contact-item .desk {
		display: none;
	}

	#contacts .contact-item p #contacts {
		padding: 11.667vw 6.667vw;
	}

	#contacts {
		padding: 6.667vw;
	}

	.contact-item.smm svg {
		height: 3.889vw;
		width: 3.889vw;
	}

	.sidebar .smm a,
	#contacts .smm a {
		padding: 2.222vw;
	}

	#contacts .contact-item img {
		width: 5vw;
	}

	#contacts .contact-item span {
		padding: 2.222vw;
		border-radius: 2.222vw;
	}

	#geo {
		left: -4vw;
		top: -6vw;
	}

	#tel {
		left: inherit;
		bottom: inherit;
		bottom: 8vw;
		right: -8vw;
	}

	#mail {
		bottom: inherit;
		right: inherit;
		left: -3vw;
		bottom: -2vw;
	}

	#schedule {
		left: inherit;
		bottom: 2vw;
		right: -6vw;
	}

	#contacts .contact-item span {
		border: 0.556vw solid var(--green);
	}

	/* single */

	.container {
		width: 100%;
		padding: 11.667vw 6.667vw;
		margin-top: 20vw;
	}

	.sidebar {
		display: none;
	}

	.heading-section {
		padding: 10vw 6.667vw;
	}

	.main-content {
		padding: 0;
	}

	.heading-section a {
		font-size: 3.333vw;
	}

	.heading-section h1 {
		font-size: 5.556vw;
		padding: 6.111vw 0;
		margin-bottom: 0;
	}

	.main-content p {
		font-size: 3.333vw;
	}

	.main-content h2 {
		font-size: 5.556vw;
		margin-top: 8.889vw;
		margin-bottom: 3.333vw;
	}

	.heading-section.bar {
		margin-bottom: 0;
	}

	.heading-section.bar {
		background-color: var(--bg);
	}

	.info-bar {
		flex-direction: column;
	}

	.heading-section.bar {
		padding: 0;
	}

	.info-bar p {
		padding: 4.444vw 6.667vw;
		border-radius: 2.222vw;
		background-color: var(--green);
	}

	.heading-section {
		margin-bottom: 2.778vw;
	}

	.info-bar span {
		font-size: 1.111vw;
	}

	.important-box h4 {
		font-size: 5.556vw;
	}

	.important-box {
		padding: 5.556vw;
	}

	/* .heading-section p,
	.important-box p {
		font-size: 2.2vw;
	} */

	.cta-buttons .btn {
		width: 100%;
		font-size: 3.333vw;
		padding: 5vw 19vw;
		text-align: center;
		border-radius: 2.222vw;
	}

	.cta-buttons a:nth-child(2) {
		margin-left: 0;
		margin-top: 2.222vw;
	}

	.cta-buttons {
		padding-top: 8.889vw;
	}

	.back-link a,
	.back-link span {
		font-size: 3.333vw;
	}

	.sidebar-content {
		position: relative;
		padding: 3.333vw;
		width: 100%;
		margin: 0;
	}

	.sidebar-content img {
		width: 37.778vw;
		padding-right: 4.444vw;
		object-fit: cover;
		border-radius: 1.111vw;
	}

	.sidebar-content h3 {
		font-size: 6.556vw;
	}

	.sidebar-content .phone *,
	.sidebar-content span {
		font-size: 3.8vw;
	}

	.sidebar-content .phone img {
		width: 3.889vw;
		margin-right: 2.222vw;
	}

	.contact-item.smm.user-unselect p {
		display: flex;
	}

	.contact-item.smm svg {
		width: 5vw;
		height: 5vw;
	}

	.contact-item.smm a {
		display: block;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		font-size: 1.6vw;
		padding: 2.222vw;
		border-radius: 50%;
		border: 1px solid var(--green);
		background-color: none;
		transition: all .3s ease;
		margin-right: 2.778vw;
	}

	.map,
	gmp-map {
		margin-top: 3.333vw;
		margin-bottom: 8.333vw;
	}

	.cta-buttons .btn.green span {
		right: 3vw;
		top: 2vw;
	}

	#contacts .contact-item p {
		color: var(--white);
	}

	.archive .services-grid {
		grid-template-columns: 1fr;
		margin: auto;
	}

	.service-card {
		align-items: center;
		text-align: center;
	}

	.archive .service-card {
		padding: 7.222vw;
	}

	.archive .btn span {
		font-size: 4.778vw;
		top: .3vw;
	}

	.service-card .btn {
		font-size: 3.333vw;
	}

	.service-card a span {
		margin-left: 0;
	}

	.services-grid {
		gap: 2.222vw;
	}

	.archive .services-header {
		margin-bottom: 11.667vw;
	}

	.archive .btn-wrapper {
		width: fit-content;
		margin: auto;
		padding-top: 6.667vw;
	}

	.archive .btn-wrapper .btn {
		padding: 5vw 7.778vw;
		border-radius: 2.222vw;
	}

	.archive .btn-wrapper .btn.green span {
		top: 1.3vw;
	}

	.services.archive {
		margin-bottom: 20vw;
	}

	.services.archive.p1 {
		margin-top: 30vw;
	}

	.important-box,
	.heading-section {
		letter-spacing: 0vw;
	}

	/* burger */
	.header {
		padding: 2.778vw 3.333vw;
		border-radius: 3.333vw;
	}

	header .nav {
		display: none;
	}

	.nav a,
	.logo-text span {
		font-size: 2.778vw;
	}

	.logo-circle {
		font-size: 5vw;
		width: 7vw;
		height: 7vw;
	}

	.burger-checkbox {
		position: absolute;
		visibility: hidden;
	}

	.burger {
		position: relative;
		z-index: 1;
		cursor: pointer;
		display: block;
		position: relative;
		border: none;
		background: transparent;
		width: 5.556vw;
		height: 15px;
	}

	.burger::before,
	.burger::after {
		content: '';
		left: 0;
		position: absolute;
		display: block;
		width: 100%;
		height: 1px;
		border-radius: 10px;
		background: var(--balck);
	}

	.burger::before {
		top: 0;
		box-shadow: 0 7px 0 var(--balck);
		transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
	}

	.burger::after {
		bottom: 0;
		transition: bottom .3s .15s, transform .3s;
	}

	.burger-checkbox:checked+.burger::before {
		top: 7px;
		transform: rotate(45deg);
		box-shadow: 0 6px 0 rgba(0, 0, 0, 0);
		transition: box-shadow .15s, top .3s, transform .3s .15s;
	}

	.burger-checkbox:checked+.burger::after {
		bottom: 7px;
		transform: rotate(-45deg);
		transition: bottom .3s, transform .3s .15s;
	}

	.mob-menu {
		position: fixed;
		display: block;
		background-color: var(--green-a);
		/* top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%); */
		left: 0;
		top: -100vh;
		height: 100vh;
		width: 100vw;
		z-index: 12;
		backdrop-filter: blur(10px);
		transition: all .3s ease;
	}

	.mob-menu.active {
		left: 0;
		top: 0;
	}

	.menu-nav {
		width: 90%;
		margin: auto;
		background-color: var(--white);
		margin-top: 30vw;
		border-radius: 3.333vw;
	}

	.mob-menu li,
	.mob-menu a {
		font-size: 6.667vw;
		text-align: center;
	}

	.mob-menu li {
		margin: 5.278vw auto;
	}

	.mob-menu a {
		color: var(--balck);
		text-decoration: none;
		text-transform: uppercase;
		font-family: var(--title);
	}

	.menu-list {
		padding: 10.278vw 0;
	}

	.line {
		width: 30%;
		margin: auto;
		height: 2px;
		background-color: var(--green);
	}

	.modal .phone,
	.mob-menu .phone {
		display: flex;
		flex-direction: column;
	}

	.modal .phone img,
	.mob-menu .phone img {
		width: 3.889vw;
		height: 3.889vw;
		margin-right: 2.222vw;
	}

	.modal .phone a,
	.mob-menu .phone a {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 3.333vw;
		margin-top: 2.222vw;
	}

	.modal .phone a {
		color: var(--green);
		text-decoration: none;
	}

	.modal .contact-item,
	.mob-menu .contact-item {
		justify-content: center;
		margin: auto;
		padding-bottom: 10.278vw;
		padding-top: 3.889vw;
	}

	.modal .contact-item {
		padding: 0;
		margin: 0;
	}

	.modal .contact-item.smm a:last-child,
	.mob-menu .contact-item.smm a:last-child {
		margin-right: 0;
	}

	.modal .contact-item.smm svg,
	.mob-menu .contact-item.smm svg {
		fill: var(--green)
	}

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

	.form-text h2 {
		text-align: center;
		font-size: 6.667vw;
	}

	.form-text {
		max-width: 100%;
	}

	.form-text a {
		display: none;
	}

	.modal-content {
		position: relative;
		margin-top: 30vw;
		border-radius: 3.333vw;
		padding: 19.167vw 7.778vw;
		padding-bottom: 10.278vw;
	}

	.close {
		position: absolute;
		right: 7.778vw;
		top: 10.278vw;
		color: var(--balck);
	}

	.modal .consultation-form textarea::placeholder,
	.consultation-form input::placeholder {
		font-size: 3.333vw;
		padding: 0;
	}

	.modal .consultation-form textarea,
	.modal .consultation-form input {
		height: 11.667vw;
		font-size: 3.333vw;
		padding: 3.889vw 8.889vw;
		border-radius: 2.222vw;
		margin-bottom: 1vw;
	}

	.consultation-form button,
	.consultation-form input {
		border-radius: 2.222vw;
	}

	.modal .consultation-form button {
		border-radius: 2.222vw;
	}

	.modal-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 13.611vw;
	}
}