@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Manrope:wght@200;400;500;600&family=Raleway:wght@400;800&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Manrope', sans-serif;
}

html,
body {
	overflow: hidden;
}

body {
	background-color: #000;
}

.wrapper {
	width: 100%;
	margin: 0 auto;
	position: relative;
	height: 100vh;
	display: flex;
}

.bg {
	transition: opacity 0.6s ease-in-out;
}

.bg.inactive {
	opacity: 0;
}

.bg > .bg__image,
.bg > .bg__video {
	height: 100%;
}

p,
label,
select {
	color: #000;
}

.content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.step {
	width: 400px;
	max-width: 85%;
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}

.step.active {
	display: flex;
}

.step h1 {
	text-transform: uppercase;
	font-family: 'Lora', sans-serif;
	font-weight: 400;
}

.step .question {
	color: #000;
}

.step .question p {
	font-weight: 200;
}

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

.details .detail {
	display: flex;
	gap: 8px;
}

.details .detail .detail__img {
	width: 16px;
}

form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.btn__options {
	display: grid;
	justify-items: center;
	grid-template-rows: repeat(2, 1fr);
	gap: 16px;
	width: 100%;
}

.btn__options .btn {
	width: 100%;
}

.btn {
	background-color: #ff1a96;
	color: #fff;
	border: none;
	padding: 16px;
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 20px;
	cursor: pointer;
	text-align: center;
	max-width: 240px;
}

.btn:hover {
	filter: brightness(110%) contrast(110%);
}

.options {
	display: flex;
	gap: 16px;
	max-width: 90%;
	align-self: flex-start;
}

.options label {
	display: flex;
	gap: 8px;
}

.btn--prochain {
	padding: 8px 32px;
}

.step-loader {
	align-items: center;
	text-align: center;
}

.fade-in-move {
	opacity: 0;
	transform: translateY(-8px);
}

.transition {
	transition: all 0.6s ease-in-out;
}

/* loader */

.three-body {
	--uib-size: 35px;
	--uib-speed: 0.8s;
	--uib-color: #ff1a96;
	position: relative;
	display: inline-block;
	height: var(--uib-size);
	width: var(--uib-size);
	animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
	position: absolute;
	height: 100%;
	width: 30%;
}

.three-body__dot:after {
	content: '';
	position: absolute;
	height: 0%;
	width: 100%;
	padding-bottom: 100%;
	background-color: var(--uib-color);
	border-radius: 50%;
}

.three-body__dot:nth-child(1) {
	bottom: 5%;
	left: 0;
	transform: rotate(60deg);
	transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
	bottom: 0;
	left: 0;
	animation: wobble1 var(--uib-speed) infinite ease-in-out;
	animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
	bottom: 5%;
	right: 0;
	transform: rotate(-60deg);
	transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
	bottom: 0;
	left: 0;
	animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15)
		ease-in-out;
}

.three-body__dot:nth-child(3) {
	bottom: -5%;
	left: 0;
	transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
	top: 0;
	left: 0;
	animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes spin78236 {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes wobble1 {
	0%,
	100% {
		transform: translateY(0%) scale(1);
		opacity: 1;
	}

	50% {
		transform: translateY(-66%) scale(0.65);
		opacity: 0.8;
	}
}

@keyframes wobble2 {
	0%,
	100% {
		transform: translateY(0%) scale(1);
		opacity: 1;
	}

	50% {
		transform: translateY(66%) scale(0.65);
		opacity: 0.8;
	}
}

.step-loader p,
.step-last > p:first-child {
	color: #000;
	font-weight: 500;
	font-size: 20px;
}

.results {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 55vh;
	overflow: auto;
}

.results::-webkit-scrollbar {
	width: 6px; /* Set the width of the scrollbar */
	height: 24px;
}

.results::-webkit-scrollbar-track {
	background: #fefefe;
}

.results::-webkit-scrollbar-thumb {
	background: #000; /* Set the color of the scrollbar thumb */
	border-radius: 5px; /* Round the corners of the scrollbar thumb */
	height: 24px;
}

.results::-webkit-scrollbar-thumb:hover {
	background: #300; /* Set the color of the scrollbar thumb when hovering over it */
}

.results__container {
	padding-block: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.results__area {
	display: none;
}

.results__area.active {
	display: block;
}

.profile {
	display: flex;
	gap: 12px;
}

.profile * {
	font-family: 'Raleway', sans-serif;
}

.profile > img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
}

.profile > .profile__details > .profile__name {
	font-weight: 800;
}

.btn--voir {
	border: none;
	background: none;
	color: #ff1a96;
	cursor: pointer;
}

.btn--inscription {
	margin-top: 8px;
}

.video {
	height: 100%;
}

.video video {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
}

.video.change .bg__video {
	display: none;
}

@media only screen and (max-width: 1400px) {
	.video.change .bg__video--mobile {
		display: block;
	}
}

@media only screen and (max-width: 860px) {
	.wrapper {
		justify-content: center;
	}

	.bg {
		position: absolute;
		inset: 0;
	}

	.bg::after {
		content: '';
		position: absolute;
		inset: 0;
		background-color: #000;
		opacity: 0.0;
	}

	.options {
		flex-direction: column;
	}

	.step-last--footer p:first-child {
		text-align: center;
	}
	
}

@media only screen and (min-width: 860px) {
	.wrapper {
		gap: 32px;
	}

	form {
		align-items: flex-start;
	}

	.bg {
		position: absolute;
		inset: 0;
		display: flex;
	}

	.bg .overlay {
		width: 50%;
		height: 100%;
	}

	.bg .video {
		width: 70%;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%);
		mask-image: linear-gradient(to right, transparent 0%, black 10%);
	}

	.content {
		width: 30%;
	}

	.step {
	width: 450px;
	padding-top: 0px;
    background-image: url('left_block.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
	}

	.step .question {
		display: flex;
		white-space: nowrap;
		align-items: center;
		gap: 8px;
	}

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

}

@media only screen and (min-width: 1400px) {
	.video.change .bg__video--desktop {
		display: block;
	}
}







.mybtn1 {
  font-size: 27px;
  text-transform: uppercase;
  text-shadow: #000 1px 1px 0px;
  padding: 15px 32px;
  font-weight: 600;
  display: inline-block;
  color: #fff;
  border: 0px;
  border-radius: 47px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  background-image: -webkit-gradient(linear, right top, left top, from(rgb(255 126 0)), to(rgb(210 58 39)));
  background-image: linear-gradient(to left, rgb(255 126 0), rgb(210 58 39));
  margin-top: 510px;
}
.mybtn1:hover {
  background-image: -webkit-gradient(linear, left top, right top, from(rgb(255 126 0)), to(rgb(210 58 39)));
  background-image: linear-gradient(to right, rgb(255 126 0), rgb(210 58 39));
  color: #fff;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}


.image-block {
    width: 450px;
	height: 407px;
    background-image: url('left_block.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	border: 1px solid #000;
}

@media only screen and (max-width: 860px) {
    .mybtn1 {
        margin-top: calc(100vh - 252px); /* Кнопка внизу экрана с небольшим отступом */
    }
}