@charset "UTF-8";
.service-head {
		text-align: center;
		color: var(--white);
		font-weight: 500;
		line-height: 1.6;
}
.service-head .container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100svh;
		padding-top: 185px;
		padding-bottom: 30px;
}
.service-head .container > * {
		flex: 0 0 auto;
		width: 100%;
}
.service-head .h1, .service-head .text {
		margin: 0 auto;
}
.service-head .h1 {
		font-size: 36px;
		line-height: 1.3;
		margin-bottom: 12px;
}
.service-head .text {
		max-width: 36em;
		margin-bottom: 60px;
}
.service-head .image {
		margin-top: auto;
		padding-bottom: 64px;
		position: relative;
}
.service-head:not(.visible) .image {
		opacity: 0;
}
.service-head .image .moving-gradient-wrap {
		max-height: 60%;
		min-height: 0;
		position: absolute;
		left: 0;
		right: 0;
}
.service-head .image .moving-gradient-wrap.upside-down {
		bottom: 0;
}
.service-head .image .inner {
		margin: 0 auto;
		max-width: 1200px;
		position: relative;
		backface-visibility: hidden;
		transform-origin: 50% 0;
		will-change: transform;
		z-index: 2;
		transform: translateZ(0);
}
@media only screen and (orientation: landscape) {
		.service-head .image .inner {
				transform: scale(calc(0.875 + 0.125 * var(--percent)));
		}
}
.service-head .image .inner .moving-gradient-wrap {
		top: 20px;
		left: 50%;
		right: auto;
		transform: translate3d(-50%, 0, 0);
		width: 93%;
		margin: 0;
}
.service-head .image .pic {
		backface-visibility: hidden;
		position: relative;
		aspect-ratio: 1200/766;
		border-radius: 9px;
		background-color: rgba(22, 29, 38, 0.50);
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: cover;
		-webkit-backdrop-filter: blur(33px);
		backdrop-filter: blur(33px);
		z-index: 2;
		width: 100%;
}
.service-head .image .pic:before, .service-head .image .pic:after {
		content: '';
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border: 3px solid #fff;
		border-radius: inherit;
}
.service-head .image .pic:before {
		opacity: 0.05;
}
.service-head .image .pic:after {
		border-color: transparent;
		--color2: #B8FE44;
		--color3: #3FFDD2;
		--color4: #E52EFF;
		--color5: rgba(1, 3, 21, 0.5);
		--color6: #E52EFF;
		background: radial-gradient(100% 100% at 50% 5%, var(--color2) 0%, var(--color3) 25%, var(--color4) 50%, var(--color5) 75%, var(--color6) 100%) border-box;
		-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
		mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: destination-out;
		mask-composite: exclude;
		opacity: 0.5;
}
@media only screen and (min-width: 640px) and (max-width: 999px) {
		.service-head .image {
				padding-bottom: 90px;
		}
		.service-head .image .pic {
				border-radius: 18px;
		}
		.service-head .image .pic:before, .service-head .image .pic:after {
				border-width: 6px;
		}
}
@media only screen and (min-width: 1000px) {
		.service-head .image {
				padding-bottom: 117px;
		}
		.service-head .image .pic {
				border-radius: 28px;
		}
		.service-head .image .pic:before, .service-head .image .pic:after {
				border-width: 8px;
		}
}
@media only screen and (min-width: 1000px) {
		.service-head {
				font-size: 20px;
		}
		.service-head .container {
				padding-top: 226px;
				padding-bottom: 80px;
		}
		.service-head .h1 {
				font-size: 5.625rem; /*90px*/
				line-height: 1.2;
				margin-bottom: 15px;
		}
		.service-head .text {
				margin-bottom: 106px;
		}
}