@import url("./styles/vars.less");

* {
    margin: 0;
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    line-height: inherit;
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
    //scroll-behavior: smooth;
}

body{
    background-color: @black;
    color: @white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: @first-font;
    font-style: normal;
    font-size: 18px;
    line-height: 1.3;
    box-sizing: border-box;
    padding-top: 92px;

    @media (max-width: @breakpoint-M) {
        padding-top: 80px;
    }

	&.menu-opened {
		overflow: hidden;
	}
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        color: inherit;
    }
}
button {
    border: none;
    cursor: pointer;
    padding: 0; 
    background-color: transparent;
}

h1 {
	max-width: 970px;
    margin: 0;
	font-weight: 500;
	font-size: 76px;
	line-height: 105%;
	text-align: center;
	color: @light-green;

    @media (max-width: @breakpoint-M) {
        font-size: 36px;
    }
}

.h2 {
	font-weight: 500;
	font-size: 56px;
	line-height: 105%;
	text-align: center;
	color: @light-green;
	margin-bottom: 48px;

    @media (max-width: @breakpoint-M) {
        font-size: 32px;
		margin-bottom: 24px;
    }

	&+.description {
		margin-top: -16px;
		@media (max-width: @breakpoint-M) {
			margin-top: -12px;
		}
	}
}
.description {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-weight: 400;
	font-size: 24px;
	line-height: 130%;
	text-align: center;
	color: @white;
	margin-bottom: 48px;

	span {
		max-width: 800px;
	}

	@media (max-width: @breakpoint-M) {
		margin-bottom: 24px;
		font-size: 17px;
	}
}

.container{
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;

	@media (max-width: @breakpoint-L){
		max-width: 100%;
		padding: 0 20px;
    }
    @media (max-width: @breakpoint-M){
        max-width: 100%;
		padding: 0 16px;
    }  
}

.section {
	padding: 120px 0;

	@media (max-width: @breakpoint-M) {
		padding: 70px 0;
	}
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 60px;
	border-radius: 100px;
	padding: 0px 48px;
	font-weight: 500;
	font-size: 18px;
	line-height: 100%;
	text-align: center;

	@media (max-width: @breakpoint-M) {
		height: 48px;
		font-size: 16px;
	}

	&.black {
		background-color: @text-black;
		color: @white;
	}
	&.white {
		background-color: @white;
		color: #009657;
	}
	&.border-btn {
		border: 2px solid @black;
		color: @text-black;
	}
	&.white-border-btn {
		color: @white;
		border: 2px solid @white;
	}
	&.light-yellow-btn {
		background-color: #f5e69b;
		color: @black;
	}
	&.green {
		background-color: @green;
		color: @white;
	}
}

.contact-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid @white;
	border-radius: 100px;
	padding: 0px 24px 2px 24px;
	height: 60px;
	width: fit-content;
	min-width: 60px;
	color: @white;
	font-weight: 400;
	font-size: 18px;
	line-height: 100%;
	text-align: center;

    @media (max-width: @breakpoint-M) {
        height: 48px;
		min-width: 48px;
		font-size: 16px;
    }
    
	&.icon {
		width: 60px;
		padding: 0;

		@media (max-width: @breakpoint-M) {
			height: 48px;
			width: 48px;
		}
	}
}

.modal {
	&__top-row {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 52px;
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: flex-end;
	}
}

form{
	.choices {
		.choices__inner {
			padding: 12px 16px;
			border-radius: 12px;
			background: rgba(252, 248, 245, 0.05);
			display: flex;
			align-items: center;
			border: none;

			.choices__list--single {
				display: flex;
				align-items: center;

				.choices__item {
					font-weight: 400;
					font-size: 18px;
					line-height: 130%
				}
				.choices__item--selectable {
					color: @white;
				}
			}
			
		}
		.choices__list--dropdown, .choices__list[aria-expanded] {
			background-color: #262523;
			border: none;
			padding-top: 10px;
			padding-bottom: 3px;
			border-bottom-left-radius: 12px;
			border-bottom-right-radius: 12px;
			top: ~"calc(100% - 10px)";
		}
		.choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable {
			font-weight: 400;
			font-size: 18px;
			line-height: 130%
		}
		.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
			background-color: #161614;
		}
		.is-open .choices__list--dropdown, .choices__list[aria-expanded] {
			background-color: #262523;
			border: none;
		}
		.is-open .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
			background-color: #161614;
		}
		&[data-type*=select-one]{
			&.is-open{
				&::after{
					margin: 0;
					border: none;
					transform: rotateX(180deg);
				}
			}
			&::after{
				margin: 0;
				height: 24px;
				width: 24px;
				right: 16px;
				top: calc(50% - 10px);
				border: none;
				transform: rotate(0);
				background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0045 19C12.5306 18.9951 13.0336 18.7832 13.4045 18.41L17.7045 14.12C17.8907 13.9326 17.9953 13.6792 17.9953 13.415C17.9953 13.1508 17.8907 12.8974 17.7045 12.71C17.6115 12.6163 17.5009 12.5419 17.379 12.4911C17.2572 12.4403 17.1265 12.4142 16.9945 12.4142C16.8625 12.4142 16.7318 12.4403 16.6099 12.4911C16.488 12.5419 16.3774 12.6163 16.2845 12.71L13.0045 16V6C13.0045 5.73478 12.8991 5.48043 12.7116 5.29289C12.524 5.10536 12.2697 5 12.0045 5C11.7393 5 11.4849 5.10536 11.2974 5.29289C11.1098 5.48043 11.0045 5.73478 11.0045 6L11.0045 16L7.71447 12.71C7.52749 12.5217 7.27337 12.4154 7.00801 12.4144C6.74264 12.4135 6.48777 12.518 6.29947 12.705C6.11117 12.892 6.00485 13.1461 6.00391 13.4115C6.00297 13.6768 6.10749 13.9317 6.29447 14.12L10.5945 18.41C10.9678 18.7856 11.4749 18.9978 12.0045 19Z' fill='%23FCF8F5'/%3E%3C/svg%3E%0A");
			}
		}

		&[data-type*=select-one].is-open::after {
			transform: rotate(180deg);
			margin-top: 0;
			top: 18px;
		}
	}
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
	pointer-events: none;
	height: 100dvh;
	width: 100vw;
	display: flex;
    flex: 1;
	background: @black;
	z-index: 10;
	transform: translateY(~"calc(-100% - 300px)");
	transition: transform .9s ease;

	&::after {
		content: '';
		position: absolute;
		top: 100%;
		display: block;
		height: 300px;
		width: 100%;
		background-color: @green;
	}

    &.open {
		pointer-events: all;
        z-index: 50;
		visibility: visible;
		transform: translateY(0);

        .menu {
            ul {
                li {
                    opacity: 1;
                    transform: translateX(0);
                    backface-visibility: hidden;
                    transition-duration: .5s;
                }
            }
			.mobile-menu-btn {
				opacity: 1;
				// transition-duration: .5s;
			}
        }
        .shirma {
            visibility: visible;
            transform: translateY(0);
            transition-delay: .5s;
        }
    }
    &.close {
        
        .menu {
            ul {
                li {
                    opacity: 0;
					transform: translateX(-40px);
                    transition-delay: 0s;
                    pointer-events: none;
                    &:nth-child(1) {
                        transition-delay: 0s;
                    }
                    &:nth-child(2) {
                        transition-delay: 0s;
                    }
                    &:nth-child(3) {
                        transition-delay: 0s;
                    }
                }
            }
			.mobile-menu-btn {
				opacity: 0;
				transition-delay: 0s;
			}
        }
		&::after {
			opacity: 0;
			background-color: transparent;
		}
    }

    .menu {
		position: relative;
        list-style-type: none;
        margin: 0;
        padding: 80px 24px 16px 24px;
        z-index: 50;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

        ul {
            display: flex;
            flex-direction: column;
			gap: 32px;
			margin-top: 54px;
            
            li {
                opacity: 0;
                margin-bottom: 25px;
                transform: translateX(-40px);
                transition: all 0.3s;
                color: @white;
                font-weight: 500;
				font-size: 18px;
				line-height: 130%;
                text-underline-offset: 4px;
                
                &:hover {
                    text-decoration-line: underline;
                }

                &:nth-child(1) {
                    transition-delay: 1.4s;
                }
                &:nth-child(2) {
                    transition-delay: 1.6s;
                }
                &:nth-child(3) {
                    transition-delay: 1.8s;
                }
                &:nth-child(4) {
                    transition-delay: 2s;
                }
                &:nth-child(5) {
                    transition-delay: 2.2s;
                }
                &:nth-child(6) {
                    transition-delay: 2.4s;
                }
                &:nth-child(7) {
                    transition-delay: 2.6s;
                }

                &.is-open {
                    a {
                        color: @black;
                        text-decoration-line: underline;
                    }
                }
                a {
                    color: inherit;
                    font-size: inherit;
                    font-weight: inherit;
                    line-height: inherit;
                }
            }

        }
		.mobile-menu-btn {
			transition: opacity .3s ease;
			opacity: 0;
			transition-delay: 2s;
		}
    }
}

.header {
	padding: 16px 20px;
    background-color: @green;
    color: @black;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
	transition:  color .3s ease, opacity .3s ease;

    .container {
        height: 100%;
    }

	.mobile-menu-open {
		background-color: transparent;

	}

    &__inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }

    &__logo-link {
        .header__logo-img {
        	height: 40px;
        	width: 164px;

            @media (max-width: @breakpoint-M) {
				height: 30px;
        		width: 123px;
			}
        }
    }

    &__list {
        display: flex;
        height: 100%;
        align-items: center;
        gap: 32px;

        @media (max-width: @breakpoint-M){
            display: none;
        }

        li {
			font-weight: 400;
			font-size: 18px;
			line-height: 130%;
            color: @white;
        }
    }

	&__phone-mobile {
		display: none;

		@media(max-width: @breakpoint-M){
			display: flex;
		}
	}

    &__right {
		.header__contacts {
			display: flex;
			gap: 16px;

			.contact-btn {
				@media (max-width: @breakpoint-M) {
					display: none;
				}
			}
		}
		.header__burger-btn {
			height: 48px;
			width: 48px;
			position: relative;
			z-index: 9;
			display: none;

			@media (max-width: @breakpoint-M){
				display: flex;
			}

			&.active {
				background-color: transparent;

				span {
					opacity: 0;
				}

				&::after {
					background-color: @white;
					top: 50%;
					left: 50%;
					left: ~"calc(50% - 10px)";
					transform: rotate(-45deg);

					@media (max-width: 1200px) {
						transform:  rotate(-45deg);
					}
				}
				&::before {
					top: ~"calc(50% - 1px)";
					left: ~"calc(50% + 0px)";
					background-color: @white;
					transform: translate(-50%, 50%) rotate(45deg);

					@media (max-width: 1200px) {
						transform: translate(-50%, 50%) rotate(45deg);
					}
				}
			}

			&:after {
				content: '';
				position: absolute;
				width: 20px;
				height: 2px;
				left: 50%;
				transform: translateX(-50%);
				background-color: @white;
				bottom: 19px;
				transition: transform .2s ease, background-color .3s ease;
			}

			&:before {
				content: '';
				position: absolute;
				top: 12px;
				top: 19px;
				transform: translate(-50% , -50%);
				left: 50%;
				transform: translateX(-50%);
				width: 20px;
				height: 2px;
				background-color: @white;
				transition: transform .2s ease, background-color .3s ease;
			}
		}
        
    }

}

.hero {
	background-color: @green;

	&__top {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 64px;
		padding-top: 80px;

		@media (max-width: @breakpoint-S) {
	        padding: 30px 16px 0 16px;
	        margin-bottom: 30px;
	    }

		.hero__title {
			margin-bottom: 32px;

			.hero__title-common-words {
				display: inline;
			}

			.hero__word-slider {
				position: relative;
				top: 10px;
				display: inline-block;
				overflow: hidden;
				height: 80px;

				@media (max-width: 1194px) {
					top: 0;
				}
				@media (max-width: @breakpoint-M) {
					top: 7px;
					height: 40px;
				}

				.swiper {
					height: 100%;

					.swiper-slide {
						overflow: hidden;
						display: flex;
						align-items: flex-end;
						justify-content: left;

					}
				}
			}
		}

		.hero__description {
			margin-bottom: 48px;
			display: block;

			span {
				font-weight: 500;
			}
		}

		.hero__button{
			position: relative;
			height: 80px;
			font-size: 24px;

			@media (max-width: @breakpoint-M) {
				height: 60px;
				font-size: 18px;
			}

			span{
				padding: 0 12px;
				position: absolute;
				top: -16px;
				right: -11px;
				height: 35px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100px;
				transform: rotate(2.72deg);
				background-color: #fff;
				color: #00000080;
				box-shadow: -2px 2px 4px 0px #0000001F;
				font-weight: 400;
				font-size: 15px;
				line-height: 130%;
				letter-spacing: 0%;

				b{
					color: #000000E5;
				}
			}
		}
	}

	&__slider {
		max-width: 100%;
		overflow: hidden;
		margin-bottom: 120px;

		.hero__slides-wrap {
			display: flex;
			gap: 100px;
			position: relative;

			.list {
				display: flex;
				gap: 100px;
				position: relative;
			}
		}

		.swiper {
			.swiper-slide {
				width: fit-content;

				img {
					height: 100px;
					
				}
			}
		}
	}

	.hero__card {
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.hero__card-img {
			border-radius: 32px;
			max-width: 1200px;
			width: 100%;
    		height: 676px;
    		max-height: 1080px;

    		@media (max-width: @breakpoint-L) {
				max-width: 852px;
				height: 480px;
			}
			@media (max-width: @breakpoint-M) {
				border-radius: 12px;
				height: 360px;
			}
			@media (max-width: @breakpoint-S) {
				height: 290px;
			}
			@media (max-width: @breakpoint-XS) {
				height: 220px;
			}
			@media (max-width: @breakpoint-XXS) {
				height: 186px;
			}
		}
	}
}

.portfolio {
	padding: 120px 0 80px 0;
	background-color: @black;
	overflow: hidden;

	@media (max-width: @breakpoint-M) {
		padding: 70px 0 50px 0;
	}

	&__cards {
		display: flex;
		flex-direction: column;
		gap: 60px;

		.card {
			padding: 64px;
			width: 100%;
			height: 650px;
			background-color: inherit;
			border-radius: 32px;
			display: grid;
			grid-template-columns: 650px 1fr;
			gap: 64px;

			@media (max-width: @breakpoint-L) {
				padding: 48px;
				height: 550px;
			}
			@media (max-width: @breakpoint-M) {
				padding: 20px 16px;
				grid-template-columns: 1fr;
			}

			&__left {
				display: flex;
				flex-direction: column;
				gap: 50px;

				@media (max-width: @breakpoint-L) {
					gap: 32px;
				}
				@media (max-width: @breakpoint-M) {
					gap: 24px;
					width: 100%;
				}
			}
			&__right {
				display: flex;
    			align-items: flex-end;

				@media (max-width: @breakpoint-L) {
					display: none;
				}
			}
			&__logo {
				max-width: 100%;
				width: fit-content;
			}
			&__title {
				font-size: 76px;
				font-weight: 500;
				line-height: 105%;
				color: inherit;
				position: relative;
				margin-bottom: 60px;

				@media (max-width: @breakpoint-M) {
					font-size: 38px;
					margin-bottom: 34px;
				}

				.card__title-subtext {
					position: absolute;
					bottom: -50px;
					padding: 0px 32px;
					height: 60px;
					background-color: @black;
					font-size: 24px;
					line-height: 130%;
					text-align: center;
					border-radius: 100px;
					display: flex;
					align-items: center;
					justify-content: center;

					@media (max-width: @breakpoint-M) {
						font-size: 17px;
						height: 40px;
						bottom: -30px;
						padding: 0px 16px;
					}
				}
			}
			&__list {
				display: flex;
				grid-template-columns: repeat(3, 1fr);
				gap: 32px;

				@media (max-width: @breakpoint-M) {
					gap: 24px;
					display: grid;
					width: 100%;
					grid-template-columns: repeat(3, 1fr);
				}
				@media (max-width: @breakpoint-XS) {
					grid-template-columns: 1fr;
				}

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

				.item {
					&__title {
						color: inherit;
						font-weight: 500;
						font-size: 24px;
						line-height: 130%;
						margin-bottom: 8px;

						@media (max-width: @breakpoint-M) {
							font-size: 17px;
							margin-bottom: 4px;
						}
					}
					&__text {
						color: inherit;
						font-size: 18px;
						font-weight: 400;
						line-height: 130%;

						@media (max-width: @breakpoint-M) {
							font-size: 15px;
						}
					}
				}
			}
			&__link {
				background-color: rgba(252, 248, 245, 0.15);
				color: @white;
				width: fit-content;

				@media (max-width: @breakpoint-M) {
					box-sizing: border-box;
				}
				@media (max-width: @breakpoint-S) {
					width: 100%;
				}
			}
			.comment {
				display: flex;
				flex-direction: column;
				align-items: end;
				
				&__text {
					border-radius: 16px;
					padding: 16px;
					background-color: rgba(252, 248, 245, 0.15);
					font-weight: 400;
					font-size: 18px;
					line-height: 130%;
					margin-bottom: 32px;
					font-family: @second-font;
				}

				&__avatar {
					width: 250px;
					height: 250px;
					object-fit: cover;
				}
			}
		}

		.swiper-slide {
			&:nth-child(1){
				.card {
					background-color: #F14E3D;
					color: @white;
	
					.card__title {
						.card__title-subtext {
							transform: rotate(2deg);
						}
					}

					.card__list {
						.item:nth-child(1) {
							width: 215px;

							@media (max-width: @breakpoint-M) {
								width: auto;
							}
						}
						.item:nth-child(2) {
							width: 164px;

							@media (max-width: @breakpoint-M) {
								width: auto;
							}
						}
						.item:nth-child(3) {
							width: 207px;

							@media (max-width: @breakpoint-M) {
								width: auto;
							}
						}
					}
				}
			}

			&:nth-child(2){
				.card {
					background-color: #2B2F33;

					.card__title {
						width: fit-content;

						.card__title-subtext {
							transform: rotate(-2deg);
							right: 0;
							background-color: #ed3b49;
						}
					}
				}
			}

			&:nth-child(3){
				.card {
					background-color: #FCF8F5;
					color: @black;

					&__title {
						margin-bottom: 0;
					}

					&__link {
						background-color:  rgba(0, 150, 87, 0.1);
						color: #009657;
					}

					.comment {
						&__text {
							background-color: rgba(26, 26, 24, 0.07);
						}
					}
				}
			}

			&:nth-child(4){
				.card {
					background-color: #004471;

					.card__title {
						.card__title-subtext {
							transform: rotate(2deg);
							background-color: #d74643;
						}
					}

					&__link {
						background-color:  rgba(252, 248, 245, 0.15);
						color: @white;
					}
				}
			}

			&:nth-child(5){
				.card {
					color: @black;
					background-color: #FCF8F5;
					background-image: url(images/wave_bg_half_transparent.png);
					background-repeat: repeat;

					.card__title {
						.card__title-subtext {
							transform: rotate(-2deg);
							background-color: #5b83c3;
							color: @white;
						}
					}
					&__link {
						background-color:  rgba(0, 150, 87, 0.1);
						color: #009657;
					}
					.comment {
						&__text {
							background-color: rgba(26, 26, 24, 0.07);
						}
					}
				}
			}

			&:nth-child(6){
				.card {
					background-color: @white;
					color: @black;
	
					&__title {
						margin-bottom: 0;
					}
					&__link {
						background-color:  rgba(0, 150, 87, 0.1);
						color: #009657;
					}
					.comment {
						&__text {
							background-color: rgba(26, 26, 24, 0.07);
						}
					}
				}
			}

			&:nth-child(7){
				.card {
					background-color: #F14E3D;
					background-image: url(images/japanautovl-bg.webp);
					background-repeat: no-repeat;
					background-size: cover;
					color: @white;
	
					&__title {
						margin-bottom: 0;
					}
				}
			}
			
		}

		&.mobile {
			.card {
				height: auto;
			}
		}
	}

	.swiper-wrap {
		position: relative;

		.swiper {
			overflow: visible;
		}

		.controls {
			position: absolute;
			top: 50%;
			height: 1px;
			display: none;
			justify-content: space-between;
			left: -15px;
    		width: calc(100% + 30px);
	
			.swiper-button-prev,
			.swiper-button-next {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background-color: @white;
				transition: background-color .3s ease, opacity .3s ease;
				opacity: 1;
				left: auto;
				top: auto;
	
				&.swiper-button-disabled {
					visibility: hidden;
				}
	
				svg {
					width: auto;
					height: auto;

					path {
						transition: fill .3s ease;
					}
				}
				&::after {
					display: none;
				}
			}
		}

		.yandex_button{
			margin-top: 64px;
			height: 80px;
			justify-self: center;
			gap: 8px;
			font-size: 24px;
			color: @text-black;

			@media (max-width: @breakpoint-M) {
				margin-top: 32px;
		        height: 60px;
		        font-size: 18px;
			}
			@media (max-width: @breakpoint-XS) {
			    width: 100%;
			}
		}

		&.mobile {
			.controls {
				display: flex;
			}
		}
	}
}

.mobile {
	.portfolio {
		&__cards {
			display: flex;
			flex-direction: row;
			gap: 0;
			max-height: 100%;

			.card {
				min-height: 0;
				width: auto;
			}
		}
	}
}

.tools {
	padding: 120px 0 80px 0;
	background-color: @white;

	@media (max-width: @breakpoint-M) {
		padding: 70px 0 50px 0;
	}

	&__title {
		color: @black;
	}

	&__list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;

		@media (max-width: 1024px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (max-width: @breakpoint-M) {
			grid-template-columns: repeat(3, 1fr);	
			gap: 24px;
		}
		@media (max-width: @breakpoint-S) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (max-width: @breakpoint-XS) {
			grid-template-columns: 1fr;
		}

		.item {
			border-radius: 24px;
			padding: 32px 24px;
			background-color: rgba(255, 255, 255, 0.6);

			@media (max-width: @breakpoint-M) {
				border-radius: 12px;
				padding: 20px 16px;
			}
			@media (max-width: @breakpoint-S) {
				display: flex;		
			}

			&__icon {
				width: 48px;
				height: 48px;
				margin-bottom: 40px;

				@media (max-width: @breakpoint-M) {
					margin-bottom: 20px;
					min-width: 32px;
					width: 32px;
					height: 32px;
				}
				@media (max-width: @breakpoint-S) {
					margin-bottom: 0;
					margin-right: 20px;
				}

				svg {
					width: 100%;
					height: 100%;
				}
			}
			&__title {
				font-weight: 500;
				font-size: 24px;
				line-height: 130%;
				color: @black;

				@media (max-width: @breakpoint-M) {
					font-size: 17px;
				}
			}
		}
	}
}

.risks{
	padding: 80px 0 120px 0;
	background-color: @white;

	@media (max-width: @breakpoint-M) {
		padding: 50px 0 70px 0;
	}

	.container{
		@media (max-width: @breakpoint-XS) {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	&__title_area{
		margin-bottom: 32px;
		padding-bottom: 48px;

		@media (max-width: @breakpoint-M) {
			margin-bottom: 24px;
			padding-bottom: 24px;
		}
	}

	&__title{
		margin-bottom: 32px;
		text-align: center;
		color: @black;

		@media (max-width: @breakpoint-M) {
			margin-bottom: 12px;
		}
	}

	&__descripton{
		max-width: 800px;
		justify-self: center;
		text-align: center;
		font-size: 24px;
		color: @black;

		@media (max-width: @breakpoint-M) {
			font-size: 17px;
		}
	}

	&__list{
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		@media (max-width: @breakpoint-XS) {
			grid-template-columns: 1fr;
			gap: 24px;
		}

		.item{
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 16px;

			@media (max-width: @breakpoint-L) {
				flex-direction: column;
			}
			@media (max-width: @breakpoint-XS) {
				flex-direction: row;
				justify-content: start;
			}

			&__icon{
				height: 48px;
				width: 48px;

				@media (max-width: @breakpoint-M) {
					height: 32px;
					width: 32px;
				}

				svg{
					height: 100%;
					width: 100%;
				}
			}

			&__title{
				color: @black;
				font-size: 24px;
				font-weight: 500;

				@media (max-width: @breakpoint-M) {
					font-size: 17px;
				}
			}
		}
	}
}

.two-col-benefits {
	padding: 80px 0;
	background-color: @black;

	@media (max-width: @breakpoint-M) {
		padding: 50px 0;
	}

	&__list {
		display: grid;
		grid-template-columns: repeat(2 , 1fr);
		gap: 32px;

		@media (max-width: @breakpoint-XS) {
			grid-template-columns:1fr;	
		}

		.item {
			border-radius: 24px;
			padding: 32px 24px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 20px;
			min-height: 320px;

			@media (max-width: @breakpoint-M) {
				padding: 20px 16px;
				gap: 32px;
				min-height: 0;
			}

			&__icon {
				width: 48px;
				height: 48px;

				@media (max-width: @breakpoint-M) {
					width: 32px;
					height: 32px;
				}

				svg {
					width: 100%;
					height: 100%;
				}
			}
			&__title {
				font-weight: 500;
				font-size: 24px;
				line-height: 130%;
				color: @black;
				margin-bottom: 4px;

				@media (max-width: @breakpoint-M) {
					font-size: 17px;
				}
			}	
			&__descr {
				font-weight: 400;
				font-size: 18px;
				line-height: 130%;
				color: @black;
				margin-bottom: 16px;

				@media (max-width: @breakpoint-M) {
					font-size: 15px;
				}
			}

			&__button {
				@media (max-width: @breakpoint-M) {
					width: 100%;
				}
			}

			&:nth-child(1) {
				background-color: #dfaecc;
			}
			&:nth-child(2) {
				background-color: #ccdf69;
			}
			&:nth-child(3) {
				background-color: #ebb83e;
			}
			&:nth-child(4) {
				background-color: @white;

				.item__button {
					background-color: @green;
					color: @white;
				}
			}
		}
	}
}

.quote {
	&__text {
		font-weight: 500;
		font-size: 56px;
		line-height: 105%;
		text-align: center;
		margin-bottom: 32px;

		@media (max-width: @breakpoint-M) {
			font-size: 32px;
		}
	}

	.author-block {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24px;

		&__avatar {
			border-radius: 50%;
			width: 120px;
			height: 120px;

			@media (max-width: @breakpoint-M) {
				width: 80px;
				height: 80px;
			}
		}

		&__name {
			font-weight: 500;
			font-size: 32px;
			line-height: 130%;
			color: @white;

			@media (max-width: @breakpoint-M) {
				font-size: 24px;
			}
		}
		&__post {
			font-weight: 400;
			font-size: 24px;
			line-height: 130%;
			color: rgba(252, 248, 245, 0.4);

			@media (max-width: @breakpoint-M) {
				font-size: 17px;
			}
		}
	}
}

.accordion-benefits {
	padding: 120px 0 80px 0;
	background-color: @green;

	@media (max-width: @breakpoint-M) {
		padding: 70px 0 50px 0;
	}

	&__accordion-container {
		@media (max-width: @breakpoint-S) {
			padding: 0;
		}
	}

	&__content {
		display: grid;
		grid-template-columns: 1fr 354px;
		gap: 32px;
		background-color: rgba(252, 248, 245, 0.07);
		border-radius: 32px;
		padding: 8px 32px ;

		@media (max-width: @breakpoint-L) {
			grid-template-columns: 1fr 300px;
		}
		@media (max-width: 1024px) {
			grid-template-columns: 1fr 224px;
		}
		@media (max-width: @breakpoint-M) {
			padding: 0px 20px;
			border-radius: 16px;
		}
		@media (max-width: @breakpoint-S) {
			padding: 0px 16px;
			grid-template-columns: 1fr;
			border-radius: 0px;
		}
		@media (max-width: @breakpoint-XS) {
			
		}

		.accordions {
			.accordion-item {
				&.collapsed {
					.accordion-item__header {
						color: @white;
						border-color: rgba(252, 248, 245, 0.15);
						padding-bottom: 24px;

						.arrow {
							transform: rotate(0);
							background-image: url(/images/icons/arrow.png);
						}
					}
					.accordion-item__body {
						height: 0;
						padding-bottom: 0;

						p{
							margin: 0;
						}
					}
				}

				&__header {
					display: flex;
					justify-content: space-between;
					gap: 24px;
					width: 100%;
					text-align: left;
					background-color: transparent;
					cursor: pointer;
					font-weight: 500;
					font-size: 24px;
					line-height: 130%;
					padding: 24px 0px;
					padding-bottom: 8px;
					border-top: 1px solid transparent ;
					color: #f5e69b;
					transition: color 0.3s ease, border-color .3s ease, padding .3s ease;

					@media (max-width: @breakpoint-M) {
						font-size: 17px;
						padding: 20px 0px;
					}

					.arrow {
						width: 32px;
						min-width: 32px;
						height: 32px;
						background-image: url(/images/icons/arrow-active.png);
						background-size: cover;
						transform: rotateX(180deg);
						transition: background-image .3s ease, transform .3s ease;

						@media (max-width: @breakpoint-M) {
							width: 24px;
							min-width: 24px;
							height: 24px;
						}
					}
				}
				&__body {
					height: 0;
					overflow: hidden;
					padding: 0;
					padding-bottom: 24px;
					max-width: 90%;
					transition: height 0.3s ease;

					@media (max-width: @breakpoint-S) {
						background-image: var(--bg-img);
						background-repeat: no-repeat;
						background-position: center ~"calc(100% + 266px)";
						background-size: 224px;
						padding-bottom: 209px;
						max-width: 100%;
					}
					@media (max-width: @breakpoint-XXS) {
						padding-bottom: 250px;
						background-position: center ~"calc(100% + 228px)";
					}
		
					p + button {
						margin-top: 32px;

					}
					button {
						@media (max-width: @breakpoint-S) {
							width: 100%;
						}
					}
					
				}

				&:nth-child(1) {
					.accordion-item__header {
						border-top: none;
					}
				}
			}
		}
		

		.accordion-benefits__left {
			display: flex;
			justify-content: flex-end;
			position: relative;
			padding: 24px 0;
			@media (max-width: @breakpoint-S) {
				display: none;
			}
			.images-container {
				position: sticky;
				top: 120px;
				width: 300px;
				height: 606px;
				max-height: 100%;
				@media (max-width: 1024px) {
					width: 224px;
				}
				img {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					height: auto;
					max-width: 100%;
					opacity: 0;
					transition: opacity .3s ease;

					&.active {
						opacity: 1;
					}
				}
			}
		}
	}
}

.quiz.section{
	padding: 80px 0 120px 0;
	background-color: @green;

	@media (max-width: @breakpoint-M) {
		padding: 50px 0 70px 0;
	}

    .container{
        .quiz-block {
        	padding: 40px 32px;
        	height: 686px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
        	border-radius: 32px;
        	background-color: @white;

        	@media (max-width: @breakpoint-S) {
				padding: 40px 20px;
			}
			@media (max-width: @breakpoint-XS) {
				padding: 32px 20px;
			}
        	@media (max-width: @breakpoint-XXS) {
				height: 750px;
			}
			
        	&__progress-bar{
        		padding: 12px 0;

        		.progress-bar{
				    width: 100%;
				    height: 8px;
				    background-color: #fff;
				    position: relative;
				    overflow: hidden;
				    border-radius: 100px;

				    &__fill{
				        height: 100%;
				        width: 0%;
				        border-radius: 100px;
				        background-color: @black;
				        transition: width 0.4s ease;
				    }
				}
        	}

            &__slider {
                position: relative;

                .slider__top{
                	margin-bottom: 32px;
                	color: @black;

                	@media (max-width: @breakpoint-M) {
	                	margin-bottom: 24px;
					}

					&:has(.result){
						margin: 0;
					}

                	.top__title{
		                font-size: 32px;
		                font-weight: 500;
		                line-height: 130%;

		                @media (max-width: @breakpoint-M) {
							font-size: 24px;
						}

						&.result{
							text-align: center;
							font-size: 56px;
							font-weight: 700;
							line-height: 105%;

							@media (max-width: @breakpoint-M) {
								font-size: 32px;
							}
						}
                	}

                	.top__desc{
                		margin-top: 12px;
                		font-size: 24px;

                		@media (max-width: @breakpoint-M) {
							font-size: 17px;
						}
						@media (max-width: @breakpoint-XS) {
							font-size: 15px;
						}

						&.result{
							margin-top: 24px;
							text-align: center;
						}
                	}
                }

                .slide {
                    .styles-list {
                        display: grid;
                        grid-template-columns: 1fr;
                        gap: 10px;

                        &__item {
                        	padding: 16px;
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            border-radius: 8px;
                            background-color: #fff;
                            cursor: pointer;

                            &-title{
                            	color: @black;

                            	@media (max-width: @breakpoint-M) {
									font-size: 17px;
								}
								@media (max-width: @breakpoint-XS) {
									font-size: 15px;
								}
                            }

                            .check{
                                width: 24px;
                                height: 24px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-color: #0000001A;
                                flex-shrink: 0;

                                &:before {
                                    opacity: 0;
                                }
                                
                                &-radio{
                                	border-radius: 50%;

                                	&:before {
                                		content: '';
                                        height: 10px;
                                        width: 10px;
                                        background-color: #fff;
                                        border-radius: 50%;
                                    }
                                }

                                &-box{
                                	position: relative;
                                	border-radius: 6px;

                                	&:before {
                                        content: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.19247 7.71217C4.72149 7.71311 5.22936 7.50451 5.605 7.132L11.399 1.425L9.995 0L4.186 5.701L1.393 2.994L0 4.431L2.782 7.127C3.15632 7.50084 3.66344 7.71123 4.19247 7.71217Z' fill='%23FCF8F5'/%3E%3C/svg%3E%0A");
                                    	position: absolute;
                                    	top: -1px;
                                    }
                                }
                            }

                            &:hover {
                                .check{
                                    &:before {
                                        opacity: 0.2;
                                    }
                                }  
                            }

                            &.active {
                                .check{
                                	background-color: #009657;
                                    
                                    &:before {
                                        opacity: 1;
                                    }
                                }
                            }

                            &.input-item{
                            	margin-top: 6px;
                            	width: 100%;
                            	border: none;
                            	cursor: auto;
                            }
                        }

                        .input-box{
                        	label{
                        		padding-left: 16px;
                        		color: @black;
                        		font-size: 15px;
                        		font-weight: 500;
                        	}
                        }

                        &.input-list{
                        	grid-template-columns: 1fr 1fr;
                        	gap: 16px;

                        	@media (max-width: @breakpoint-XS) {
								grid-template-columns: 1fr;
								gap: 24px;
							}
                        }
                    }
                }
            }

            .btns-wrap {
                display: flex;
                gap: 20px;
                justify-content: space-between;

                &:has(.button-result){
                	justify-content: center;
                }

                .button{
                	padding: 0 32px;
                	height: 60px;
                	font-size: 18px;
                	font-weight: 500;

                	&:disabled{
                		opacity: 0.5;
                		cursor: no-drop;
                	}
                }
            }
        }
    }
}

.motivator {
	background-color: @black;

	&.white {
		background-color: @white;

		.motivator__title {
			color: @black;
		}
		.motivator__description {
			color: @black;
		}
		.motivator__button {
			color: @white;
		}
	}

	&.type_1{
		padding: 120px 0;

		@media (max-width: @breakpoint-M) {
			padding: 70px 0;
		}
	}

	&.type_2{
		padding: 80px 0 120px 0;
		
		@media (max-width: @breakpoint-M) {
			padding: 50px 0 70px 0;
		}
	}

	&.type_3{
		padding: 80px 0;
		
		@media (max-width: @breakpoint-M) {
			padding: 50px;
		}
	}
	
	&__content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	&__title {
		font-weight: 500;
		font-size: 76px;
		line-height: 105%;
		text-align: center;
		color: @light-green;
		margin-bottom: 32px;

		@media (max-width: @breakpoint-M) {
			font-size: 38px;
			margin-bottom: 16px;
		}
	}
	&__description {
		font-weight: 400;
		font-size: 24px;
		line-height: 130%;
		text-align: center;
		color: @white;
		margin-bottom: 48px;

		@media (max-width: @breakpoint-M) {
			font-size: 17px;
			margin-bottom: 32px;
		}

		span {
			font-weight: 500;
		}
	}
	&__button {
		height: 80px;
		font-size: 24px;

		@media (max-width: @breakpoint-M) {
			height: 60px;
			font-size: 18px;
		}
		@media (max-width: @breakpoint-S) {
			width: 100%;
		}
	}
}

.bitrix {
	padding: 120px 0;
	background-color: @white;

	@media (max-width: @breakpoint-M) {
		padding: 70px 0;
	}

	&__content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.bitrix__logo {
			width: 100%;
			max-width: 100%;
			height: 234px;

			@media (max-width: @breakpoint-L) {
				height: auto;
			}
			@media (max-width: @breakpoint-M) {
				width: 320px;
				height: 63px;
				margin-bottom: 16px;
			}
		}

		.bitrix__description {
			font-weight: 500;
			font-size: 32px;
			line-height: 130%;
			color: @black;
			padding-left: 25%;
			align-self: flex-start;

			@media (max-width: @breakpoint-M) {
				text-align: center;
				padding-left: 0;
				font-size: 24px;
			}

			a {
				text-decoration: underline;
				text-decoration-skip-ink: none;
				color: @green;
			}
		}
	}
}

.history {
	.history__stages {
		.stage {
			display: flex;
			flex-direction: column;
			align-items: center;

			&:not(:last-child) {
				margin-bottom: 80px;

				@media (max-width: @breakpoint-M) {
					margin-bottom: 50px;
				}
			}

			&__year {
				border: 2px solid @black;
				border-radius: 100px;
				padding: 10px 24px ;
				font-weight: 500;
				font-size: 18px;
				line-height: 130%;
				text-align: center;
				margin-bottom: 32px;

				@media (max-width: @breakpoint-M) {
					font-size: 15px;
				}
			}
			&__img {
				border-radius: 24px;
				width: 100%;
				max-width: 100%;
				object-fit: cover;

				@media (max-width: @breakpoint-M) {
					border-radius: 12px;
				}
				&:first-child {
					height: 537px;
					@media (max-width: 1279px) {
						height: 439px;
					}

				}
			}
			&__text {
				font-weight: 400;
				font-size: 24px;
				line-height: 130%;
				@media (max-width: @breakpoint-M) {
					font-size: 17px;
				}

				p {
					&:not(:last-child) {
						margin-bottom: 16px;
						@media (max-width: @breakpoint-M) {
							margin-bottom: 8px;
						}
					}
				}
				ul {
					display: flex;
					flex-direction: column;
					gap: 12px;
					&:not(:last-child) {
						margin-bottom: 32px;
						@media (max-width: @breakpoint-M) {
							margin-bottom: 16px;
						}
					}
					li {
						padding-left: 20px;
						position: relative;
						&::before {
							content: '';
							width: 8px;
							height: 8px;
							border-radius: 50%;
							top: 13px;
							position: absolute;
							background-color: @green;
							left: 0;
							@media (max-width: @breakpoint-M) {
								top: 10px;
							}
						}
					}
				}
			}
			&__big-text {
				font-weight: 500;
				font-size: 42px;
				line-height: 130%;
				text-align: center;
				margin-bottom: 32px;
				@media (max-width: @breakpoint-M) {
					font-size: 28px;
				}
			}
			&__content {
				line-height: 100%;
			}

			&_1 {
				.stage__content {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 32px;
					@media (max-width: @breakpoint-M) {
						gap: 16px;
					}
					@media (max-width: @breakpoint-S) {
						grid-template-columns: 1fr;
					}
					.stage__img {
						@media (max-width: @breakpoint-M) {
							height: 393px;
						}
						@media (max-width: @breakpoint-S) {
							height: 325px;
						}
						@media (max-width: @breakpoint-XS) {
							height: 239px;
						}
					}
				}
			}
			&_2 {
				max-width: 1000px;
				margin: 0 auto;
				.stage__content {
					display: flex;
					flex-direction: column;
					gap: 32px;
					@media (max-width: @breakpoint-M) {
						gap: 16px;
					}
				}
			}
			&_3 {
				max-width: 1000px;
				margin: 0 auto;
				.stage__year {
					border-color: @white;
				}
			}
		}
	}

	&__top {
		background-color: @white;
		color: @black;
		padding: 80px 0 120px 0;

		@media (max-width: @breakpoint-M) {
			padding: 50px 0 70px 0;
		}

		.history__top-quote {
			padding: 0;
			color: @black;
			margin-bottom: 80px;

			@media (max-width: @breakpoint-M) {
				margin-bottom: 50px;
			}
		}
	}

	&__bottom {
		background-color: @black;
		padding: 120px 0 80px 0;

		@media (max-width: @breakpoint-M) {
			padding: 70px 0 50px 0;
		}
	}

}

.scroll-quote {
	padding: 0;
	height: 100vh;
	min-height: 500px;
	display: flex;
	align-items: center;

	@media (max-width: @breakpoint-M) {
		min-height: 450px;
	}

	.quote__text {
	    text-align: center;
	}
	.karaoke {
		background: linear-gradient(to right, rgba(252,248,245,.1) 50%, #FCF8F5 50%) 0 0 / 200% 100%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		box-decoration-break: slice;
		-webkit-box-decoration-break: slice;
	}
}

.steps{
	padding: 80px 0 120px 0;
	background-color: @white;

	@media (max-width: @breakpoint-M) {
		padding: 70px 0;
	}

	.container{
		display: flex;
		justify-content: space-between;
		position: relative;
		font-size: 24px;
		font-weight: 400;
		line-height: 130%;
		color: @text-black;

		@media (max-width: @breakpoint-M) {
			flex-direction: column;
			font-size: 17px;
		}
	}

	&__text{
		position: sticky;
		top: 120px;
		max-width: 537px;
		height: fit-content;
		max-height: 100%;

		@media (max-width: @breakpoint-L) {
			max-width: 460px;
		}
		@media (max-width: @breakpoint-M) {
			margin-bottom: 16px;
			padding-bottom: 24px;
			position: static;
			max-width: none;
			text-align: center;
		}
	}

	&__title{
		margin-bottom: 24px;
		text-align: left;
		font-size: 56px;
		font-weight: 700;
		line-height: 105%;
		color: @text-black;

		@media (max-width: @breakpoint-L) {
			font-size: 42px;
			line-height: 130%;
		}
		@media (max-width: @breakpoint-M) {
			margin-bottom: 12px;
			text-align: center;
			font-size: 32px;
			line-height: 105%;
		}
	}

	&__content{
		padding-left: 32px;
		max-width: 563px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 48px;
		position: relative;

		@media (max-width: @breakpoint-L) {
			max-width: 460px;
		}
		@media (max-width: @breakpoint-M) {
			max-width: none;
		}
		@media (max-width: @breakpoint-S) {
			gap: 32px;
		}

  		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 8px;
			height: 100%;
			background: #fff;
			border-radius: 100px;
		}
	}

	&__progress {
		position: absolute;
		left: 0;
		top: 0;
		width: 8px;
		height: 0%;
		background: #000;
		border-radius: 100px;
	}

	&__step{
		opacity: 0.6;
  		transition: opacity 0.3s ease;

		&_title{
			margin-bottom: 10px;
			font-size: 24px;
			font-weight: 500;
		}

		&_desc{
			color: #000;
		}
	}
}

.advantages {
	padding: 120px 0 80px 0;
	background-color: @green;

	@media (max-width: @breakpoint-M) {
		padding: 70px 0 50px 0;
	}

	&__columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;

		@media (max-width: @breakpoint-M) {
			grid-template-columns: 1fr;
			gap: 24px;
		}

		.column {
			border-radius: 32px;
			padding: 32px;

			@media (max-width: @breakpoint-M) {
				border-radius: 12px;
				padding: 20px;
			}

			&__title {
				font-weight: 500;
				font-size: 32px;
				line-height: 130%;
				text-align: center;
				margin-bottom: 32px;

				@media (max-width: @breakpoint-M) {
					font-size: 28px;
					margin-bottom: 20px;
				}
			}

			&__list {
				display: flex;
				flex-direction: column;
				gap: 16px;
				margin-bottom: 32px;

				@media (max-width: @breakpoint-M) {
					margin-bottom: 20px;
				}

				.item {
					display: flex;
					gap: 16px;
					border-radius: 24px;
					padding: 16px;
					background-color:  rgba(0, 150, 87, 0.1);

					@media (max-width: @breakpoint-M) {
						border-radius: 12px;
						padding: 12px;
					}

					&__icon {
						min-width: 32px;
						width: 32px;
						height: 32px;
						background-repeat: no-repeat;
						background-size: contain;
						background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.9998 29.3332H6.99984C5.32078 29.3311 3.7111 28.6631 2.52383 27.4758C1.33656 26.2886 0.668621 24.6789 0.666504 22.9998V6.99984C0.668621 5.32078 1.33656 3.7111 2.52383 2.52383C3.7111 1.33656 5.32078 0.668621 6.99984 0.666504H22.9998C24.6789 0.668621 26.2886 1.33656 27.4758 2.52383C28.6631 3.7111 29.3311 5.32078 29.3332 6.99984V22.9998C29.3311 24.6789 28.6631 26.2886 27.4758 27.4758C26.2886 28.6631 24.6789 29.3311 22.9998 29.3332Z' fill='%233DC074' /%3E%3Cpath d='M15 22.6663C14.7348 22.6663 14.4804 22.561 14.2929 22.3734C14.1054 22.1859 14 21.9316 14 21.6663V8.33301C14 8.06779 14.1054 7.81344 14.2929 7.6259C14.4804 7.43836 14.7348 7.33301 15 7.33301C15.2652 7.33301 15.5196 7.43836 15.7071 7.6259C15.8946 7.81344 16 8.06779 16 8.33301V21.6663C16 21.9316 15.8946 22.1859 15.7071 22.3734C15.5196 22.561 15.2652 22.6663 15 22.6663Z' fill='%23FCF8F5' /%3E%3Cpath d='M21.6663 16H8.33301C8.06779 16 7.81344 15.8946 7.6259 15.7071C7.43836 15.5196 7.33301 15.2652 7.33301 15C7.33301 14.7348 7.43836 14.4804 7.6259 14.2929C7.81344 14.1054 8.06779 14 8.33301 14H21.6663C21.9316 14 22.1859 14.1054 22.3734 14.2929C22.561 14.4804 22.6663 14.7348 22.6663 15C22.6663 15.2652 22.561 15.5196 22.3734 15.7071C22.1859 15.8946 21.9316 16 21.6663 16Z' fill='%23FCF8F5' /%3E%3C/svg%3E");
					}
					&__text {
						font-weight: 500;
						font-size: 18px;
						line-height: 130%;

						@media (max-width: @breakpoint-M) {
							font-size: 15px;
						}
					}
				}
			}

			&__button {
				width: 100%;

				@media (max-width: @breakpoint-M) {
					font-size: 18px;
				}
			}

			&.we {
				background-color: @white;
				color: @black;
			}

			&.they {
				background-color:  rgba(252, 248, 245, 0.07);

				.column__list {
					gap: 32px;
					margin-bottom: 0;

					@media (max-width: @breakpoint-M) {
						gap: 20px;
					}

					.item {
						padding: 0;

						&__icon {
							background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.9998 30.3332H7.99984C6.32078 30.3311 4.7111 29.6631 3.52383 28.4758C2.33656 27.2886 1.66862 25.6789 1.6665 23.9998V7.99984C1.66862 6.32078 2.33656 4.7111 3.52383 3.52383C4.7111 2.33656 6.32078 1.66862 7.99984 1.6665H23.9998C25.6789 1.66862 27.2886 2.33656 28.4758 3.52383C29.6631 4.7111 30.3311 6.32078 30.3332 7.99984V23.9998C30.3311 25.6789 29.6631 27.2886 28.4758 28.4758C27.2886 29.6631 25.6789 30.3311 23.9998 30.3332ZM7.99984 3.6665C6.851 3.66792 5.74962 4.12491 4.93727 4.93727C4.12491 5.74962 3.66792 6.851 3.6665 7.99984V23.9998C3.66792 25.1487 4.12491 26.2501 4.93727 27.0624C5.74962 27.8748 6.851 28.3318 7.99984 28.3332H23.9998C25.1487 28.3318 26.2501 27.8748 27.0624 27.0624C27.8748 26.2501 28.3318 25.1487 28.3332 23.9998V7.99984C28.3318 6.851 27.8748 5.74962 27.0624 4.93727C26.2501 4.12491 25.1487 3.66792 23.9998 3.6665H7.99984Z' fill='%23FCF8F5' /%3E%3Cpath d='M22.6663 17H9.33301C9.06779 17 8.81344 16.8946 8.6259 16.7071C8.43836 16.5196 8.33301 16.2652 8.33301 16C8.33301 15.7348 8.43836 15.4804 8.6259 15.2929C8.81344 15.1054 9.06779 15 9.33301 15H22.6663C22.9316 15 23.1859 15.1054 23.3734 15.2929C23.561 15.4804 23.6663 15.7348 23.6663 16C23.6663 16.2652 23.561 16.5196 23.3734 16.7071C23.1859 16.8946 22.9316 17 22.6663 17Z' fill='%23FCF8F5' /%3E%3C/svg%3E");
						}
					}
				}
			}
		}
	}
}

.tariffs {
	background-color: @green;
	padding: 80px 0;
	overflow: hidden;

	@media (max-width: @breakpoint-M) {
		padding: 50px 0;
	}

	.description{
		max-width: 800px;
		justify-self: center;
	}

	&__list-wrap {
		&-container{
			padding: 32px 0;

			@media (max-width: @breakpoint-M) {
				padding: 32px 0 34px 0;
			}
		}
		
		&.swiper{
			overflow: visible;
		}
	}

	&__list {
		.tariff {
			box-sizing: border-box;
			width: 379px;
			border-radius: 24px;
			color: @white;
			border: 1px solid #FFFFFF99;
			background-color: #FCF8F512;

			@media (max-width: @breakpoint-M) {
				width: 320px;
			}
			
			&:nth-child(3) {
				background-color: @white;
				position: relative;
				color: @black;

				.tariff__name {
					background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.4) 27.45%, rgba(0, 0, 0, 0.1) 91.5%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.tariff__price {
					color: inherit;
				}

				.tariff__button{
					background-color: @text-black;
					color: @white;
				}

				.tariff__divider{
					background-color: #1A1A1812;
				}

				.tariff__conditions {
					span {
						color: @green;
						background-color: rgba(0, 150, 87, 0.1);
					}
				}
				.tariff__list {
					.tariff__list-item {
						.icon {
							background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_606_3686)'%3E%3Cpath d='M5.81189 15.9969C5.55891 15.997 5.30839 15.9472 5.07468 15.8503C4.84098 15.7534 4.62867 15.6114 4.44994 15.4324L0.332296 11.3163C-0.110765 10.8731 -0.110765 10.1546 0.332296 9.71144C0.775498 9.26838 1.49393 9.26838 1.93713 9.71144L5.81189 13.5862L16.0629 3.33523C16.5061 2.89216 17.2245 2.89216 17.6677 3.33523C18.1108 3.77843 18.1108 4.49686 17.6677 4.94006L7.17385 15.4324C6.99511 15.6114 6.78281 15.7534 6.5491 15.8503C6.31539 15.9472 6.06488 15.997 5.81189 15.9969Z' fill='black' fill-opacity='0.9' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_606_3686'%3E%3Crect width='18' height='18' fill='white' transform='translate(0 0.5)' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
						}
					}
				}
			}

			&__top{
				padding: 32px 24px 16px 24px;
			}

			&__divider{
				width: 100%;
				height: 1px;
				background-color: #FCF8F526;
			}
			
			&__absolut {
				height: 36px;
				display: flex;
				align-items: center;
				position: absolute;
				top: -20px;
				right: 16px;
				border-radius: 100px;
				padding: 0px 16px;
				background: #f14e3d;
				transform: rotate(3deg);
				font-weight: 400;
				font-size: 15px;
				line-height: 100%;
				color: @white;
			}
			&__name {
				margin-bottom: 12px;
				font-weight: 500;
				font-size: 42px;
				line-height: 130%;
				background: -webkit-linear-gradient(270deg, rgba(252, 248, 245, 0.4) 25.63%, rgba(252, 248, 245, 0.1) 85.98%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

				@media (max-width: @breakpoint-M) {
					font-size: 28px;
				}
			}
			&__description {
				margin-bottom: 12px;
				font-weight: 500;
				font-size: 18px;
				line-height: 130%;

				@media (max-width: @breakpoint-M) {
					font-size: 15px;
				}
			}
			&__price {
				margin-bottom: 8px;
				font-weight: 700;
				font-size: 42px;
				line-height: 130%;

				@media (max-width: @breakpoint-M) {
					font-size: 32px;
					line-height: 105%;
				}
			}
			&__conditions {
				display: flex;
				gap: 6px;
				align-items: center;
				font-size: 18px;
				margin-bottom: 24px;

				@media (max-width: @breakpoint-M) {
					font-size: 15px;
				}

				span {
					background-color: rgba(252, 248, 245, 0.15);
					border-radius: 6px;
					padding: 4px 6px;
					font-weight: 500;
				}
			}
			&__button {
				width: stretch;
				height: 60px;
				font-size: 18px;
				font-weight: 500;
			}
			&__list {
				padding: 24px 24px 32px 24px;
				display: flex;
				flex-direction: column;
				gap: 8px;

				.tariff__list-item {
					display: flex;
					gap: 12px;

					.icon {
						width: 18px;
						height: 18px;
						min-width: 18px;
						background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_606_3663)'%3E%3Cpath d='M5.81189 15.9969C5.55891 15.997 5.30839 15.9472 5.07468 15.8503C4.84098 15.7534 4.62867 15.6114 4.44994 15.4324L0.332296 11.3163C-0.110765 10.8731 -0.110765 10.1546 0.332296 9.71144C0.775498 9.26838 1.49393 9.26838 1.93713 9.71144L5.81189 13.5862L16.0629 3.33523C16.5061 2.89216 17.2245 2.89216 17.6677 3.33523C18.1108 3.77843 18.1108 4.49686 17.6677 4.94006L7.17385 15.4324C6.99511 15.6114 6.78281 15.7534 6.5491 15.8503C6.31539 15.9472 6.06488 15.997 5.81189 15.9969Z' fill='%23FCF8F5' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_606_3663'%3E%3Crect width='18' height='18' fill='white' transform='translate(0 0.5)' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
					}
					.text {
						font-weight: 400;
						font-size: 18px;
						line-height: 130%;

						@media (max-width: @breakpoint-M) {
							font-size: 15px;
						}
					}
					&.disabled {
						opacity: .4;

						.icon {
							background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3281 16.5C15.0176 16.5 14.7187 16.377 14.499 16.1572L9 10.6582L3.50098 16.1572C3.04395 16.6143 2.2998 16.6143 1.84277 16.1572C1.38574 15.7002 1.38574 14.9561 1.84277 14.499L7.3418 9L1.84277 3.50098C1.38574 3.04395 1.38574 2.2998 1.84277 1.84277C2.2998 1.38574 3.04395 1.38574 3.50098 1.84277L9 7.3418L14.4961 1.84277C14.9531 1.38574 15.6973 1.38574 16.1543 1.84277C16.6113 2.2998 16.6113 3.04395 16.1543 3.50098L10.6582 9L16.1543 14.4961C16.6143 14.9531 16.6143 15.6943 16.1572 16.1543C15.9404 16.377 15.6416 16.5 15.3281 16.5Z' fill='%23FCF8F5' fill-opacity='0.4'/%3E%3C/svg%3E%0A");
						}
					}
				}
			}
		}
	}

	&__note{
		text-align: center;
		font-size: 18px;
		color: @white;
		font-weight: 400;
		line-height: 130%;

		@media (max-width: @breakpoint-M) {
			font-size: 15px;
		}
	}
}

.callback{
	background-color: @black;
	padding: 80px 0 120px 0;

	@media (max-width: @breakpoint-M) {
		padding: 50px 0 70px 0;
	}

	&__content{
		padding: 64px;
		display: grid;
		grid-template-columns: 388px 600px;
		justify-content: space-between;
		align-items: center;
		border-radius: 32px;
		background-color: @white;

		@media (max-width: @breakpoint-L) {
			padding: 48px;
			grid-template-columns: 388px auto;
			gap: 40px;
		}
		@media (max-width: @breakpoint-M) {
			padding: 20px;
			grid-template-columns: 315px auto;
			gap: 24px;
		}
		@media (max-width: @breakpoint-S) {
			grid-template-columns: 1fr;
		}

		&.success,&.error{
			.callback__form{
				display: none;
			}
		}

		.success, .error{
			display: none;

			padding: 24px;
			height: 100%;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			border-radius: 24px;
			background-color: #009657;

			@media (max-width: @breakpoint-M) {
				padding: 20px;
			}
			@media (max-width: @breakpoint-S) {
				padding: 20px 16px;
			}
		}

		&.success{
			.success{
				display: flex;
			}
		}

		&.error{
			.error{
				display: flex;
			}
		}
	}

	&__text{
		color: @text-black;
	}

	&__title{
		margin-bottom: 25px;
		font-size: 42px;
		font-weight: 700;
		line-height: 105%;

		@media (max-width: @breakpoint-M) {
			margin-bottom: 24px;
			font-size: 28px;
			font-weight: 500;
			line-height: 130%;
		}
	}

	&__desc{
		margin-bottom: 25px;
		font-size: 18px;
		line-height: 130%;

		@media (max-width: @breakpoint-M) {
			margin-bottom: 24px;
			font-size: 15px;
		}
	}

	&__points{
		display: flex;
		flex-direction: column;
		gap: 12px;

		@media (max-width: @breakpoint-M) {
			gap: 8px;
		}

		.point{
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 15px;
			font-weight: 500;
			line-height: 130%;

			&__num{
				height: 28px;
				width: 28px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background-color: #0096571A;
				color: #009657;
			}
		}
	}

	&__form{
		padding: 24px;
		border-radius: 24px;
		background-color: #009657;

		@media (max-width: @breakpoint-M) {
			padding: 20px;
		}
		@media (max-width: @breakpoint-S) {
			padding: 20px 16px;
		}

		&-field{
			display: flex;
			flex-direction: column;

			&:not(:last-of-type){
				margin-bottom: 24px;
			}

			label {
				font-weight: 500;
				font-size: 15px;
				line-height: 130%;
				color: @white;
				margin-bottom: 6px;
				padding-left: 6px;
			}

			.choices {
				&.is-open{
					.choices__inner{
						border-radius: 12px 12px 0 0;
					}
				}
				.choices__inner {
					.choices__list--single {
						.choices__item--selectable {
							color: @white;
						}
					}
					
				}
				.choices__item{
					color: @white;
				}
				.choices__list[aria-expanded] {
					background: rgb(18 157 98);
				}
				.choices__list--dropdown, .choices__list[aria-expanded] {
					top: calc(100%);
				}
			}
		}

		&-input{
			border-radius: 12px;
			padding: 12px 16px;
			width: 100%;
			font-weight: 400;
			font-size: 18px;
			line-height: 130%;
			color: @white;
			background: rgba(252, 248, 245, 0.07);
			border: none;

			@media (max-width: @breakpoint-M) {
				font-size: 15px;
			}

			&::placeholder {
				font-weight: 400;
				font-size: 18px;
				line-height: 130%;
				color: rgba(255, 255, 255, 0.5);

				@media (max-width: @breakpoint-M) {
					font-size: 15px;
				}
			}
		}

		.button{
			margin-top: 32px;
			height: 60px;
			width: 100%;
			font-size: 18px;
			font-weight: 500;
			color: @text-black;

			@media (max-width: @breakpoint-M) {
				height: 48px;
			}
		}

		&-agreement{
			margin: 20px 59px 0 59px;
			text-align: center;
			font-weight: 500;
			font-size: 15px;
			line-height: 130%;
			color: @white;

			@media (max-width: @breakpoint-L) {
				margin: 0;
				margin-top: 20px;
			}

			a {
				font-weight: 500;
				text-decoration: underline;
				text-decoration-skip-ink: none;
				text-underline-offset: 3px;
			}
		}
	}
}

.attraction {
	background-color: @white;
	color: @black;
	padding: 120px 0 80px 0;

	@media (max-width: @breakpoint-M) {
		padding: 70px 0 50px 0;
	}

	&__title {
		color: @black;
	}
	.description {
		color: @black;
	}

	.ic {
		margin-right: 16px;
		width: 48px;
		height: 48px;	

		@media (max-width: @breakpoint-M) {
			width: 32px;
			height: 32px;
		}
	}

	.seo-block {
		display: grid;
		grid-template-columns: ~"calc(50% - 16px)" ~"calc(50% - 16px)";
		gap: 32px;
		background-color: @green;
		padding: 32px;
		border-radius: 32px;
		margin-bottom: 32px;

		@media (max-width: @breakpoint-L) {
			grid-template-columns: 1fr 482px;
		}
		@media (max-width: @breakpoint-M) {
			padding: 20px;
			grid-template-columns: 100%;
		}

		&__left {
			color: @white;
			font-weight: 400;
			font-size: 18px;
			line-height: 130%;

			@media (max-width: @breakpoint-M) {
				font-size: 15px;
			}
			
			.seo-block__title {
				font-weight: 500;
				font-size: 32px;
				line-height: 130%;
				display: flex;
				align-items: center;
				margin-bottom: 12px;

				@media (max-width: @breakpoint-M) {
					font-size: 24px;
				}
			}
			.seo-block__definition {
				margin-bottom: 32px;
			}
			.seo-block__subtitle {
				font-weight: 500;
				font-size: 24px;
				margin-bottom: 12px;
				@media (max-width: @breakpoint-M) {
					font-size: 17px;
				}
			}
			.seo-block__list {
				display: flex;
				flex-direction: column;
				gap: 8px;
				margin-bottom: 32px;
	
				.seo-block__list-item {
					background-repeat: no-repeat;
					background-position: left 2.5px;
					background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_606_3663)'%3E%3Cpath d='M5.81189 15.9969C5.55891 15.997 5.30839 15.9472 5.07468 15.8503C4.84098 15.7534 4.62867 15.6114 4.44994 15.4324L0.332296 11.3163C-0.110765 10.8731 -0.110765 10.1546 0.332296 9.71144C0.775498 9.26838 1.49393 9.26838 1.93713 9.71144L5.81189 13.5862L16.0629 3.33523C16.5061 2.89216 17.2245 2.89216 17.6677 3.33523C18.1108 3.77843 18.1108 4.49686 17.6677 4.94006L7.17385 15.4324C6.99511 15.6114 6.78281 15.7534 6.5491 15.8503C6.31539 15.9472 6.06488 15.997 5.81189 15.9969Z' fill='%23FCF8F5' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_606_3663'%3E%3Crect width='18' height='18' fill='white' transform='translate(0 0.5)' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
					padding-left: 30px;
				}
			}
			.seo-block__price-title {
				font-weight: 500;
				font-size: 24px;
				line-height: 130%;
				margin-bottom: 8px;
				@media (max-width: @breakpoint-M) {
					font-size: 17px;
				}
			}
			.seo-block__price {
				font-weight: 500;
				font-size: 18px;
				margin-bottom: 24px;
				@media (max-width: @breakpoint-M) {
					font-size: 15px;
				}
				span {
					font-size: 42px;
					line-height: 130%;
					@media (max-width: @breakpoint-M) {
						font-size: 28px;
					}
				}
			}
			.seo-block__button {
				@media (max-width: @breakpoint-M) {
					width: 100%;
				}
			}
		}

		&__right {
			background-color: #fff;
			border-radius: 16px;
			padding: 32px 24px;
			height: fit-content;
			@media (max-width: @breakpoint-M) {
				padding: 20px 16px;
			}

			.swiper-wrap {
				max-width: 100%;
				.swiper {
					max-width: 100%;
				}
			}

			.seo-card {
				&__img {
					max-width: 100%;
					width: 100%;
					margin-bottom: 32px;
					@media (max-width: @breakpoint-M) {
						
					}
				}
				&__top-wrap {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 24px;
					@media (max-width: @breakpoint-XXS) {
						flex-direction: column;
						gap: 20px;
						justify-content: center;
					}

					.seo-card__logo {
						height: 48px;
						width: auto;
					}

					.controls {
						display: flex;
						align-items: center;
						gap: 16px;
						height: 32px;

						.swiper-button-next, .swiper-button-prev {
							position: static;
							width: 32px;
							height: 32px;
							border-radius: 100px;
							border: 1px solid rgba(26, 26, 24, 0.07);
							box-sizing: border-box;
							margin: 0;

							svg {
								width: 14px;
								height: 12px;
							}
							&::after {
								display: none;
							}
						}
					}
				}
				&__bottom-wrap {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 10px;
					@media (max-width: @breakpoint-XS) {
						grid-template-columns:  1fr;
					}

					.column {
						&__title {
							font-weight: 500;
							font-size: 24px;
							line-height: 130%;
							margin-bottom: 12px;
							@media (max-width: @breakpoint-M) {
								font-size: 17px;
								margin-bottom: 8px;
							}
						}
						&__row {
							display: flex;
							gap: 9px;
							font-weight: 400;
							font-size: 18px;
							line-height: 130%;
							@media (max-width: @breakpoint-M) {
								font-size: 15px;
							}
							&:not(:last-child) {
								margin-bottom: 8px;
								@media (max-width: @breakpoint-M) {
									margin-bottom: 4px;
								}
							}
							.column__param-name {
								text-wrap: nowrap;
							}
							.column__param-value {
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}

	.context-block {
		display: grid;
		grid-template-columns: ~"calc(50% - 16px)" ~"calc(50% - 16px)";
		gap: 32px;
		background-color: @black;
		border-radius: 32px;
		padding: 32px;
		color: @white;

		@media (max-width: @breakpoint-M) {
			grid-template-columns: 1fr;
		}
		
		&__title {
			font-weight: 500;
			font-size: 32px;
			line-height: 130%;
			display: flex;
			align-items: center;
			margin-bottom: 12px;

			@media (max-width: @breakpoint-M) {
				font-size: 24px;
			}
		}
		&__description {
			margin-bottom: 32px;
		}
		&__price-title {
			font-weight: 500;
			font-size: 24px;
			line-height: 130%;
			margin-bottom: 8px;
			@media (max-width: @breakpoint-M) {
				font-size: 17px;
			}
		}
		&__price {
			font-weight: 500;
			font-size: 18px;
			margin-bottom: 8px;
			@media (max-width: @breakpoint-M) {
				font-size: 15px;
			}
			span {
				font-size: 42px;
				line-height: 130%;
				@media (max-width: @breakpoint-M) {
					font-size: 28px;
				}
			}
		}
		&__price-dop {
			display: flex;
			align-items: center;
			gap: 6px;
			margin-bottom: 24px;
			@media (max-width: @breakpoint-M) {
				font-size: 15px;
			}

			span {
				font-weight: 500;
				border-radius: 6px;
				padding: 4px 6px;
				background-color: rgba(252, 248, 245, 0.15);
				@media (max-width: @breakpoint-M) {
					font-size: 15px;
					text-wrap: nowrap;
				}
			}
		}
		&__button {
			@media (max-width: @breakpoint-M) {
				width: 100%;
			}
		}

		&__right {
			display: flex;
			flex-direction: column;
			gap: 24px;

			img {
				max-width: 100%;
				width: 100%;
			}
			.first-pic {
				@media (max-width: @breakpoint-M) {
					display: none;
				}
			}
			.context-block__img-top {
				@media (max-width: @breakpoint-M) {
					display: none;
				}
			}
			.context-block__img-bottom-wrap {
				padding: 16px;
				border-radius: 16px;
				background-color: @white;
				
				.context-block__img-bottom {
					object-fit: cover;
					object-position: left;
					@media (max-width: @breakpoint-M) {
						min-height: 335px;
						width: auto;
					}
				}
			}
		}
	}
}

.team {
	padding: 120px 0 80px 0;

	@media (max-width: @breakpoint-M) {
		padding: 70px 0 50px 0;
	}

	&__content {
		display: grid;
		grid-template-columns: 650px 1fr;
		gap: 64px;

		@media (max-width: 1850px) {
			grid-template-columns: 50% 50%;
		}
		@media (max-width: @breakpoint-L) {
			grid-template-columns: 1fr 1fr;
			gap: 48px;
		} 
		@media (max-width: @breakpoint-M) {
			grid-template-columns: 1fr;
			gap: 64px;
		}
	}

	&__left {
		@media (max-width: @breakpoint-M) {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.team__description {
			font-weight: 400;
			font-size: 24px;
			line-height: 130%;
			margin-bottom: 64px;

			@media (max-width: @breakpoint-M) {
				text-align: center;
				font-size: 17px;
				margin-bottom: 32px;
			}
		}
		.team__advantages {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;

			@media (max-width: @breakpoint-L) {
				grid-template-columns: 1fr;
				max-width: 301px;
				gap: 12px;
			}
			@media (max-width: @breakpoint-M) {
				max-width: 100%;
			}

			.team__advantage {
				@media (max-width: @breakpoint-M) {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.team__advantage-title {
					font-weight: 500;
					font-size: 42px;
					line-height: 130%;
					margin-bottom: 12px;
					@media (max-width: @breakpoint-M) {
						font-size: 28px;
					}
				}
				.team__advantage-descr {
					font-weight: 400;
					font-size: 18px;
					line-height: 130%;
					@media (max-width: @breakpoint-M) {
						font-size: 15px;
						text-align: center;
					}
				}
			}
		}
	}

	&__right {
		position: relative;
		width: 100%;
		height: 1436px;
		@media (max-width: 1850px){
			height: 1675px;
			width: 444px;
		}
		@media (max-width: @breakpoint-M) {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.team__list {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 250px);
			grid-template-rows: repeat(28, 39.714px);
			column-gap: 12px;
			row-gap: 12px;
			grid-template-areas:
				"maxim . ."
				"maxim . serjik"
				"maxim vasili serjik"
				"maxim vasili serjik"
				"maxim vasili serjik"
				"maxim vasili serjik"
				"maxim vasili serjik"
				"seriona vasili serjik"
				"seriona vasili jenia"
				"seriona max jenia"
				"seriona max jenia"
				"seriona max jenia"
				"seriona max jenia"
				"seriona max jenia"
				"oleg max jenia"
				"oleg max luba"
				"oleg artiom luba"
				"oleg artiom luba"
				"oleg artiom luba"
				"oleg artiom luba"
				"oleg artiom luba"
				"roma artiom luba"
				"roma artiom ."
				"roma . ."
				"roma . ."
				"roma . ."
				"roma . ."
				"roma . .";
			@media (max-width: 1850px) {
				grid-template-columns: repeat(2, 216px);
				grid-template-rows: repeat(5, 100px 190px) 100px;
				grid-template-areas:
				"maxim ."
				"maxim vasili"
				"serjik vasili"
				"serjik seriona"
				"max seriona"
				"max jenia"
				"oleg jenia"
				"oleg artiom"
				"luba artiom"
				"luba roma"
				". roma";
			}
			@media (max-width: @breakpoint-M) {
				width: 100%;
				grid-template-columns: repeat(2, 298px);
				grid-template-rows: repeat(5, 50px 228px) 50px;
				position: static;
				justify-content: center;
			}
			@media (max-width: @breakpoint-XS) {
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(5, 50px 188px) 50px;
			}
			@media (max-width: @breakpoint-XXS) {
				grid-template-rows: repeat(5, 50px 158px) 50px;
			}
	
			.employee-card {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: 24px;
				@media (max-width: @breakpoint-M) {
					
				}

				&:nth-child(1) {
					grid-area: maxim;
					background-color: #dbd2ca;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(219, 210, 202, .3);
						}
					}
				}
				&:nth-child(2) {
					grid-area: vasili;
					background-color: #c3cdcc;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(195, 205, 204, .3);
						}
					}
				}
				&:nth-child(3) {
					grid-area: serjik;
					background-color: #b8c0ff;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(184, 192, 255, .3);
						}
					}
				}
				&:nth-child(4) {
					grid-area: seriona;
					background-color: #f5c12f;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(245, 193, 47, .3);
						}
					}
				}
				&:nth-child(5) {
					grid-area: max;
					background-color: #efb7b8;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(239, 183, 184, .3);
						}
					}
				}
				&:nth-child(6) {
					grid-area: jenia;
					background-color: #d9bda8;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(217, 189, 168, .3);
						}
					}
				}
				&:nth-child(7) {
					grid-area: oleg;
					background-color: #3ea8fe;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(62, 168, 254, .3);
						}
					}
				}
				&:nth-child(8) {
					grid-area: artiom;
					background-color: #91d3df;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(145, 211, 223, .3);
						}
					}
				}
				&:nth-child(9) {
					grid-area: luba;
					background-color: #ccdf69;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(204, 223, 105, .3);
						}
					}
				}
				&:nth-child(10) {
					grid-area: roma;
					background-color: #f4b2c6;
					.employee-card__img-wrap {
						&::after {
							background-color: rgba(244, 178, 198, .3);
						}
					}
				}
	
				&__img-wrap {
					object-fit: cover;
					position: absolute;
					top: 0px;
					left: 0;
					width: 100%;
					height: 100%;
					
					&::after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 2;
						
					}
					
				}
				&__img {
					object-fit: cover;
					width: 452px;
					height: 501px;
					top: 28px;
					left: -33%;
					position: relative;
					mix-blend-mode: luminosity;
					@media (max-width: 1850px) {
						width: 382px;
						height: 424px;
						top: 28px;
						left: -33%;
					}
					@media (max-width: @breakpoint-M) {
						width: 320px;
						height: 355px;
						top: 20px;
						left: 0;
					}
					@media (max-width: @breakpoint-XS) {
						left: 50%;
    					transform: translateX(-50%);
					}
					@media (max-width: @breakpoint-XXS) {
						top: 25px;
					}
				}
				&__text {
					position: absolute;
					z-index: 3;
					top: 20px;
					left: 29px;
					transform: rotate(-18deg);
					color: @black;
					font-family: "BRO", sans-serif;
					@media (max-width: @breakpoint-M) {
						top: 20px;
    					left: 20px;
					}

					.employee-card__name {
						font-weight: 400;
						font-size: 42px;
						line-height: 110%;
						font-family: "BRO", sans-serif;
						@media (max-width: @breakpoint-M) {
							font-size: 24px;
						}
					}
					.employee-card__post {
						font-weight: 400;
						font-size: 24px;
						line-height: 130%;
						font-family: "BRO", sans-serif;
						@media (max-width: @breakpoint-M) {
							font-size: 16px;
						}
					}
				}
			}
		}
	}
}

.footer {
	padding: 20px 0 50px 0;

	&__content {
		display: flex;
		justify-content: space-between;

		@media (max-width: @breakpoint-S) {
			flex-direction: column-reverse;
			gap: 48px;
		}
	}
	&__left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.footer__logo {
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 12px;
			font-size: 40px;
			font-weight: 500;
			line-height: 100%;
			letter-spacing: -4%;
			color: @white;
			
			@media (max-width: @breakpoint-M) {
				font-size: 32px;
			}
			
			img{
				@media (max-width: @breakpoint-S) {
					width: auto;
					height: 32px;
				}
			}
		}
		.footer__descr {
			margin-bottom: 48px;
			font-weight: 400;
			font-size: 18px;
			line-height: 130%;
			color: @white;
			max-width: 450px;
			@media (max-width: @breakpoint-S) {
				max-width: 100%;
				font-size: 15px;
				margin-bottom: 24px;
			}
		}
		.footer__copyright {
			font-weight: 400;
			font-size: 18px;
			line-height: 130%;
			color: rgba(252, 248, 245, 0.4);
			@media (max-width: @breakpoint-S) {
				font-size: 15px;
			}
		}
	} 
	&__right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 48px;
		@media (max-width: @breakpoint-S) {
			flex-direction: row;
			gap: 16px;
		}

		.footer__phone {
			@media (max-width: @breakpoint-S) {
				height: 48px;
				flex-grow: 1;
				text-wrap: nowrap;
    			padding: 0;
			}
		}
		.footer__socials {
			display: flex;
			justify-content: flex-end;
			gap: 16px;
			
			.footer__social {
				width: 48px;
				height: 48px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;

				&.tg {
					background-color: #039be5;
				}
				&.max{
					background: linear-gradient(73.55deg, #44CCFF 14.56%, #5533EE 63.57%, #9933DD 88.6%);
				}
			}
		}
	}

}

// кастомный чекбокс (переключатель)
.checkbox-ios {
    display: inline-block;    
    height: 28px;    
    line-height: 28px;  
    position: relative;
    vertical-align: middle;
    font-size: 14px;
    user-select: none;  
	.checkbox-ios-switch {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		min-width: 30px;
		width: 30px;
		height: 20px;
		border-radius: 100px;
		vertical-align: top;
		background: rgba(26, 26, 24, 0.07);
		transition: .2s;
		&:before {
			content: '';
			position: absolute;
			top: 3px;
			left: 3px;
			display: inline-block;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background: @white;
			transition: .15s;
		}
	}
	input[type=checkbox] {
		display: block; 
		width: 0;
		height: 0;  
		position: absolute;
		z-index: -1;
		opacity: 0;
		&:not(:disabled):active + .checkbox-ios-switch:before {
			box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
		}
		&:checked + .checkbox-ios-switch {
			background: @green;
		}
		&:checked ~ .label_text {
			color: @black;
		}
		&:checked + .checkbox-ios-switch:before {
			transform:translateX(10px);
		}
		/* Hover */
		&:not(:disabled) + .checkbox-ios-switch {
			cursor: pointer;
			border-color: rgba(0, 0, 0, .3);
		}
		/* Disabled */
		&:disabled + .checkbox-ios-switch {
			filter: grayscale(70%);
			border-color: rgba(0, 0, 0, .1);
		}
		&:disabled + .checkbox-ios-switch:before {
			background: #eee;
		}
	}
	/* Focus */
	&.focused .checkbox-ios-switch:before {
		box-shadow: inset 0px 0px 4px #ff5623;
	}
}