@font-face {
	font-family: 'Satoshi';
	src: url('fonts/Satoshi-Bold.woff2') format('woff2'),
		 url('fonts/Satoshi-Bold.woff') format('woff'),
		 url('fonts/Satoshi-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: normal;
  }
  @font-face {
	font-family: 'Satoshi';
	src: url('fonts/Satoshi-Black.woff2') format('woff2'),
		 url('fonts/Satoshi-Black.woff') format('woff'),
		 url('fonts/Satoshi-Black.ttf') format('truetype');
	font-weight: 900;
	font-display: swap;
	font-style: normal;
  }
  
  

*{
	padding: 0;
	margin: 0;
	border:0;
	outline: none;
    color: #000;
    box-sizing: border-box;
	position: relative;
}

::-moz-selection {
	color: #0e121b;
	background: #8E7FF0;
}

::selection {
	color: #0e121b;
	background: #8E7FF0;
} 

input, button{
	font-family:inherit;
}

body{
	font-family:'Satoshi';
}

.wrapper{
	max-width:1263px;
	margin-left:auto;
	margin-right:auto;
	padding:0 10px;
}

.main{
	background-image: url(./img/main.webp);
	background-size: cover;
	background-position: center center;
	padding-top: 50px;
	padding-bottom: 60px;
    background-color: #10141f;
}
h1{
	max-width: 840px;
	margin: 290px auto 30px;
	font-weight: 900;
	font-size: 85px;
	line-height: 120%;
	letter-spacing: 0.02em;
	text-align: center;
	background: linear-gradient(179deg, #fff 0%, #DEF0FF 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h1 + p{
	margin-bottom: 90px;
	font-weight: 700;
	font-size: 25px;
	line-height: 150%;
	text-align: center;
	color: #c7c7c7;
}

.main .content a{
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 24px;
	line-height: 113%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
}
.main .content a span{
	color: #fff;
	padding-right: 20px;

}

.title span{
	display: block;
	margin-bottom: 14px;
	font-weight: 900;
	font-size: 24px;
	line-height: 113%;
	color: #8e7ff0;
}

.title h2{
	max-width: 600px;
	font-weight: 900;
	font-size: 45px;
	line-height: 113%;
	letter-spacing: -0.01em;
	color: #fff;
}

.about{
	padding-top: 70px;
	padding-bottom: 70px;
}

.about .title h2{
	color:#10141F;
	max-width: 500px;
}

.about .top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 44px;
}

.about .top p{
	color:#10141F;
	max-width: 535px;	
	font-weight: 700;
	font-size: 20px;
	line-height: 133%;
}

.about .bottom {
	display: flex;
	justify-content: space-between;
}
.about .bottom .item{
	border-radius: 40px;
	flex:0 0 32%;
	height: 175px;
	background: #f7f7f7;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.about .bottom .item p:first-child{
	color:#10141F;
	font-weight: 900;
	font-size: 60px;
}

.about .bottom .item p:first-child span{
	color: #8e7ff0;
}
.about .bottom .item p:last-child{
	opacity: 0.8;
	font-weight: 700;
	font-size: 18px;
	line-height: 133%;
	text-align: center;
	color:#525252;
}

.work{
	padding-top: 70px;
	padding-bottom: 70px;
}

.work .top{
	margin-bottom: 44px;
}

.work .title h2{
	color:#10141F;
}
.review > p{
	margin: 14px 0;
	font-weight: 700;
	font-size: 20px;
	color:#10141F;
	line-height: 120%;
}
.review{
	border-radius: 40px;
	padding: 14px 29px;
	width: 480px;
	height: 275px;
	margin-right: 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
	background: #f7f7f7;
}
.review .bottom{
	display: flex;
	align-items: center;
}

.review .bottom img{
	margin-right:16px;
	display: block;
	width:40px;
}

.review .bottom p:first-child{
	font-size: 18px;
	font-weight: 700;
	font-size: 20px;
	color:#10141F;
	margin-bottom: 3px;
}

.review .bottom p:last-child{

	font-weight: 700;
	font-size: 16px;
	line-height: 130%;
	letter-spacing: 0.01em;
	color: #92929d;
}
.features{
	padding-top: 70px;
	padding-bottom: 70px;
	background: linear-gradient(180deg, #0c1019 0%, #10141f 100%);
    overflow: hidden;
}

.features:before{
	content:"";
	width:1278px;
	height:712px;
	background-image: url(./img/features.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
}

.features:after{
	content:"";
	width:1048px;
	height:673px;
	background-image: url(./img/features-after.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	right: 0;
	bottom: 0;
}
.features .title{
	margin-bottom: 44px;
}

.features .blocks{
	display: flex;
	justify-content: space-between;
}

.features .blocks .left{
	flex:0 0 66%;
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}

.features .blocks .left .item:first-child,
.features .blocks .left .item:nth-child(2){
	flex:0 0 49%;
	margin-bottom: 20px;
	min-height: 308px;
}

.features .blocks > .item{
	flex:0 0 33%;
}
.features .item{
	background: rgba(248, 248, 248, 0.05);
	border-radius: 32px;
	padding: 37px 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.features .blocks .left .item:last-child{
	flex:0 0 100%;
	flex-direction: row;
    align-items: center;
}

.features .blocks .left .item:last-child div{
	display: flex;
	align-items: center;
    justify-content: space-between;
    width: 100%;
}

.features .blocks .left .item:last-child  img{
	margin-right: 32px;
	display: block;
}
.features .blocks .left .item:last-child div span{
	margin-bottom: 0;
}
.features .blocks .left .item:last-child div p{
	flex:0 0 50%;
}
.features .item span{
	display: block;
	font-weight: 700;
	font-size: 35px;
	line-height: 113%;
	color: #fff;
	margin-bottom: 18px;
}


.features .item p{
	font-weight: 700;
	font-size: 18px;
	color: #c7c7c7;
}

.flexibility{
	background: linear-gradient(180deg, #0c1019 0%, #10141f 100%);
	overflow: hidden;
	color:#fff;
	padding-top:80px;
	padding-bottom: 150px;
}

.flexibility .right span{
	font-weight: 900;
	color: #8e7ff0;
}
.flexibility:before{
	content:"";
	width:1278px;
	height:397px;
	background-image: url(./img/footer-bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
}

.flexibility:after{
	content:"";
	width:1336px;
	height:307px;
	background-image: url(./img/flex.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
    left: 0;
	bottom: 0;
	z-index: 0;
}

.search{
	padding-top: 110px;
	padding-bottom: 80px;
	padding-left: calc(((100% - 1263px)/2) + 10px);
}
.reviews{
	padding-left: calc(((100% - 1263px)/2) + 10px);

}
.search:after{
	content:'';
	position: absolute;
	right: 0;
	bottom: 0;
	height:90%;
	width:100%;
	z-index: 0;
	background-image: url(./img/ads.png);
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}
.search .title h2{
	color:#10141F;
	max-width: 540px;
	margin-bottom: 14px;
}
.search .left{
	max-width: 570px;
	z-index: 2;
}

.search p{
	color: #525252;
	font-weight: 700;
	font-size: 20px;
	line-height: 133%;
}

.marketing{
	background: linear-gradient(180deg, #0c1019 0%, #10141f 100%);
	overflow: hidden;
	color:#fff;
	padding-top:80px;
	padding-bottom: 100px;
}
.marketing:before{
	content:"";
	width:1278px;
	height:397px;
	background-image: url(./img/footer-bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
}

.marketing:after{
	content:"";
	width:647px;
	height:153px;
	background-image: url(./img/marketing.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
    left: calc(50% - 376px);
	bottom: 0;
	z-index: 0;
}

.marketing .wrapper, .flexibility .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1;
}

.marketing .right, .flexibility .right{
	max-width: 590px;
	font-weight: 700;
	font-size: 20px;
	line-height: 133%;
	color: #fff;
}
.cases{
	padding-top: 60px;
	padding-bottom: 70px;
}

.cases .title h2{
	color:#10141F;
}

.cases .top,
.work .top{
	margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.your-class-arrow img,
.your-class img{
	cursor: pointer;
	display: block;
}

.your-class-arrow img:last-child,
.your-class img:last-child{
	margin-left: 35px;
}
.your-class-arrow,
.your-class{
	display: flex;
	align-items: center;
}
.case{
	background: #f7f7f7;
	border-radius: 40px;
	padding: 14px 29px 0;
	height: 449px;
	display: flex;
	align-items: center;
}
.case img{
	max-height: 100%;
	display: block;
}
.case .right p{
	margin-bottom: 27px;
	font-size: 22px;
	line-height: 111%;
	letter-spacing: -0.01em;
	color:#525252;
}
.case h3{	
	font-weight: 900;
	font-size: 25px;
	line-height: 113%;
	letter-spacing: -0.01em;
	color:#10141F;
	margin-bottom: 9px;
}
.case .right p strong{
	font-weight: 900;
	color:#10141F;
}
.case .right div{
	border-radius: 24px;
    padding: 0 24px;
	width: 435px;
	height: 62px;
	line-height: 62px;
	text-align: center;
	font-weight: 700;
	font-size: 22px;
	color: #fff;
	background: #8e7ff0;
}
.footer{
	background: linear-gradient(180deg, #0c1019 0%, #10141f 100%);
	overflow: hidden;
	color:#fff;
	padding-top:80px;
	padding-bottom: 35px;
}
.footer:before{
	content:"";
	width:1278px;
	height:397px;
	background-image: url(./img/footer-bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 0;
}

.footer .top{
	margin-bottom: 74px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer .top a{
	background: #8e7ff0;
	border-radius: 24px;
    max-width: 317px;
    width: 100%;
	height: 78px;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-weight: 700;
	font-size: 22px;
	color: #fff;
	text-decoration: none;
}

.footer .bottom{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.footer .bottom > p{
	font-weight: 700;
	font-size: 18px;
	line-height: 175%;
	color: rgba(255, 255, 255, 0.49);
}

.footer .bottom .right p,
.footer .bottom .right a{
	font-weight: 700;
	font-size: 20px;
	line-height: 157%;
	text-align: right;
	color: rgba(255, 255, 255, 0.49);
	text-decoration: none;
}
.footer .bottom .right a:hover{
	text-decoration: underline;
}
@media (max-width:1263px){
	
	.search,
	.reviews{
		padding-left: 10px;
	}
	.search:after {
		height: 66%;
	}
}
@media (max-width:1180px){
	.case img {
		max-width: 450px;
	}
	.case{
		align-items: flex-end;
	}
	.features .blocks{
		flex-wrap: wrap;
	}
	.features .blocks > .item,
	.features .blocks .left{
		flex:0 0 100%;
	}
	.features .blocks .left{
		margin-bottom: 20px;
	}
	.features .blocks > .item{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.search:after {
        opacity: 0.4;
    }
	
	.features .blocks > .item div{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		display: flex;
		width: 100%;

	}
	.features .blocks > .item div p {
		flex: 0 0 50%;
	}
	.features .blocks > .item img{
		margin-right: 32px;
	}
	.features .blocks > .item span{
		margin-bottom: 0;
	}
}

@media(max-width:960px){
	h1 {
		margin: 200px auto 30px;
	}
	.case {
        align-items: center;
        text-align: center;
        flex-direction: column;
        height: auto;
    }
	.case .right div {
		margin: 0 auto 20px;
	}
	.case img {
        max-width: 450px;
        margin-bottom: 20px;
        width: 100%;
    }
	
	.about .top {
		align-items: flex-start;
		flex-direction: column;
	}
	.about .top p,
	.marketing .right, .flexibility .right {
		max-width: none;
		margin-top: 20px;
	}
	.footer .top a{
		margin-top: 20px;
	}
	.about .bottom {
		flex-direction: column;
	}
	.about .bottom .item {
		margin-bottom: 10px;
		flex: auto;
	}
	.marketing .wrapper, .flexibility .wrapper, .footer .top{
		flex-direction: column;
        align-items: flex-start;
	}
	.footer .bottom{
		flex-direction: column-reverse;
        align-items: flex-start;
	}
	.footer .bottom > p{
		margin-top: 20px;

	}
	.footer .bottom .right p, .footer .bottom .right a{
		text-align: left;
	}
	.marketing:before, .flexibility:before, .footer:before {
		content: "";
		width: 100%;
		height: 100%;
		background-size: cover;
	}
	.flexibility:after {
		width: 100%;
        height: 170px;
        background-size: cover;
        background-position: 26%;
	}
}
@media (max-width:750px){
	h1 {
        max-width: 600px;
        font-size: 60px;
    }
	.cases .top ,
	.work .top{
		flex-direction: column;
		align-items: flex-start;
	}
	.your-class-arrow,
	.your-class{
		margin-top: 20px;
	}
	.search{
		padding-bottom: 250px;
	}
	.search:after {
        opacity: 1;
        height: 220px;
    }

	.features .item{
		flex-direction: column !important;
		flex:0 0 100% !important;
		align-items: flex-start !important;
		min-height:unset !important;
	}
	.features .blocks .left .item:last-child div,
	.features .blocks > .item div {
		display: block;
	}
	.features .item span{
		margin-bottom: 18px !important;
	}
	.features .item img{
		margin-bottom: 30px;

	}
}
@media (max-width:500px){
	.main{
		
		background-position: left;
	}
	h1{
		
        font-size: 44px;
        margin: 134px auto 30px;
	}
	.case .right div {
		padding: 7px 24px;
		width: 100%;
		height: auto;
		line-height: 1.2;
        font-size: 20px;
	}
	.case .right p {
		
		margin-bottom: 20px;
		font-size: 16px;
	}
	.review {
		width: 320px;
		height: auto;
	}
	.review > p{
		font-size: 16px;
	}
}
@media (max-width:400px){
	.features .item {
		padding: 20px 15px;
	}
	.title h2 {
		font-size: 36px;
	}
	
	.footer .bottom > p{
        font-size: 15px;

	}
	.search{
		padding-bottom: 210px;
	}
	.search:after{
		width:320px;
		height:200px;
	}
	.review {
		width: 300px;
	}
}