.web {
	container: web / inline-size;
	height: 100dvh;
	color: #1d1f13;
	letter-spacing: 0;
	background-color: #fff;
	overflow: auto;
}

.web-circle {
	position: absolute;
	filter: blur(185px);
	opacity: 0.4;
	width: 100%; height: 632px;
	max-width: 632px;
	border-radius: 50%;
}

.link-pill {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	font-family: 'Manrope';
	text-align: left;
	background-position: top left;
	background-size: auto auto;
	background-repeat: no-repeat;
	padding: 6px 6px 6px 20px;
	border-radius: 60px;
}

.card-circle {
	width: 32px; height: 32px;
	flex-shrink: 0;
	background-color: #fff;
	padding: 6px;
	border-radius: 50%;
}

.card-svg {
	height: 100%;
}

.column-a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
	padding: 0 32px;
}

.column-subtitle1 {
	font-size: 26px;
	font-weight: 500;
}

.column-text1 {
	color: #63674e;
	font-size: 20px;
	font-weight: 400;
}

.column-b {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.global {
	width: 50px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

.column-c {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-grow: 1;
	align-self: stretch;
}

.column-text2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
}

.column-d {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-weight: 400;
}

.column-e {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.column-text3 {
	color: rgba(29, 31, 19, 0.4);
	font-size: 12px;
	text-transform: uppercase;
}

.column-text4 {
	font-size: 14px;
	line-height: 1.714;
}

.row-b {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font-family: 'Manrope';
}

.column-f {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 15px;
	border: 1px solid #e1e1e1;
	border-radius: 20px;
}

.column-text-book1 {
	font-size: 18px;
	font-weight: 700;
}

.column-text-book2 {
	font-size: 14px;
	font-weight: 500;
}

.web-pyhoo48-a {
	position: absolute; top: 4990px; right: -197px; 
	margin: 0 auto;
	width: 90%;
	max-width: 518px;
}

.web-lancu {
	position: absolute; z-index: 7; top: 2559px; right: -297px; 
	rotate: -15deg;
	transform-origin: 50% 50%;
	margin: 0 auto;
	width: 90%;
	max-width: 554px;
}

.web-col1 {
	position: absolute; z-index: 8; top: 290px; left: -341px; right: -396px; 
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 646px;
}

.web-group1 {
	position: absolute; top: 908px; right: 0; 
	margin: 0 auto;
	width: 90%; height: 737px;
	max-width: 1052px;
}

.web-circle1 {
	top: 0; left: 0; 
	background-color: #57e796;
}

.web-circle2 {
	top: 105px; right: 0; 
	background-color: #d5fe0a;
}

.web-group-top {
	position: relative;
	opacity: 0.7;
	margin: 0 auto;
	width: 90%; height: 478px;
	max-width: 682px;
	flex-shrink: 0;
}

.web-circle3 {
	top: 0; left: 0; 
	opacity: 1;
	height: 410px;
	max-width: 410px;
	background-color: #57e796;
}

.web-circle-cyan1 {
	top: 68px; right: 0; 
	opacity: 1;
	height: 410px;
	max-width: 410px;
	background-color: #0ae5fe;
}

.web-group2 {
	position: relative; z-index: 1;
	margin: 0 auto;
	width: 90%; height: 1781px;
	max-width: 1367px;
	flex-shrink: 0;
}

.web-circle-yellow {
	top: 0; left: 0; 
	background-color: #e7e557;
}

.web-circle-cyan2 {
	top: 1319px; right: 0; 
	height: 462px;
	max-width: 462px;
	background-color: #0ae5fe;
}

.web-group-bottom {
	position: relative;
	margin: 587px auto 0 auto;
	width: 90%; height: 1066px;
	max-width: 810px;
	flex-shrink: 0;
	align-self: end;
}

.web-circle4 {
	top: 0; left: 0; 
	background-color: #57e796;
}

.web-circle-cyan3 {
	top: 434px; right: 0; 
	background-color: #0ae5fe;
}

.top-navigation {
	container: top-navigation / inline-size;
	position: absolute; z-index: 9; top: 26px; left: 149px; right: 148px; 
	backdrop-filter: blur(9px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 84px;
	font-family: 'Manrope';
	font-weight: 500;
	line-height: normal;
	background-color: rgba(248, 248, 246, 0.45);
	padding: 9px 15px;
	border: 1px solid rgba(225, 225, 225, 0.45);
	border-radius: 100px;
}

.web-logo {
	margin-left: 5px;
	width: 133px;
	flex-shrink: 0;
	aspect-ratio: 93 / 20;
}

.web-stack {
	display: flex;
	align-items: center;
	gap: 40px;
	font-size: 16px;
	text-align: center;
	padding: 10px 16px;
}

.web-img {
	position: absolute; z-index: 10; top: 14px; left: -154px; 
	rotate: -18deg;
	transform-origin: 50% 50%;
	margin: 0 auto;
	width: 90%;
	max-width: 487px;
}

.main {
	container: main / inline-size;
	position: absolute; z-index: 11; top: 190px; left: 120px; right: 120px; 
	display: flex;
	flex-direction: column;
	gap: 120px;
	font-family: 'Poppins';
}

.main-block-1 {
	container: main-block-1 / inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.web-col-top1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.web-title {
	align-self: stretch;
	font-size: 64px;
	font-weight: 600;
	line-height: 1.188;
	text-align: center;
}

.web-text-block-control {
	margin: 0 12px;
	align-self: stretch;
	text-align: center;
}

.main-block-2 {
	container: main-block-2 / inline-size;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.card-block-2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex: 0 0 calc(50% - 12px);
	box-sizing: border-box;
	min-width: 500px;
	background-color: rgba(247, 247, 247, 0.45);
	padding: 23px;
	border: 1px solid #e1e1e1;
	border-radius: 20px;
}

.card-block2-img {
	width: 120px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

.card-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-grow: 1;
}

.card-text-40 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
}

.card-text2 {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.features-block-3 {
	container: features-block-3 / inline-size;
	display: flex;
	flex-direction: column;
	gap: 100px;
	line-height: normal;
	text-align: left;
	padding: 0 92px;
}

.web-row3 {
	display: flex;
	align-items: center;
	gap: 37px;
}

.row-icon {
	width: 100%;
	max-width: 360px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

.web-icon {
	width: 100%;
	max-width: 360px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

.comparison-block-4 {
	container: comparison-block-4 / inline-size;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 60px;
	flex-shrink: 0;
}

.web-row4 {
	container: web-row4 / inline-size;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #000;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.444;
	text-align: center;
	padding: 0 18px;
}



/* card-c */

.card-c {
	backdrop-filter: blur(4px);
	max-width: 300px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	background-color: rgba(250, 250, 248, 0.3);
	padding: 38px 10px 34px 10px;
	border-radius: 20px;
}

.card-text-top {
	min-height: 54px;
	font-weight: 700;
}

.card-text3 {
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.card-c-text {
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.card-c-back {
	background: linear-gradient(128deg, #04e4ef 0%, #4fff90 99%) top left / auto auto no-repeat;
}

.web-col-left {
	width: 81%;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	font-weight: 600;
	padding: 38px 10px 34px 10px;
}

.card-text-bottom {
	min-height: 52px;
	margin-top: 10px;
}

.contact-us {
	align-self: center;
	font-weight: 500;
	line-height: normal;
	background-image: linear-gradient(128deg, #04e4ef 0%, #4fff90 100%);
}

.solutions-block-5 {
	container: solutions-block-5 / inline-size;
	display: flex;
	flex-direction: column;
	gap: 60px;
}


.web-row5 {
	container: web-row5 / inline-size;
	height: 591px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-shrink: 0;
	line-height: normal;
	text-align: left;
	padding: 0 36px;
}

.solutions-card {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	backdrop-filter: blur(6px);
	max-width: 360px;
	gap: 10px;
	width: 100%;
}

.global-reach-block-6 {
	container: global-reach-block-6 / inline-size;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.web-subtitle-tailored {
	align-self: unset;
}

.web-row-bottom {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 6px 36px;
}

.web-flags {
	width: 100%;
	min-width: 0;
	flex-grow: 1;
}

.footer-block-7 {
	display: flex;
	flex-direction: column;
	gap: 50px;
	line-height: normal;
}

.footer-center {
	position: relative;
	backdrop-filter: blur(2px);
	display: flex;
	flex-direction: column;
	gap: 28px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	background-color: #0f1615;
	padding: 98px 199px 105px 199px;
	border-radius: 64px;
	overflow: hidden;
}

.footer-graphics {
	position: absolute; top: -313px; left: 569px; right: -848px; 
	display: flex;
	flex-direction: column;
	padding-top: 80px;
	padding-bottom: 86px;
}

.web-graphic1 {
	position: absolute; top: 313px; left: 256px; 
	mix-blend-mode: hard-light;
	width: 100%; height: 268px;
	max-width: 375px;
}

.web-group3 {
	position: absolute; z-index: 1; top: 313px; left: 194px; 
	width: 100%; height: 465px;
	max-width: 437px;
	background: url(../assets/web-group.png) center / contain no-repeat;
}

.web-graphic2 {
	position: absolute; top: 198px; left: 343px; 
	filter: blur(0.5px);
	width: 40px; height: 36px;
}

.web-graphic3 {
	position: absolute; top: 248px; left: 432px; 
	filter: blur(0.5px);
	width: 5px; height: 38px;
}

.web-3d-cubes {
	position: relative; z-index: 2;
	rotate: 180deg;
	transform-origin: 50% 50%;
	flex-shrink: 0;
}

.web-subtitle-ready-to {
	font-size: 44px;
	line-height: 1.318;
}

.web-text-join-the-future {
	margin: 4px 103px;
}

.explore-solution {
	align-self: center;
	color: #1d1f13;
	font-weight: 500;
	line-height: normal;
	background-image: linear-gradient(128deg, #04e4ef 0%, #4fff90 99%);
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	color: #5d6b82;
	font-size: 12px;
	font-weight: 400;
	text-align: left;
}

.web-line {
	height: 0;
	border-top: 1px solid #dfe2e6;
}

.web-row6 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
}

.social {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 64px;
}

.social-icon {
	width: 24px;
	height: 24px;
}



/* container queries (flex rows) */

@container web (width < 1015px) {
	.top-navigation {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.top-navigation > * {
		margin-left: unset !important; margin-right: unset !important;
	}
	.main-block-2 {
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: center;
	}
}

@container web-row1 (width < 643px) {
	.web-stack {
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}
	.web-stack > * {
		text-align: center;
	}
}

@container main-block-2 (width < 831px) {
	.card-block-2 {
		flex-direction: column;
		align-items: center;
		gap: 22px;
	}
	.card-block-2 > * {
		margin-left: unset !important; margin-right: unset !important; margin-top: unset !important;
	}
}

@container main-block-2 (width < 499px) {
	.card-block-2 {
		flex-direction: column;
		gap: 18px;
	}
}

@container features-block-3 (width < 1015px) {
	.web-row3 {
		flex-direction: column;
		gap: 35px;
	}
}

@container comparison-block-4 (width < 1015px) {
	.web-row4 {
		flex-direction: column;
		gap: 38px;
	}
}

@container solutions-block-5 (width < 1015px) {
	.web-row5 {
		height: unset;
		flex-direction: column;
		align-items: center;
		gap: 100px;
	}
}

@container web-col6 (width < 905px) {
	.web-row-bottom {
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}
	.web-row-bottom > .web-flags1 {
		width: 84px;
	}
	.web-row-bottom > .web-flags2 {
		width: 84px;
	}
	.web-row-bottom > .web-flags3 {
		width: 84px;
	}
	.web-row-bottom > .web-flags4 {
		width: 84px;
	}
	.web-row-bottom > .web-flags5 {
		width: 84px;
	}
	.web-row-bottom > .web-flags6 {
		width: 84px;
	}
	.web-row-bottom > .web-flags7 {
		width: 84px;
	}
	.web-row-bottom > .web-flags8 {
		width: 84px;
	}
	.web-row-bottom > .web-flags9 {
		width: 84px;
	}
	.web-row-bottom > .web-flags10 {
		width: 84px;
	}
}