.banner{
	background: url('/bitrix/templates/cpk-abc/images/banner-new.jpg')no-repeat 50%;
	background-size: cover;
	height: 830px;
	width: 100%;
}
.banner__wrapper{
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 40px 0;
}
.banner__h1{
	margin: 0;
	font-weight: 400;
	font-size: 80px;
	line-height: 80%;
	letter-spacing: -0.05em;
	color: #fff;
	max-width: 965px;
}
.banner__preview{
	margin: 40px 0 0 0;
	max-width: 500px;
	font-size: 16px;
	line-height: 110%;
	letter-spacing: -0.05em;
	color: #fff;
}
.banner__search{
	width: 100%;
    max-width: 900px;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 5px 5px 5px 30px;
}
.banner__search-inp{
	width: 100%;
	height: 100%;
    font-weight: 500;
    font-size: 22px;
    line-height: 100%;
    letter-spacing: -0.04em;
    margin: 0;
    padding: 0;
    border: none;
}
.banner__search-btn{
	font-weight: 500;
	font-size: 22px;
	line-height: 100%;
	padding: 25px 40px;
	margin-left: 20px;
}
.banner__btns{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px 30px;
	margin-bottom: 50px;
}
.banner__btns-phone{
	color: #fff;
    font-weight: 600;
    font-size: 36px;
    line-height: 110%;
    letter-spacing: -0.05em;
    transition: 0.3s;
}
.banner__btns-phone:hover{
	color: #d09edc;
}
.banner__btns-zvonok{
	font-size: 24px;
    padding: 20px 30px;
}
.reference{
	padding: 40px;
	background: url('/bitrix/templates/cpk-abc/images/reference-banner.jpg')no-repeat 50%;
	background-size: cover;
	height: 645px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #fff;
}
.reference__title{
	max-width: 800px;
	color: #fff;
}
.reference__title span{
	color: #d09edc;
}
.reference__text{
	margin: 40px 0 0 0;
	max-width: 500px;
	font-weight: 500;
	font-size: 22px;
	line-height: 100%;
	letter-spacing: -0.04em;
}
.reference__text span{
	color: #d09edc;
	font-weight: 600;
}
.advantages{
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	height: 550px;
}
.advantages__banner,
.advantages__list{
	width: calc(50% - 5px);
}
.advantages__banner{
	display: flex;
	flex-direction: column;
	padding: 38px;
	background: var(--color-violet);
	color: #fff;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.advantages__banner::before{
	position: absolute;
	content: '';
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: url('/bitrix/templates/cpk-abc/images/advantages-map-pic.svg')no-repeat 50%;
	background-size: contain;
	width: 720px;
	height: 426px;
	z-index: -1;
}
.advantages__banner-preview{
	margin: 0;
	font-weight: 500;
	font-size: 22px;
	line-height: 100%;
	letter-spacing: -0.04em;
	flex-grow: 2;
}
.advantages__banner-title{
	margin-top: 40px;
	color: #fff;
}
.advantages__banner-title span{
	color: #d09edc;
}
.advantages__banner-text{
	margin-top: 25px;
	font-weight: 600;
	font-size: 16px;
	line-height: 110%;
	letter-spacing: -0.02em;
}
.advantages__banner-text a{
	color: #fff;
}
.advantages__banner-text a::before{
	background: #fff;
}
.advantages__list{
	padding: 20px;
	background: #f6f6f6;
	display: grid; 
  	grid-template-columns: 1fr 1fr; 
  	grid-template-rows: 1fr 1fr; 
  	gap: 20px 20px; 
  	grid-template-areas: 
    	"advantages__item1 advantages__item2"
    	"advantages__item3 advantages__item4"; 
  	justify-content: center; 
  	justify-items: stretch;
}
.advantages__item1{ 
	grid-area: advantages__item1; 
}
.advantages__item2{ 
	grid-area: advantages__item2; 
}
.advantages__item3{ 
	grid-area: advantages__item3; 
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.advantages__item4{ 
	grid-area: advantages__item4; 
}
.advantages__item1,
.advantages__item2,
.advantages__item4{
	background: #fff;
	padding: 20px 55px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.advantages__item-title{
	margin: 0;
}
.advantages__item-text{
	margin: 20px 0 0 0;
	font-weight: 500;
	font-size: 22px;
	line-height: 100%;
	letter-spacing: -0.04em;
}
.advantages__item-link{
	width: 100%;
}
.reference__proizvodstvo{
	background: url('/bitrix/templates/cpk-abc/images/reference-banner-proizvodstvo.jpg')no-repeat 50%;
	background-size: cover;
}
@media(max-width: 1600px){
	.banner{
		height: 670px;
	}
	.banner__h1 {
	    font-size: 60px;
	    max-width: 800px;
	}
	.banner__preview{
		margin: 35px 0 0 0;
	}
	.banner__search{
		max-width: 800px;
	}
	.banner__search-btn,
	.banner__search-inp,
	.reference__text,
	.advantages__banner-preview,
	.advantages__item-text{
		font-size: 20px;
	}
	.banner__search-btn{
	    padding: 20px 40px;
	}
	.reference,
	.advantages__banner{
		padding: 30px;
	}
	.reference{
		height: 540px;
	}
	.advantages{
		margin-top: 15px;
		height: 480px;
	}
	.advantages__list{
		padding: 15px;
		gap: 15px 15px;
	}
	.advantages__item1, .advantages__item2, .advantages__item4{
		padding: 15px 35px;
	}
	.banner__btns-phone{
		font-size: 32px;
	}
	.banner__btns-zvonok {
	    font-size: 20px;
	    padding: 15px 30px;
	}
}
@media(max-width: 1500px){
	.banner {
        height: 580px;
    }
    .banner__h1 {
        font-size: 48px;
        max-width: 650px;
    }
    .banner__preview {
        margin: 30px 0 0 0;
        font-size: 15px;
    }
    .banner__search-btn, 
    .banner__search-inp, 
    .reference__text, 
    .advantages__banner-preview, 
    .advantages__item-text {
        font-size: 16px;
    }
    .banner__search-btn {
        padding: 16px 33px;
    }
    .banner__search {
        max-width: 650px;
        padding-left: 20px;
    }
    .reference, .advantages__banner {
        padding: 25px;
    }
    .reference,
    .advantages {
        height: 430px;
    }
    .advantages__list {
        padding: 10px;
        gap: 10px;
    }
    .advantages__item1, 
    .advantages__item2, 
    .advantages__item4 {
        padding: 12px 25px;
    }
    .banner__btns {
	    gap: 15px 25px;
	    margin-bottom: 35px;
	}
    .banner__btns-phone {
        font-size: 26px;
    }
    .banner__btns-zvonok {
        font-size: 18px;
        padding: 12px 20px;
    }
}
@media(max-width: 1349px){
	.banner {
        height: 530px;
    }
    .banner__h1 {
        font-size: 40px;
        max-width: 530px;
    }
    .banner__preview {
        margin: 20px 0 0 0;
        font-size: 14px;
    }
    .banner__search-btn, .banner__search-inp, .reference__text, .advantages__banner-preview, .advantages__item-text {
        font-size: 15px;
    }
    .banner__search-btn {
        padding: 12px 25px;
    }
    .banner__search{
    	width: 585px;
    }
    .reference, .advantages {
        height: 360px;
    }
    .reference, .advantages__banner {
        padding: 20px;
    }
    .reference__title {
	    max-width: 630px;
	}
	.advantages__item1, .advantages__item2, .advantages__item4 {
        padding: 12px 17px;
    }
    .advantages{
    	margin-top: 10px;
    }
    .banner__btns-phone {
        font-size: 22px;
    }
    .banner__btns-zvonok{
    	font-size: 16px;
    }
}
@media(max-width: 1199px){
	.banner__preview{
		max-width: 400px;
	}
	.banner__search {
        width: 520px;
    }
    .advantages{
    	flex-direction: column;
    	height: auto;
    }
    .advantages__banner, .advantages__list {
	    width: 100%;
	}
	.advantages__banner-title{
		margin-top: 80px;
	}
	.advantages__item-text{
		margin-top: 60px;
	}
	.advantages__item-link{
		padding: 15px 18px;
	}
}
@media(max-width: 991px){}
@media(max-width: 767px){
	.banner__h1 {
        font-size: 32px;
        max-width: 410px;
    }
    .banner {
        height: 475px;
        background-image: 
	        radial-gradient(141.62% 74.15% at 71.28% 84.42%, rgba(0, 0, 0, 0) 38.36%, #000 100%),
	        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
	        url('/bitrix/templates/cpk-abc/images/banner-new.jpg');
        background-position: 70% 50%;
    }
    .reference{
    	height: auto;
    }
    .reference__text{
    	margin-top: 100px;
    }
    .banner__btns{
    	margin-bottom: 15px;
    }
    .banner__btns-phone {
        font-size: 20px;
    }
}
@media(max-width: 575px){
	.banner{
		border-radius: 0 0 15px 15px;
		height: 600px;
	}
	.banner__search{
		width: 100%;
		margin-top: auto;
	}
	.banner__search-btn{
		width: 48px;
		height: 48px;
		min-width: 48px;
		padding: 0;
		background: var(--color-violet) url('/bitrix/templates/cpk-abc/images/btn-arrow-icon.svg')no-repeat 50%;
		background-size: 15px 15px;
	}
	.banner__search-btn span{
		display: none;
	}
	.banner__wrapper{
		justify-content: flex-start;
		padding: 90px 0 10px 0;
	}
	.banner__h1{
		font-size: 38px;
		flex-grow: 2;
	}
	.banner__preview{
		font-size: 16px;
	}
	.banner__search {
        max-width: 650px;
        padding-left: 15px;
    }
    .reference, .advantages__banner {
        padding: 20px 15px;
    }
    .advantages__banner-title br{
    	display: none;
    }
    .advantages__list{
    	gap: 5px;
    	grid-template-rows: inherit;
    	grid-template-areas: "advantages__item1 advantages__item2"
							 "advantages__item4 advantages__item4"
							 "advantages__item3 advantages__item3";
    }
    .banner__btns {
        margin-bottom: 0;
        gap: 15px 20px;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 20px;
    }
    .banner__btns-zvonok{
    	padding: 12px 20px 13px 20px;
    }
    .banner__btns-phone{
    	font-size: 24px;
    }
    .banner__btns-zvonok{
    	padding: 12px 30px 13px 30px;
    	width: 100%;
    }
}
@media(max-width: 374px){
	.banner__h1 {
        font-size: 32px;
    }
    .h1, .h2 {
        font-size: 26px;
    }
}