:root {
	--white: #fff;
	--blue1: #3473A1;
	--blue2: #3F98D8;
}
@font-face {
	font-family: "SSFBreakthrough";
	src: url("../fonts/SSFBreakthrough-Regular.ttf");
	font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: "SSFBreakthrough";
	src: url("../fonts/SSFBreakthrough-Bold.ttf");
	font-style: normal;
	font-weight: 600;
}
@font-face {
	font-family: "Rawline";
	src: url("../fonts/rawline-400.ttf");
	font-style: normal;
	font-weight: 400;
}

html, body {
	margin: 0 auto;
	padding: 0;
}

* {
	box-sizing: border-box;
	font-family: 'SSFBreakthrough';
}


.pg_wrapper {
	height: max-content;
	overflow: hidden;
}
section {
	height: 100vh;
	width: 100%;
	position: relative;
	overflow-x: clip;
}
.container {
	max-width: 1400px;
	position: relative;
	height: 100%;
	margin: 0 auto;
	padding: 0 15px;
	z-index: 3;
}
.bg_gr {
	position: absolute;
	height: 200vw;
	width: 200vw;
	border-radius: 50%;
	z-index: 1;

	&.blue {
		background: radial-gradient(50% 50% at 50% 50%, #0EA5E9 0%, rgba(14, 165, 233, 0) 100%);
		top: 10vh;
		left: 0;
		transform: translate(-50%, -50%);
	}
	&.orange {
		background: radial-gradient(50% 50% at 50% 50%, #EAB308 0%, rgba(234, 179, 8, 0) 100%);
		top: 50%;
		right: 0;
		transform: translate(50%, -50%);
	}
	&.darkblue {
		background: radial-gradient(50% 50% at 50% 50%, #475569 0%, rgba(71, 85, 105, 0) 100%);
		top: 50%;
		left: 0;
		transform: translate(-50%, -50%);
	}
}
.bg_im {
	position: absolute;
	z-index: 2;

	&.tower {
		top: 50px;
		left: 50%;
		transform: translateX(-40%);
		background: url('../img/tower_4k.png') top left no-repeat;
		background-size: contain;
		height: 150vh;
		width: 100%;
		opacity: 0.06;
	}

	&.dram {
		bottom: 0;
		left: 50%;
		transform: translateX(-20%);
		background: url('../img/theater_4k.png') bottom left no-repeat;
		background-size: contain;
		height: 150vh;
		width: 150%;
		opacity: 0.04;
	}
}
h1 {
	font-weight: 600;
	color: #333;
	font-size: 5em;
	max-width: 550px;
	margin: 0;
	position: relative;
	top: 50px;
	opacity: 0;
	transition: .6s;

	&.vis {
		top: 0px;
		opacity: 1;
	}
}
h3 {
	font-weight: 400;
	color: #333;
	font-size: 2.3em;
	max-width: 550px;
	position: relative;
	top: 50px;
	opacity: 0;
	transition: .8s;
	
	&.vis {
		top: 0px;
		opacity: 1;
	}
}
.nav_btn {
	padding: 10px 15px 10px 20px;
	border: solid 1px #eee;
	border-radius: 50px;
	background: linear-gradient(90deg, #D0E3FF 0%, #A1B7EE 100%);
	width: fit-content;
	display: grid;
	grid-template-columns: 1fr 36px;
	column-gap: 20px;
	justify-self: end;
	cursor: pointer;
	transform: translateX(-200px);
	opacity: 0;
	text-decoration: none;
	transition: .6s;

	&.vis {
		transform: translateX(0);
		opacity: 1;
	}

	&:hover {
		box-shadow: #333 0 0 20px -10px;

		& .arrow span {
			display: inline-block;
			animation-duration: .6s;
			animation-name: slide_arrow;
		}
	}

	& .text {
		font-size: 2em;
		color: var(--white);
		font-weight: 600;
		font-family: 'Rawline';
		margin-top: -9px;
	}

	& .arrow {
		font-size: 32px;
		text-align: center;
		line-height: 42px;
		background: #fff;
		border-radius: 50%;
		width: 36px;
		height: 36px;
		position: relative;
		overflow: hidden;
	}

	&.blue {
		background: #A1B7EE;
		& .arrow {color: #A1B7EE}
	}

	&.orange {
		background: #EAB308;
		& .arrow {color: #EAB308}
	}

	&.darkblue {
		background: #475569;
		& .arrow {color: #475569}
	}
}

.head_title {
	border: solid 12px var(--white);
	padding: 0px 100px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	border-radius: 350px;

	& .big {
		color: var(--blue2);
		font-size: 180px;
		font-weight: 600;
		display: block;
		margin-bottom: -15px;

		&::first-letter {
			font-size: 248px;
		}
	}

	& .small {
		color: var(--blue1);
		font-size: 48px;
		font-weight: 400;
		letter-spacing: 15%;
		position: absolute;
		top: 30px;
		left: 310px;
	}
}

.frame_splitter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}
.point {
	position: relative;
	z-index: 2;

	&::after {
		content: '';
		height: 48px;
		width: 48px;
		border-radius: 50%;
		background: var(--white);
		position: absolute;
		bottom: -8px;
	}

	&.r::after {
		left: 23%;
	}
	&.l::after {
		right: 23%;
	}
}
.marker {
	position: relative;
	z-index: 3;
	transform: rotate(0deg) scale(0);

	&.vis {
		animation-duration: 1s;

		&.right {
			transform: rotate(20deg);
			animation-name: points_r;
		}
		&.left {
			transform: rotate(-20deg);
			animation-name: points_l;
		}
	}
}


/* SVG линия */
#route {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400vh;
	pointer-events: none;
	z-index: 2;
}

#routePath {
	fill: none;
	stroke: white;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 14 14;
}
/* anchors */
.subanc {
	position: absolute;
	bottom: 30%;
	left: 10%;
}
.lastanc {
	position: absolute;
	bottom: 0;
	left: 10%;
}


@keyframes slide_arrow {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	/* Стрелка плавно улетает вправо и исчезает */
	45% {
		transform: translateX(40px);
		opacity: 0;
	}

	/* Мгновенный перенос стрелки влево за экран пока она невидима */
	46% {
		transform: translateX(-40px);
		opacity: 0;
	}

	/* Стрелка плавно возвращается слева на свое место */
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes points_r {
	0% {
		transform: rotate(0deg) scale(0);
	}
	50% {
		transform: rotate(0deg) scale(1.2);
	}
	100% {
		transform: rotate(20deg) scale(1);
	}
}
@keyframes points_l {
	0% {
		transform: rotate(0deg) scale(0);
	}

	50% {
		transform: rotate(0deg) scale(1.2);
	}

	100% {
		transform: rotate(-20deg) scale(1);
	}
}





/* TOP MENU */
section.top_menu {
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	backdrop-filter: blur(10px);
	z-index: 5;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 0 15px -10px #000;

	& .flex_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0;

		& .top_logo {
			display: grid;
			grid-template-columns: 40px 1fr;
			column-gap: 10px;

			& .logo {
				height: 40px;

				& img {
					height: 100%;
				}
			}

			& .text {
				display: grid;
				align-items: center;

				& .text_pr {
					color: #0369a1;
					font-size: 24px;
					font-weight: 600;
					letter-spacing: 1px;
				}
				
				& .text_sub {
					font-size: 14px;
					letter-spacing: 1px;
				}
			}
		}

		& nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			column-gap: 25px;

			& li {
				font-size: 20px;

				& a {
					text-decoration: none;
					color: #475569;
					display: flex;
					align-items: center;
					column-gap: 10px;
					padding: 10px 15px 8px 15px;
					border-radius: 10px;
					transition: .3s;

					&.active {
						background: #e0f2fe;
					}

					&:hover {
						color: #0284c7;
						background: #f1f5f9;

						& svg {
							fill: #0369A1;
						}
					}

					& .nav_i svg {
						height: 18px;
						width: 18px;
						margin-bottom: -2px;
					}
				}
			}
		}
	}
}



/* PAGES */
section.page_title {
	margin: 100px 0 50px 0;
	height: auto;

	& .pg_tomain a {
		font-family: 'Rawline';
		font-size: 16px;
		letter-spacing: 1px;
		font-weight: 600;
		text-decoration: none;
		color: #0284c7;
		transition: .3s;

		&::before {
			content: '←';
			font-family: 'SSFBreakthrough';
		}
		&:hover {
			color: #0369a1;
		}
	}

	& .pg_title {
		color: #0369a1;
		font-size: 32px;
		font-weight: 600;
		margin-top: 15px;
	}

	& .pg_subtitle {
		font-family: 'Rawline';
	}
}

section.content {
	min-height: 100vh;
	height: auto;

	& .content_grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
		grid-gap: 25px;

		& .content_item {
			border-radius: 20px;
			overflow: clip;
			box-shadow: 0 0 15px -10px #000;
			cursor: pointer;
			transition: .3s;

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 0 20px -10px #000;
			}

			& .item_photo {
				height: 220px;
				overflow: clip;
				position: relative;

				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
				}

				& .item_stars {
					position: absolute;
					top: 10px;
					right: 10px;
					padding: 5px 10px;
					background: #0ea5e9;
					border-radius: 50px;
					color: #fff;
					font-family: 'Rawline';
				}
			}

			& .item_text {
				padding: 15px;

				& .item_title {
					font-size: 24px;
					font-weight: 600;
					color: #0369a1;
				}

				& .item_rating {
					margin: 10px 0 15px 0;
					font-size: 18px;

					& .rating_stars {
						color: #fbbf24;
					}

					& .rating_value {
						font-size: 16px;
						padding-left: 5px;
					}
				}

				& .item_descr {
					font-size: 18px;
					line-height: 22px;
					text-align: justify;
					font-family: 'Rawline';
				}

				& .item_adress {
					display: flex;
					column-gap: 5px;
					align-items: center;
					margin-top: 15px;

					& .adress_point svg {
						height: 18px;
						width: 18px;
						margin-bottom: -4px;
					}
				}
			}
		}
	}
}


footer {
	margin-top: 56px;
	width: 100%;
	position: relative;
	overflow-x: clip;
	background: #334155;

	.foo_flex {
		display: flex;
		justify-content: space-between;
		color: var(--white);
		padding: 30px 0;

		& .foo_title {
			font-size: 22px;
			font-weight: 600;
			margin-bottom: 15px;
		}

		& .copy {
			margin-top: 22px;
			text-align: right;
		}
	}
}