.h-35 {
	height: 35%;
}

.bg-wrapper {
	background: url(../img/index-background-xxl.avif);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
}

.img-background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.simpleParallax {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
}

.img-simple {
	position: absolute;
	display: inline-block;
	top: 0;
	vertical-align: middle;
	object-position: 50% 0%;
	object-fit: cover;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.simpleParallax .img-simple {
	position: relative;
}

.top {
	height: 100vh;
	width: 100%;
	display: grid;
	flex-direction: column;
	margin-bottom: 5%;
	padding: var(--frame-height-top) 0 var(--frame-height-bottom) 0;
}

.top-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}


.compass {
	width: calc(113px + 105*calc(100vw - 992px)/928);
	align-self: flex-start;
	margin-top: calc(39.82px + 37.25*calc(100vw - 992px)/928);
	margin-left: calc(83.39px + 72.01*calc(100vw - 992px)/928);
	/* margin-bottom: calc(107.6px + 100.66*calc(100vw - 992px)/928); */
}

.top-header {
	margin-left: calc(163.53px + 152.97*calc(100vw - 992px)/928);
	margin-bottom: calc(35.02px + 32.67*calc(100vw - 992px)/928);
	text-shadow: 0px 12px 6px rgba(0, 0, 0, 0.25);
	line-height: normal;
}

/* .top-header::after{ TODO: прямогугольник

} */

.top-line {
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.25));
	width: calc(275px + 257*calc(100vw - 992px)/928);
	margin-left: calc(104.24px + 97.51*calc(100vw - 992px)/928);
	margin-bottom: calc(70px + 69.25*calc(100vw - 992px)/928);

}

.info {
	max-height: 100vh;
	max-width: 100%;
}

.info * span {
	line-height: 0.8;
}

.info * {
	text-shadow: 29px 44px 20px rgba(0, 0, 0, 0.5);
}

.info-left .info-left p {
	transform: translateX(5%);
}

.cube-hover {
	text-shadow: 29px 44px 20px rgba(0, 0, 0, 0.5);
	position: relative;
	cursor: default;
	transition: 0.3s ease-in all;
}

.cube-hover:hover {
	transform: translate(-7%, -5%);
	transition: 0.3s ease-out all;
}

.cube-hover::after {
	content: '';
	position: absolute;
	bottom: calc(calc(18px + 18*calc(100vw - 992px)/928)*(-1));
	right: calc(calc(18px + 18*calc(100vw - 992px)/928) * (-1));
	background: #FD8C02;
	width: calc(18px + 18*calc(100vw - 992px)/928);
	height: calc(18px + 18*calc(100vw - 992px)/928);
	box-shadow: 29px 44px 20px rgba(0, 0, 0, 0.5);
	opacity: 0;

	transition: 0.3s ease-in all;
}

.cube-hover:hover::after {
	opacity: 1;

	transition: 0.3s ease-out all;
}

.info-right {
	text-align: end;
}

.info-container {
	margin-right: calc(10.57px + 10.43*calc(100vw - 992px)/928);
	margin-bottom: calc(38px + 36*calc(100vw - 992px)/928);
}

.info-left {
	text-align: end;
	margin-right: calc(24.55px + 20.45*calc(100vw - 992px)/928);
}

.info-left-top {
	margin-bottom: calc(32.7px + 30.87*calc(100vw - 992px)/928);
}

.info-left-middle {
	margin-bottom: calc(38.6px + 36.4*calc(100vw - 992px)/928);
}

.info-right-text {
	margin-top: calc(77px + 73*calc(100vw - 992px)/928);
	margin-left: calc(48.6px + 47.1*calc(100vw - 992px)/928);
}

.portfolio__button-container {
	margin-top: calc(30px + 32*calc(100vw - 992px)/928);
	margin-left: calc(48.6px + 47.1*calc(100vw - 992px)/928);
}

.portfolio__button {
	width: calc(230.95px + 216.05*calc(100vw - 992px)/928);
	height: calc(42.1px + 39.37*calc(100vw - 992px)/928);

	background: transparent;
	box-sizing: border-box;
	border: 4px solid #FFFFFF;
	filter: drop-shadow(0px 17px 10px rgba(0, 0, 0, 0.35));

	text-align: center;
	color: #FFFFFF;

	z-index: 0 !important;

	transition: ease-in 0.11s all;
}

.portfolio__button:hover {
	transform: scale(1.1, 1.05);
	transition: cubic-bezier(0.4, 0, 1, 1) 0.11s all;
	-webkit-box-shadow: 0px 18px 30px 3px rgba(34, 60, 80, 0.22);
	-moz-box-shadow: 0px 18px 30px 3px rgba(34, 60, 80, 0.22);
	box-shadow: 0px 18px 30px 3px rgba(34, 60, 80, 0.22);
}

.portfolio__button:active {
	transform: scale(0.9, 0.95);
	transition: cubic-bezier(0.4, 0, 1, 1) 0.11s all;
	-webkit-box-shadow: 0px 18px 30px 3px rgba(34, 60, 80, 0.22);
	-moz-box-shadow: 0px 18px 30px 3px rgba(34, 60, 80, 0.22);
	box-shadow: 0px 18px 30px 3px rgba(34, 60, 80, 0.22);
}

.bordered__rectangle {
	position: absolute;
	top: 0;
	left: 0;

	width: calc(20.92px + 19.58*calc(100vw - 992px)/928);
	height: calc(20.92px + 19.58*calc(100vw - 992px)/928);

	background: #FD8C02;
	border-width: 0px 4px 4px 0px;
	border-style: solid;
	border-color: #FFFFFF;
}

.about {
	height: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.about-gallery {
	margin-top: calc(70px + 66*calc(100vw - 992px)/928);
	position: relative;
	transition: ease-in 0.3s all;

}

.about-gallery:hover {
	transition: ease-out 0.3s all;
}

.about-gallery::after {
	content: '';
	position: absolute;
	width: 110vw;
	left: calc((-1)*var(--frame-width-left)*2);
	top: 0;
	height: 100%;
	z-index: 1;
	background: #000000;
	opacity: 0.6;
}

.about-item {
	width: calc(256px + 128*calc(100vw - 1280px)/640);
	height: calc(299px + 149*calc(100vw - 1280px)/640);
	position: relative;
	transition: ease-in 0.3s all;
	z-index: 3;
	cursor: pointer;
}

.about-item_text {
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: normal;
	z-index: 3;
	height: 100%;
	width: 100%;
	opacity: 0.6;
	transition: ease-in 0.3s all;
}

.about-item_img {
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
	filter: saturate(0);
	background-color: #FD8C02;
	opacity: 0;
	transition: ease-in 0.3s opacity;
	mix-blend-mode: multiply;
}

.about-item:hover {
	background: #FD8C02;
	transition: ease-out 0.3s all;
	flex-grow: 1.2;
	outline: #FFFFFF 6px solid;
	z-index: 4;
	background-color: #FD8C02;
	opacity: 1;
	transition: ease-in 0.3s all;
}

.about-item:hover .about-item_img {
	opacity: 1;
	transition: ease-out 0.3s opacity;
}

.about-item:hover .about-item_text {
	font-family: 'Bebas Neue';
	font-weight: 400;
	font-size: var(--fs-32);
	opacity: 1;
	text-decoration: underline;
	transition: ease-out 0.3s all;
}

.about__description-container {
	margin-top: calc(70px + 66*calc(100vw - 992px)/928);
	margin-bottom: calc(70px + 67*calc(100vw - 992px)/928);
}

.about__description-text {
	margin-top: calc(27.9px + 26.1*calc(100vw - 992px)/928);
}

.about-more {
	text-decoration: underline;
	margin-top: calc(27.65px + 31.35*calc(100vw - 992px)/928);
}

.clients {
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;

}

.clients-header {
	margin-bottom: calc(42.8px + 39.7*calc(100vw - 992px)/928);
}

.image__list-container {
	gap: 4.8rem;
	align-items: center;
	justify-content: space-between;
}

.image__list-container img {
	filter: saturate(0);
	transition: 0.3s ease-in all;
}

.image__list-container .active img {
	transform: scale(1.1);
	filter: none;
	transition: 0.3s ease-out all;
}

.clients-wrapper {
	padding: var(--frame-height-top) 0 var(--frame-height-bottom) 0;

}

.clients__img {
	width: calc(53px + 50*calc(100vw - 992px)/928);
}

.clients__name {
	margin: 0 auto;
	margin-bottom: calc(10px + 10*calc(100vw - 992px)/928);
	position: relative;
	width: fit-content;
	font-weight: 500 !important;
	transition: 0.2s ease-in all;
}

.clients__name::after {
	position: absolute;
	background-color: #FD8C02;
	top: calc(var(--fs-21)*-0.9);
	right: calc(var(--fs-21)*-1.1);
	width: var(--fs-21);
	height: var(--fs-21);
	opacity: 0;
	transition: 0.3s ease-in all;
}

.clients__name:hover {
	font-size: var(--fs-27);
	font-weight: 800 !important;
	transition: 0.2s ease-out all;
}

.clients__name:hover::after {
	content: '';
	opacity: 1;
	transition: 0.3s ease-out all;
}

.clients .tab-content {
	position: relative;
	padding-top: calc(59px + 55*calc(100vw - 992px)/928);
	max-height: 50%;
	flex: 1 0 0%;
}

.clients .tab-content>.tab-pane {
	display: block;
}

.clients .tab-pane {
	opacity: 0;
	width: 100%;
	transition: 0.3s ease-out opacity;
	visibility: hidden;
	position: absolute;
}

.clients .tab-pane.active {
	position: relative;
	opacity: 1;
	visibility: visible;
	height: fit-content;
	max-height: 70%;
	transition: 0.3s ease-out opacity;
}

.clients .tab-pane.active::-webkit-scrollbar {
	width: 2.5px;
	background-color: #f9f9fd;
}

.clients .tab-pane.active::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #535353;
}

.clients .tab-pane.active::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px #535353;
	border-radius: 10px;
	background-color: #f9f9fd;
}

.polosa {
	position: relative;
	z-index: 2;
}

.polosa::after {
	content: "";
	position: absolute;
	top: 0.5%;
	right: calc(var(--fs-72) / (-8));
	height: 110%;
	width: 100vw;
	/* задаем левый край фона */
	/* сбрасываем правый край фона */
	background-color: rgba(22, 36, 49, 0.9);
	z-index: -1;
}

@media (max-width: 1279.98px) {
	.bg-wrapper {
		background: url(../img/index-background-xl.avif);
		background-position: top;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.portfolio__button {
		border: 3px solid #FFFFFF !important;
	}

	.bordered__rectangle {
		border-width: 0px 3px 3px 0px !important;
	}

}

@media (max-width: 991.98px) {
	.bg-wrapper {
		background: url(../img/index-background-l.avif);
		background-position: top;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.content-wrapper {
		padding-right: calc(var(--frame-width-right));
	}

	.top {
		--fs-72: calc(48px + 14*calc(100vw - 768px)/224);
	}

	.info-left {
		margin: 0;
	}

	.cube-hover {
		text-shadow: 29px 44px 20px rgba(0, 0, 0, 0.5);
		position: relative;
		transition: 0.3s ease-in all;
	}

	.cube-hover:hover {
		transition: 0.3s ease-out all;
	}

	.cube-hover::after {
		right: calc(calc(18px + 6*calc(100vw - 768px)/224) * -1);
		bottom: calc(calc(18px + 6*calc(100vw - 768px)/224) * -1);
		width: calc(18px + 6*calc(100vw - 768px)/224);
		height: calc(18px + 6*calc(100vw - 768px)/224);
	}

	.cube-hover:hover::after {
		opacity: 1;
	}

	.portfolio__button {
		border: 2px solid #FFFFFF !important;
	}

	.bordered__rectangle {
		border-width: 0px 2px 2px 0px !important;
	}

	.top-header {
		margin-left: calc(43px + 12.5*calc(100vw - 768px)/224);
		margin-bottom: calc(72px + 21*calc(100vw - 768px)/224);
		/* align-self: flex-end; */
	}

	.compass {
		width: calc(123px + 36*calc(100vw - 768px)/224);
		margin-left: calc(43px + 12.5*calc(100vw - 768px)/224);
		margin-top: calc(43px + 12.5*calc(100vw - 768px)/224);
		margin-bottom: 0;
	}

	.top-line {
		width: calc(355px + 103*calc(100vw - 768px)/224);
		margin-left: calc(43px + 12.5*calc(100vw - 768px)/224);
		margin-bottom: calc(37px + 11*calc(100vw - 768px)/224);
		/* align-self: flex-end; */
	}

	.clients__img {
		width: calc(53px + 18*calc(100vw - 768px)/224);
	}
}

@media (max-width: 767.98px) {

	.bg-wrapper {
		background: none;
	}

	.top {
		--fs-72: calc(32px + 16*calc(100vw - 576px)/192);
		display: flex;
		flex-direction: column;
	}



	.info {
		--fs-21: calc(28px + 9*calc(100vw - 576px)/192);
		--fs-36: calc(24px + 8*calc(100vw - 576px)/192);

		max-height: unset;
		padding: calc(var(--frame-height-top) + var(--frame-border-width)) 0 calc(var(--frame-height-bottom) + var(--frame-border-width)) 0;
	}

	.info * span {
		line-height: 0.7;
	}

	.cube-hover {
		text-shadow: 29px 44px 20px rgba(0, 0, 0, 0.5);
		position: relative;
		transition: 0.3s ease-in all;
	}

	.cube-hover:hover {
		transition: 0.3s ease-out all;
	}

	.cube-hover::after {
		left: calc(calc(18px + 18*calc(100vw - 576px)/192) * (-1));
		right: 0;

		width: calc(25px + 8*calc(100vw - 576px)/192);
		height: calc(25px + 8*calc(100vw - 576px)/192);
	}

	.cube-hover:hover::after {
		opacity: 1;
	}


	.info-container {
		/* flex-direction: column-reverse; */
		max-height: unset;
	}

	.top-content {
		height: 100%;
		justify-content: space-between;
		padding-right: 10px
	}

	.top-header {
		margin-left: calc(33px + 10*calc(100vw - 576px)/192);
		align-self: unset;
	}

	.compass {
		width: calc(80px + 27*calc(100vw - 576px)/192);
		margin-left: calc(33px + 10*calc(100vw - 576px)/192);
		margin-top: calc(33px + 10*calc(100vw - 576px)/192);

	}

	.top-line {
		width: calc(184px + 181*calc(100vw - 576px)/192);
		margin-left: calc(33px + 10*calc(100vw - 576px)/192);
		margin-bottom: calc(16px + 21*calc(100vw - 576px)/192);
		align-self: unset;
	}

	.about {
		width: 100%;
	}

	.about .portfolio__button-container {
		margin-top: 23vw;
		margin-bottom: 11vw;
	}

	.about-gallery {
		position: relative;
		background-color: #FD8C02;
		height: 100%;
		gap: 2vw;
		margin-top: 0;
	}

	.about-container-mob {
		height: 100vh;
		padding: var(--frame-height-top) 0 var(--frame-height-bottom) 0;
		display: flex;
		flex-direction: column;
		justify-content: stretch;
		margin-top: 10vw;
	}

	.about__description-header {
		margin-left: 10%;
		transform: translateX(-60%);
	}

	.about__description-container.show .about__description-header {
		transform: none;
		transition: 0.5s ease-out all;
	}

	.about-gallery::after {
		content: '';
		position: absolute;
		width: 110vw;
		left: calc((-1)*var(--frame-width-left)*2);
		top: calc(calc(var(--frame-height-top) + var(--frame-border-width))*-1);
		height: calc(100% + var(--frame-height-top) + var(--frame-border-width)*2 + var(--frame-height-bottom));
		z-index: 1;
		background: #FD8C02;
		opacity: 1;
	}

	.about-item_text {
		opacity: 1;
	}

	.about-item {
		width: 100%;
		flex: 1 0 0%;
		background-color: #0b151eb0;
		border: 2px #ffffff solid;
	}

	.about-item:hover {
		outline: 4px #ffffff solid;
		flex: 2 0 0%;
		background-color: none;
	}

	.info-right {
		text-align: start;
		margin-bottom: calc(84px + 28*calc(100vw - 576px)/192);

	}

	.info-right>div {
		transform: translateX(80%);
	}

	.info-right.show>div {
		transform: translateX(0%);
		transition: 0.6s ease-out all;
	}

	.info-left {
		text-align: start;
		margin-right: 0;
		gap: calc(35px + 11*calc(100vw - 576px)/192);
	}

	/* .info-left .counter:first-child {
		margin-left: 3%;
	} */

	.info-left-top {
		margin-bottom: calc(30px + 10*calc(100vw - 576px)/192);
		transform: translateX(-40%);
		transition: ease-out 0.3s all;
	}

	.info-left-top.show {
		transform: translateX(0%);
	}

	.info-left-middle {
		margin-bottom: calc(10px + 3*calc(100vw - 576px)/192);
		transform: translateX(-40%);
	}

	.info-left-middle.show {
		transform: translateX(20%);
		transition: ease-out 0.4s all;
	}

	.info-left-bot {
		transform: translateX(-40%);
	}

	.info-left-bot.show {
		transform: translateX(40%);
		transition: ease-out 0.5s all;
	}

	.about__description-text-container {
		padding-left: 10px;
		padding-right: 10px;
	}

	.about__description-text-container a {
		text-align: end;
	}

	.portfolio__button-container {
		margin: 0 auto;
		text-align: center;
	}

	.portfolio__button {
		width: 100%;
		height: 54px;
		padding: 0 15px 0 15px;
	}

	.clients {
		--fs-21: calc(calc(16px + 5*calc(100vw - 576px)/192));
		--fs-27: calc(calc(24px + 8*calc(100vw - 576px)/192));
		height: unset;
		max-height: unset;
		padding-bottom: var(--frame-height-bottom);
	}

	.clients__name {
		margin: 0;
		margin-left: auto;
	}

	.image__list-container {
		display: none !important;
	}

	.clients-wrapper {
		padding-top: 20px;
		position: relative;
		margin-left: calc(var(--frame-width-left) + var(--frame-border-width)) !important;
		margin-right: calc(var(--frame-width-right) + var(--frame-border-width)) !important;
	}

	.clients-wrapper .tab-pane {
		opacity: 1;
		visibility: visible;
		position: relative;
	}

	.clients-wrapper .tab-content>.tab-pane {
		display: flex;
		flex-direction: column;
		gap: calc(30px + 10 *calc(100vw - 576px)/192);
	}

	.clients .tab-content {
		text-align: end;
		display: flex;
		flex-direction: column;
		gap: calc(10px + 10*calc(100vw - 576px)/192);
		width: 100%;
		padding-right: 10px;
	}

	.clients-header {
		padding-left: 4px;
		transform: translateX(-100%);
	}

	.clients-wrapper.show .clients-header {
		transform: translateX(0);
		transition: 0.4s ease-out all;
	}

}

@media (max-width: 576px) {
	.bg-wrapper {
		background: none;
	}

	.top {
		--fs-72: 32px;
	}

	.top-header {
		margin-left: 33px;
		margin-bottom: 0;
		align-self: unset;
	}

	.compass {
		width: 105px;
		margin-left: 33px;
		margin-top: calc(33px + var(--frame-height-top)*3);
	}

	.top-line {
		width: 237px;
		margin-left: 33px;
		margin-bottom: 25px;
		align-self: unset;
	}

	.about-item {

		flex: 1 0 0%;

	}

	.about-item:hover {

		flex: 2 0 0%;
	}

	.info-right {
		text-align: start;
		margin-bottom: 84px;
	}

	.clients {
		--fs-21: calc(calc(16px + 2*calc(100vw - 375px)/201));
		--fs-27: calc(calc(24px + 4*calc(100vw - 576px)/192));
	}

	.clients-wrapper .tab-content>.tab-pane {
		display: flex;
		flex-direction: column;
		gap: calc(20px + 5 *calc(100vw - 375px)/201);
	}

	.clients .tab-content {
		text-align: end;
		display: flex;
		flex-direction: column;
		gap: calc(10px + 5*calc(100vw - 375px)/201);
		width: 100%;
		padding-right: 10px;
	}

	.portfolio__button {
		height: 54px;
	}

	.portfolio__button-container {
		width: 298px;
	}

}


@media (max-width: 375px) {
	.bg-wrapper {
		background: none;
	}

	.portfolio__button-container {
		width: 296px;
	}
}