/*  Спецификация  */
@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/HelveticaNeueCyr-Roman.eot'); /* IE9 Compat Modes */
	src: url('../fonts/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/HelveticaNeueCyr-Roman.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/HelveticaNeueCyr-Roman.woff') format('woff'), /* Pretty Modern Browsers */
		url('../fonts/HelveticaNeueCyr-Roman.ttf')  format('truetype'), /* Safari, Android, iOS */
		url('../fonts/HelveticaNeueCyr-Roman.svg#svgFontName') format('svg'); /* Legacy iOS */
	font-weight: normal;
}

@font-face {
	font-family: 'Helvetica Neue';
	src: url('../fonts/HelveticaNeueCyr-Bold.eot'); /* IE9 Compat Modes */
	src: url('../fonts/HelveticaNeueCyr-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('../fonts/HelveticaNeueCyr-Bold.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/HelveticaNeueCyr-Bold.woff') format('woff'), /* Pretty Modern Browsers */
		url('../fonts/HelveticaNeueCyr-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
		url('../fonts/HelveticaNeueCyr-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
	font-weight: bold;
}

body {
	font-size: 16px;
	font-weight: normal;
}

button,
button:hover,
button:focus {
	font-family: inherit;
	outline: none;
	border: none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	color: #242f51;
	line-height: 1.2em;
}

p {
	color: #616368;
}

ul, li {
	display: block;
	padding: 0;
	margin: 0;
}

a {
	color: #2500f9;
}

a:hover {
	text-decoration: none;
}

.btn {
	border-radius: 29px;
	background-color: #2500f9;
	color: #fff;
	font-weight: bold;
	padding: 17px 0;
	display: block;
	width: 170px;
	text-align: center;
	transition: all 0.5s ease;
}

.btn:hover {
	background: #5100ff;
	color: #fff;
	box-shadow: 0 8px 20px rgb(37 0 249 / 25%);
}

.btn:active {
	background: #1c00bf;
	box-shadow: none
}

.section-title__heading {
	font-size: 36px;
	margin-bottom: 15px;
	width: 404px;
}

.app-screen, .design-img {
	transition: all 0.5s ease;
}

section:hover .app-screen,
header:hover .app-screen,
section:hover .design-img {
	transform: scale(1.02) ;
	-webkit-transform: scale(1.02) ;
	-moz-transform: scale(1.02) ;
}


/*  Первый экран  */

.header {
	background: #fdfdfe url('../img/header-bg.png') repeat-x center bottom;
	padding-top: 92px;
	padding-bottom: 25px;
}

.logo {
	display: block;
	background: url('../img/logo.png');
	width: 118px;
	height: 28px;
}

.menu{
	column-gap: 40px;
}

.menu__link {
	color: #242f51;
}

.offer {
	max-width: 495px;
}
.offer__added {
	font-size: 18px;
	font-weight: bold;
	color: #242f51;
	border-radius: 18px;
	background-color: #e2eaed;
	width: 250px;
}
.offer__added::before {
	content:'';
	display: block;
	background: #feaa25 url('../img/done.svg') no-repeat center center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	margin-right: 8px;
}
.offer__title {
	font-size: 60px;
}
.offer__text {
	font-size: 18px;
	margin-top: 23px;
}
.offer__btns {
	column-gap: 20px;
	margin-top: 38px;
}
.offer__btn {
	display: inline;
    width: auto;
    padding: 17px 40px;
}
.offer__btn_primary {
	transition: all 0.5s ease;
}
.offer__btn_primary::after {
	content:'';
	display: block;
	background: url('../img/arrow.png');
	width: 25px;
	height: 13px;
	margin-left: 11px;
	transition: all 0.5s ease;
}
.offer__btn_primary:hover {
	padding: 17px 38px;
}
.offer__btn_primary:hover::after {
	margin-left: 15px;
}
.offer__btn_secondary {
	background: none;
	color: #2500f9;
}

.app-screen_header {
	max-width: 446px;
	width: auto;
	height: 816px;
	margin-top: 19px;
	background: url('../img/app-screen-1.svg') no-repeat center center / contain;
}


/*  Клиенты  */

.trusted {
	padding-top: 111px;
}

.desc-text {
	margin-bottom: 30px;
	color: #242f51;
	text-align: center;
}

.client {
	display: block;
	text-align: center;
	transition: all 0.5s ease;
}

.client:hover {
	opacity: 0.8
}

/*  Функции  */

.features {
	padding-top: 155px;
	overflow: hidden;
}

.app-screen_features {
	max-width: 665px;
	width: 135%;
	height: 839px;
	background: url('../img/app-screen-2.svg') no-repeat center center / contain;
	margin-left: -154px;
}

.specs {
	display: flex;
	flex-direction: column;
	width: 354px;
	margin-top: 85px;
	row-gap: 30px;
}

.specs-item__icon {
	width: 88px;
	height: 88px;
	border-radius: 50%;
}

.specs-item__icon_speed {
	background: #ffecef url('../img/speed.svg') no-repeat center center;
}
.specs-item__icon_proto {
	background: #f4f4ff url('../img/prototyping.svg') no-repeat center center;
}
.specs-item__icon_vector {
	background: #e4ffee url('../img/vector.svg') no-repeat center center;
}
.specs-item__wrapper {
	width: 235px;
}
.specs-item__title {
	font-size: 20px;
}
.specs-item__title_red {
	color: #f55767;
}
.specs-item__title_blue {
	color: #2563ff;
}
.specs-item__title_green {
	color: #40975f;
}
.specs-item__text {}

/*  Джекпоты  */

.jackpots {
	padding-top: 114px
}

.section-title_features {
	width: 385px;
	margin-top: 48px;
}
.jackpots-text {
	border-left: 1px solid rgba(75,74,72,0.39);
	padding: 33px 0 33px 47px;
	margin-bottom: 109px;
}

.specs-item__icon_bill {
	background: #ffecef url('../img/bill.svg') no-repeat center center;
	margin-bottom: 32px;
}
.specs-item__icon_network {
	background: #f4f4ff url('../img/network.svg') no-repeat center center;
	margin-bottom: 32px;
}
.specs-item__icon_badge {
	background: #e4ffee url('../img/badge.svg') no-repeat center center;
	margin-bottom: 32px;
}

/*  Дизайн  */

.tech {
	padding-top: 113px;
}

.design-img {
	background: url('../img/multi-tasking.svg') no-repeat center center / contain;
	width: 110%;
	max-width: 598px;
	height: 547px;
	margin-left: -89px;
}

.section-title_tech {
	padding-right: 82px;
}

.section-title__text_tech {
	margin: 25px 0 30px;
}

/*  Футер  */

.footer {
	margin-top: 103px;
	padding: 116px 0 160px;
	background: #09142e;
}

.logo_footer {
	background: url('../img/logo-footer.png');
}

.menu_footer .menu__link {
	color: #fff;
}

.menu_footer {
	margin-top: 50px;
}

.socials {
	margin-top: 40px;
	column-gap: 24px;
}

.socials__link {
	width: 27px;
	height: 23px;
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	transition: all 0.5s ease;
}
.socials__link:hover {
	opacity: 0.5
}
.socials__link_fb {
	background-image: url('../img/facebook.png');
}
.socials__link_tw {
	background-image: url('../img/twitter.png');
}
.socials__link_sl {
	background-image: url('../img/slack.png');
}

.credits-text {
	color: #2c364c;
	text-align: center;
	margin-top: 103px;
}

/*  Responsive  */

@media (max-width: 1200px) {
	.design-img {
		margin-left: 0;
		width: 100%;
	}
	.app-screen_features {
		margin-left: 0;
		width: 100%;
	}
}

@media (max-width: 992px) {
	.menu {
		margin-top: 30px;
	}
	.btn-header {
		margin-left: 0 !important;
		margin-top: 30px;
	}
	.offer {
		margin-top: 90px;
	}
	.app-screen_header {
		margin: 30px auto 0
	}
	.client, .desc-text {
		margin-bottom: 40px;
	}
	.features {
		padding-top: 50px;
	}
	.section-title_features {
		width: auto;
	}
	.specs {
		width: auto;
		column-gap: 50px;
	}

	.specs-item{
		column-gap: 24px;
	}
	
	.specs-item__wrapper {
		width: 100%;
	}
	.jackpots-text {
		padding: 0;
		border-left: 0;
		margin: 10px 0 80px;
		text-align: center;
	}

	.section-title__text{
		text-align: center;
	}

	.specs-item__icon{
		margin: 0 auto;
	}

	.specs-item__title{
		text-align: center;
		justify-content: center;
	}

	.specs-item__text {
		text-align: center;
	}

	.section-title_tech {
		padding-right: 0;
	}
	
	.design-img, .app-screen_features {
		margin: 0 auto
	}
	.section-title_tech {
		margin-top: 90px;
	}
}

@media (max-width: 768px) {
	.app-screen_features {
		height: 640px;
	}
	.tech {
		padding-top: 50px;
	}
	.section-title__heading {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 576px) {
	.menu_header, .btn-header {
		display: none !important;
	}
	.offer {
    	margin-top: 38px;
	}
	.offer__title {
		font-size: 40px;
	}
	.offer__btn_primary {
		margin-bottom: 20px;
		margin-right: 0;
	}
	.app-screen_header {
		height: 520px;
	}
	.specs-item__icon {
		margin-bottom: 32px;
	}
	.design-img {
		height: 300px;
	}
	.section-title_tech {
		padding-right: 0;
	}
	.menu__item:not(:last-of-type) {
		margin-right: 0;
	}
	.menu__item {
		margin-bottom: 20px;
	}
	.header {
		padding-top: 50px;
	}
	.app-screen_features {
		height: 440px;
	}
	.section-title__heading {
		font-size: 28px;
		
	}
}

@media (max-width: 400px) {
	.menu_header, .btn-header {
		display: none !important;
	}
	.offer {
	    margin-top: 50px;
	}
}