@charset "UTF-8";
:root {
	--g1: #b7b7b7;
	--g2: #9f9f9f;
	--g3: #777777;
	--g4: #5f5f5f;
	--g5: #373737;
	--g6: #000000;
	--gray-50: #f9f9f9;
	--gray-100: #ececec;
	--gray-200: #e3e3e3;
	--gray-300: #cdcdcd;
	--gray-400: #b4b4b4;
	--gray-500: #9b9b9b;
	--gray-600: #676767;
	--gray-700: #424242;
	--gray-750: #2f2f2f;
	--gray-800: #212121;
	--gray-900: #171717;
	--gray-950: #0d0d0d;
	--cc1: #efe2ec;
	--cc2: #f2d3ce;
	--cc3: #efd5ba;
	--cc4: #cbe3ca;
	--cc5: #b2d8e9;
	--cc6: #d8e8f2;
	--cc7: #f3e4cd;
	--cc8: #cae9d7;
	--cc9: #cbd6f9;
	--cc10: #dccdf1;
	--cc1l: #fff3fc;
	--cc2l: #fff0ee;
	--cc3l: #fff2e5;
	--cc4l: #e6f7e5;
	--cc5l: #d6f2ff;
	--cc6l: #f3fbff;
	--cc7l: #fff7ec;
	--cc8l: #e3f7ee;
	--cc9l: #eef2ff;
	--cc10l: #f8f2ff;
	--bg: #ffffff;
	--bgo: #ffffffdd;
	--bg2: #f5f5f5;
	--bg2o: #f5f5f5dd;
	--bg3: #eaeaea;
	--bg3o: #eaeaeadd;
	--bg4: #dfdfdf;
	--bg4o: #dfdfdfdd;
	--bg5: #cecece;
	--bg5o: #cececedd;
	--brd: #e1e1e1;
	--gr1: linear-gradient(0deg, #ffffff,#FFF8F5);
	--gr1i: linear-gradient(180deg, #ffffff,#FFF8F5);
	--gr2: linear-gradient(180deg, #fff1ed, #ffebe3);
	--gr2i: linear-gradient(0deg, #fff1ed, #ffebe3);
	--gr3: linear-gradient(180deg, #fff7f5, #fff4f0);
	--shad: 0 0.4rem 0.7rem 0.2rem var(--bg2);
	--shad-brd: rgba(255, 255, 255, .027);
}

html {
	scrollbar-width: thin;
	scrollbar-color: #888 #f1f1f1;
}

html::-webkit-scrollbar {
	width: 10px;
}

html::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}

html::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 5px;
}

html::-webkit-scrollbar-thumb:hover {
	background-color: #555;
}

html {
	font-size: 16px;
	margin: 0 auto;
	background-color: #fbfdff;
	display: flex;
	height: 100%;
}

@media (min-width: 1280px) {
	html {
		font-size: calc(16px + 15 * (100vw - 1280px) / 1280);
	}
}
@media (min-aspect-ratio: 1.929) and (min-width: 1280px) {
	html {
		max-width: 180.377788vh;
	}
}
:root {
	--c1: #dc2100;
	--c2: #d10092;
	--c3: #fa0;
	--c4: #09b300;
	--c5: #00ddd9;
	--c6: #0082d4;
	--c7: #bf7600;
	--c8: #00934f;
	--c9: #0051ff;
	--c10: #7a00d1;
	--main: #5c8198;
	--main-dark: #496678;
	--main-light: #6288a0;
	--addt: #003cd4;
	--addt-dark: #0033b4;
	--addt-light: #0048ff;
	--whatsapp: #26d367;
	--telegram: #0088cc;
	--mail: #ff5858;
	--phone-call: #11998e;
	--bg-whatsapp: linear-gradient(0deg, #26d367, #26d367);
	--bg-telegram: linear-gradient(0deg, #0088cc, #0088cc);
	--bg-mail: linear-gradient(0deg, #ff5858 0%, #f857a6 100%);
	--bg-phone-call: linear-gradient(0deg, #11998e 0%, #38ef7d 100%);
	/* --font-header: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
	/* --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
	--font-header: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-text: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--px: .06667rem;
	--pd: 1.5rem;
	--pd1: 1rem;
	--pd2: 3rem;
	--pd4: 6rem;
	--r1: 0;
	--r2: 0;
	--r3: 0;
}

@media (min-width: 1280px) {
	:root {
		--pd: 2rem;
	}
}
@media (max-width: 767px) {
	:root {
		--pd: 1rem;
	}
}
@media (prefers-color-scheme: light) {
	:root {
		--g1: #b7b7b7;
		--g2: #9f9f9f;
		--g3: #777777;
		--g4: #5f5f5f;
		--g5: #373737;
		--g6: #000000;
		--gray-50: #f9f9f9;
		--gray-100: #ececec;
		--gray-200: #e3e3e3;
		--gray-300: #cdcdcd;
		--gray-400: #b4b4b4;
		--gray-500: #9b9b9b;
		--gray-600: #676767;
		--gray-700: #424242;
		--gray-750: #2f2f2f;
		--gray-800: #212121;
		--gray-900: #171717;
		--gray-950: #0d0d0d;
		--cc1: #efe2ec;
		--cc2: #f2d3ce;
		--cc3: #efd5ba;
		--cc4: #cbe3ca;
		--cc5: #b2d8e9;
		--cc6: #d8e8f2;
		--cc7: #f3e4cd;
		--cc8: #cae9d7;
		--cc9: #cbd6f9;
		--cc10: #dccdf1;
		--cc1l: #fff3fc;
		--cc2l: #fff0ee;
		--cc3l: #fff2e5;
		--cc4l: #e6f7e5;
		--cc5l: #d6f2ff;
		--cc6l: #f3fbff;
		--cc7l: #fff7ec;
		--cc8l: #e3f7ee;
		--cc9l: #eef2ff;
		--cc10l: #f8f2ff;
		--bg: #ffffff;
		--bgo: #ffffffdd;
		--bg2: #f5f5f5;
		--bg2o: #f5f5f5dd;
		--bg3: #eaeaea;
		--bg3o: #eaeaeadd;
		--bg4: #dfdfdf;
		--bg4o: #dfdfdfdd;
		--bg5: #cecece;
		--bg5o: #cececedd;
		--brd: #e1e1e1;
		--gr1: linear-gradient(0deg, #ffffff,#FFF8F5);
		--gr1i: linear-gradient(180deg, #ffffff,#FFF8F5);
		--gr2: linear-gradient(180deg, #fff1ed, #ffebe3);
		--gr2i: linear-gradient(0deg, #fff1ed, #ffebe3);
		--gr3: linear-gradient(180deg, #fff7f5, #fff4f0);
		--gr4: linear-gradient(225deg, rgb(48, 166, 95), #1E6430, #163A1E);
		--shad: 0 0.4rem 0.7rem 0.2rem rgba(0,0,0,.2);
		--shad-brd: rgba(255, 255, 255, .027);
		--shad: 0 0.4rem 0.7rem 0.2rem rgba(0,0,0,.1);
	}
	html {
		scrollbar-width: thin;
		scrollbar-color: #888 #f1f1f1;
	}
	html::-webkit-scrollbar {
		width: 10px;
	}
	html::-webkit-scrollbar-track {
		background-color: #f1f1f1;
	}
	html::-webkit-scrollbar-thumb {
		background-color: #888;
		border-radius: 5px;
	}
	html::-webkit-scrollbar-thumb:hover {
		background-color: #555;
	}
}

@keyframes a {
	0% {
		left: -150%;
	}
	80% {
		left: -150%;
	}
	100% {
		left: 150%;
	}
}

* {
	font-family: var(--font-text);
	outline: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-moz-background-clip: padding-box !important;
	-webkit-background-clip: padding-box !important;
	background-clip: padding-box !important;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 130%;
	font-family: var(--font-header);
}

h1 {
	font-size: 2.2rem;
}
h1.block {
	margin: 0;
}

h2 {
	font-size: 2rem;
}
h2.block {
	margin: 0;
}

h3 {
	font-size: 1.7rem;
}
h3.block {
	margin: 0;
}

h4 {
	font-size: 1.4rem;
}
h4.block {
	margin: 0;
}

h5 {
	font-size: 1.2rem;
}
h5.block {
	margin: 0;
}

h6 {
	font-size: 1rem;
}
h6.block {
	margin: 0;
}

.no-scrollbars {
	scrollbar-track-color: transparent;
	scrollbar-width: none;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}
.no-scrollbars::-webkit-scrollbar {
	width: 0;
}
.no-scrollbars::-webkit-scrollbar-track {
	display: none;
}
.no-scrollbars::-webkit-scrollbar-thumb {
	display: none;
}
.no-scrollbars::-webkit-scrollbar-thumb:hover {
	display: none;
}
.no-scrollbars::-webkit-scrollbar-corner {
	display: none;
}

.buttons {
	display: flex;
}
.buttons button, .buttons a {
	position: relative;
	display: flex;
	text-decoration: none;
	color: #fff;
	padding: 0.66rem 1.2rem;
	font-weight: 400;
	font-size: 0.6rem;
	text-transform: uppercase;
	border: none;
	border-radius: var(--r3);
	background: linear-gradient(180deg, var(--main-light), var(--main));
	justify-content: center;
	align-items: center;
	transition: all 0.2s linear;
	overflow: hidden;
}
.buttons button::before, .buttons a::before {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	left: 0;
	height: 100%;
	width: 100%;
	transform: skewX(-45deg);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), white);
	box-shadow: 0.625rem 0 1.25rem -0.625rem #fff;
	animation: a 5s infinite linear;
}
.buttons button:hover, .buttons a:hover {
	background: linear-gradient(0deg, var(--main-light), var(--main));
}
.buttons button:hover::before, .buttons a:hover::before {
	display: none;
}
.buttons button.disabled, .buttons a.disabled {
	opacity: 0.5;
	pointer-events: none;
}
.buttons button.disabled::before, .buttons a.disabled::before {
	display: none;
}
.buttons button.hidden, .buttons a.hidden {
	display: none;
}

img,
svg {
	vertical-align: middle;
}

* > p {
	margin-top: 0;
	margin-bottom: 1rem;
}

* > p:nth-last-child(1) {
	margin-bottom: 0;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
}

body {
	background-color: var(--bg);
	display: flex;
	flex-direction: column;
	height: auto;
}

a,
button,
input[type=submit] {
	outline: none;
}

a {
	color: var(--main);
	position: relative;
	text-decoration: none;
	z-index: 2;
}
a:hover {
	color: var(--main-dark);
}

img {
	vertical-align: middle;
}

.scrollable-x {
	overflow-y: hidden;
	overflow-x: scroll;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}
.scrollable-x::-webkit-scrollbar {
	width: 0;
}

.scrollable-y {
	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}
.scrollable-y::-webkit-scrollbar {
	width: 0;
}

body {
	background-color: var(--bg);
	position: relative;
	display: flex;
	flex-direction: column;
}

body > main {
	flex-grow: 1;
	background-color: var(--bg);
}
body > main > .block {
	margin-top: var(--pd2);
}
body > main > .block:nth-child(1),
body > main > .block.box + .block.box {
	margin-top: 0;
}
body > main > .block.item + .block {
	margin-top: 0;
}
body > main > .block:nth-last-child(1) {
	margin-bottom: var(--pd2);
}
body > main > .block:nth-last-child(1).box, body > main > .block:nth-last-child(1).colored {
	margin-bottom: 0;
}

figure {
	padding: 0;
	margin: 0;
	margin-bottom: 1rem;
}
figure.image {
	display: flex;
	justify-content: center;
}
figure img {
	max-width: 100%;
}
figure.table {
	scrollbar-track-color: transparent;
	scrollbar-width: none;
	scrollbar-color: transparent transparent;
	overflow-x: scroll;
	width: 100%;
}
figure.table::-webkit-scrollbar {
	width: 0;
}
figure.table::-webkit-scrollbar-track {
	display: none;
}
figure.table::-webkit-scrollbar-thumb {
	display: none;
}
figure.table::-webkit-scrollbar-thumb:hover {
	display: none;
}
figure.table::-webkit-scrollbar-corner {
	display: none;
}
figure.table table {
	border-collapse: collapse;
	max-width: 100%;
}
figure.table table td {
	padding: 0.5rem 0.75rem;
}
figure.table table tr:not(:last-child) {
	border-bottom: var(--px) solid var(--c6);
}

.bar {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
.bar div:nth-child(1) {
	width: 3rem;
	font-weight: 700;
	color: var(--g6);
	z-index: 2;
}
.bar div:nth-child(2) {
	width: calc(100% - 4rem);
	background-color: var(--c5);
	border-radius: 0.5rem;
	overflow: hidden;
	display: flex;
}
.bar div:nth-child(2) > div {
	color: var(--bg);
	background-color: var(--c1);
	transform: translate(-100%, 0);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 2.5rem;
	padding: 0 1rem;
	transition: transform 1.5s ease-in-out 1s;
}
.bar.animate div:nth-child(2) > div {
	transform: translate(0, 0);
}
/* Header 2 */

.headers--2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding-inline: var(--pd);
	padding-block: 1rem;
	display:grid;
	background: linear-gradient(to bottom, #ffffffdd 0%, transparent 100%);
	grid-template-columns:
		1.5rem               /* 1st  = gutter, equals last */
		minmax(0,1fr)     /* 2nd  = grows */
		3rem              /* 3rd  = fixed 3rem */
		minmax(0,1fr)     /* 4th  = grows */
		1.5rem;              /* 5th  = gutter, equals first */
	align-items:center;
	gap:.5rem;
	transition: all .3s ease-in-out;
	&.trigger {
		background: var(--bg);
		box-shadow: 0 .2rem .6rem rgba(0,0,0,.1);
	}
	& > div:nth-child(1) {
		position: relative;
		display: flex;
		align-items: center;
		& > a {
			display: flex;
			gap: .5rem;
			font-weight: 700;
			font-size: .7rem;
			color: var(--g4);
			text-decoration: none;
			align-items: center;
			& > svg {
				height: 1.5rem;
			}
			& > span {
				color: var(--g4);
			}
			&.opened > span {
				color: var(--g6);
			}
		}
		& > div {
			display: none;
			background-color: var(--bg);
			flex-direction: column;
			position: absolute;
			top: 100%;
			left: 0;
			padding: 1rem;
			border-radius: var(--r1);
			gap: .5rem;
			box-shadow: var(--shad);
			z-index: 10;
			& a {
				font-size: .6rem;
				text-transform: uppercase;
				color: var(--g4);
				&.active {
					color: var(--main);
				}
			}
		}
		& > a.opened + div {
			display: flex;
		}
	}
	& > div:nth-child(5) {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		& a {
			text-decoration: none;
			color: var(--g4);
			& svg, 
			& img {
				width: 1.5rem;
			}
		}
	}
	& > div:nth-child(2),
	& > div:nth-child(4) {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		& a {
			text-decoration: none;
			color: var(--g4);
			font-size: .75rem;
			text-transform: uppercase;
			font-weight: 300;
			&.active {
				color: var(--main);
			}
		}
	}
	& > div:nth-child(3) {
		display: flex;
		align-items: center;
		& a {
			display: block;
			text-decoration: none;
			& img {
				width: 100%;
			}
		}
	}
	@media (max-width: 991px) {
		grid-template-columns:
			1fr               /* 1st  = gutter, equals last */
			2.5rem              /* 3rd  = fixed 3rem */
			1fr;              /* 5th  = gutter, equals first */
		& > div:nth-child(2),
		& > div:nth-child(4) {
			display: none;
		}
		& + main > .block:nth-child(1) {
			padding-top: 8.5rem;
			@media (max-width: 767px) {
				padding-top: 5.5rem;
			}
		}
	}
}

/* Hero 3 */

.hero--3 {
	position: relative;
	padding-inline: var(--pd);
	width: 100%;
	& .img {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1;
		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		& video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		& picture {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: flex-end;
			& img {
				width: 100%;
				display: block;
			}
		}
	}
	& .ovr {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 2;
		/* background: radial-gradient(farthest-corner at 75% 60%,rgba(0,0,0,0) 20%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.5) 60%); */
	}
	& .cont {
		position: relative;
		z-index: 3;
		padding-block: 12rem 4rem;
		color: var(--g6);
		text-shadow: 0 1px 8px rgba(0,0,0,0.18);
		& .main {
			padding-inline: var(--pd4);
			& h1 {
				font-size: 3rem;
				font-weight: 300;
				line-height: 1.2;
				margin-block: 0 1.2rem;
				color: var(--g6);
				strong {
					font-weight: 700;
				}
			}
			& p {
				font-size: 1.2rem;
				color: var(--g6);
				margin-bottom: 1.6rem;
			}
			& ul {
				display: flex;
				gap: 2.2rem;
				margin-bottom: 1.6rem;
				list-style: none;
				padding: 0;
				flex-wrap: wrap;
				& li {
					font-size: .8rem;
					color: var(--g6);
					position: relative;
					padding-left: 1.6rem;
					flex: 0 0 20%;
					&:before {
						content: "✔";
						position: absolute;
						left: 0;
						color: var(--main);
						font-size: 1.1rem;
					}
				}
				@media (max-width: 767px) {
					width: 100%;
					& li {
						width: calc(50% - 1.1rem);
						flex-grow: 1;
					}
				}
			}
			& .btn-cont {
				display: flex;
				gap: 1rem;
				font-size: .75rem;
				color: var(--g6);
				align-items: center;
				margin-top: 1.2rem;
				@media (max-width: 767px) {
					flex-direction: column;
					align-items: flex-start;
				}
			}
			& .btn {
				display: inline-block;
				background: var(--main);
				color: #fff;
				font-weight: 400;
				font-size: .75rem;
				text-transform: uppercase;
				padding: 1.1rem 2.8rem;
				border-radius: var(--r3);
				box-shadow: 0 .1rem .8rem rgba(231,196,122,0.18);
				text-decoration: none;
				transition: background 0.2s;
				border: none;
				cursor: pointer;
				position: relative;
				overflow: hidden;
				white-space: nowrap;
				transition: all .2s linear;
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: -150%;
					left: 0;
					height: 100%;
					width: 100%;
					transform: skewX(-45deg);
					background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), white);
					box-shadow: 0.625rem 0 1.25rem -0.625rem #fff;
					animation: a 5s infinite linear;
				}
				&:hover {
					opacity: .8;
					&::before {
						display: none;
					}
				}
			}
			@media (orientation: portrait) {
				& h1 {margin-block: 0 2rem;}
				& p {margin-bottom: 2rem;}
				& ul {margin-bottom: 2rem;}
			}
		}
		& ul.list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1.2rem 2.2rem;
			margin-top: 6rem;
			list-style: none;
			padding: 0;
			& li {
				position: relative;
				border-radius: 1.2rem;
				padding: 1.2rem 1.4rem;
				font-size: .85rem;
				color: var(--g6);
				padding-left: 1.6rem;
				&:before {
					content: "○";
					position: absolute;
					left: 0;
					top: 1.3rem;
					color: var(--main);
					font-size: 1rem;
				}
				& strong {
					font-size: 1rem;
				}
			}
		}
		@media (max-width: 767px) {
			padding-block: var(--pd4) var(--pd2);
			display: flex;
			flex-direction: column;
			& .main {
				padding-inline: var(--pd);
				& h1 {
					font-size: 2.3rem;
				}
			}
			& ul.list {
				grid-template-columns: repeat(1, 1fr);
				margin-top: 3rem;
				gap: 1rem;
				padding-inline: var(--pd);
				& li {
					padding: 0 0 0 1.6rem;
					&:before {
						top: 0;
					}
				}
			}
		}
	}
}

/* LIST 9 */

.list--9 {
	padding-inline: var(--pd);
	display: flex;
	flex-direction: column;
	gap: var(--pd) 2rem;
	& .title {
		display: flex;
		gap: 2rem;

		& .ttl {
			width: calc(40% - 1rem);
			font-size: 2rem;
			line-height: 110%;
			font-weight: 700;
			margin: 0;
		}

		& .dsc {
			width: calc(60% - 1rem);
			font-weight: 300;
			font-size: .85rem;
			color: var(--g5);
			line-height: 130%;
		}
	}
	& .types {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem;
		& .item {
			padding: 0;
			width: calc(100% / 3 - 2rem * 2 / 3);
			position: relative;
			overflow: hidden;
            box-shadow: .3rem .3rem .7rem .25rem #ddd;
			transition: all .2s linear;
			border-radius: var(--r2);
			overflow: hidden;

			& > img {
				position: absolute;
				border-radius: var(--r2);
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 1;
			}

			& > a {
				display: block;
				padding-top: 60%;
				height: 100%;
				text-decoration: none;
				outline: none;
				position: relative;
				z-index: 2;

				&:after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					width: 100%;
					height: 100%;
					z-index: 3;
					background-color: var(--g6);
					opacity: .2;
				}

				& > div {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					z-index: 4;
					color: #fff;
					font-size: 1rem;
					font-weight: 400;
					padding: 1rem;
					font-weight: 600;
				}
			}

			&:hover {
				transform: translate(0, -0.3rem);
			}
		}
	}

	@media (max-width:767px) {
		& .title {
			flex-direction: column;
			gap: .5rem;
			& .ttl,
			& .dsc {
				width: 100%;
			}

			& .ttl {
				font-size: 2rem;
			}
		}
		& .types {
			flex-direction: column;
			justify-content: flex-start;

			& .item {
				width: 100%;
				& > a > div {
					font-size: 1.2rem;
				}
			}
		}
	}
}