/* Start:/local/templates/web2024/components/bitrix/news/portfolio-page/bitrix/news.detail/.default/style.css?17828043508810*/
.project-detail{
	display: flex;
	flex-direction: column;
	gap: var(--gap2);
}
.project-detail__header-title{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	align-items: center;
}
.project-detail__header{
	--gap-card: 30px;
	--header-height: 420px;
	--padding: 40px;
	position: relative;
	width: 100%;
	height: var(--header-height);
	color: white;
	display: flex;
	flex-direction: column;
	gap: var(--gap-card);
	z-index: 1;
	text-decoration: none;
	transition-duration: 0.3s;
	border-radius: 30px;
	overflow: hidden;
}
.project-detail__header h1{
	margin: 0;
}
.project-detail__header-bg{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.project-detail__header-text{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	padding: var(--padding);
	display: flex;
	flex-direction: column;
	gap: var(--gap-card);
}
.project-detail__header-text:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 70%);
}
.next-project{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}
.project-detail__nav{
	--gap-card: 30px;
	--header-height: 420px;
	--padding: 40px;
	position: relative;
	width: 100%;
	height: var(--header-height);
	color: white;
	display: flex;
	flex-direction: column;
	gap: var(--gap-card);
	z-index: 1;
	text-decoration: none;
	transition-duration: 0.3s;
	border-radius: 30px;
	overflow: hidden;
}
.project-detail__nav:hover{
	transform: scale(1.05);
}
.project-detail__nav-bg{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.project-detail__nav-text{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	padding: var(--padding);
	display: flex;
	flex-direction: column;
	gap: var(--gap-card);
}
.project-detail__nav-text:before{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 70%);
}

.project-detail__text{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}
.project-detail__gallery{
	display: grid;
	grid-template-columns: 1fr;
	padding: 50px 10px;
	gap: 20px;
	border-radius: 30px;
}
.project-detail__gallery-item img{
	width: 100%;
	height: auto;
	border-radius: 30px;
}
.project-detail__first{
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}
.project-detail__tasks{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.project-detail__tasks .border-block{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.project-detail__titles{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.project-detail__cards{
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.project-detail__card{
	display: flex;
	flex-direction: column;
	gap: 0;
	border-radius: 30px;
	border: 1px solid var(--dark-gray);
	overflow: hidden;
}
.project-detail__card-img{
	height: auto;
	width: 100%;
	object-fit: cover;
	border-bottom: 1px solid var(--dark-gray);
	background: var(--gray);
}
.project-detail__card-text{
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px;
}
.project-detail__mobile-video{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: auto;
	width: fit-content;
}
.project-detail__mobile-video-iphone{
	max-width: 330px;
	height: auto;
	position: relative;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
}
.project-detail__mobile-video-video{
	position: absolute;
	top: 7.5%;
    right: 4%;
    bottom: 1%;
    left: 4%;
	z-index: 1;
	border-radius: 30px;
	overflow: hidden;
	border: 1px solid var(--gray);
}

.project-detail__pic-under-title {
	max-width: 600px;
	margin: 0 auto;
}

@media screen and (min-width: 1200px){
	.project-detail__mobile-video-iphone{
		opacity: 1;
	}
	.project-detail__mobile-video-video{
		border-radius: 0px;
	}
}


.project-detail__mobile-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*.project-detail__mobile-video:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-image: url(/local/templates/web2024/img/iPhone-black.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}*/

.project-detail__pc-video{
	display: flex;
	width: 100%;
	align-items: center;
	position: relative;
}
.project-detail__pc-video-macbook{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 2;
	pointer-events: none;
}
.project-detail__pc-video-video{
	position: absolute!important;
    top: 5.3%;
    right: 10.3%;
    left: 10%;
    bottom: 12%;
	z-index: 1;

}
.project-detail__pc-video-video video{
	width: 100%;
}
.old-gallery{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	align-items: center;
	justify-content: center;
}
.old-gallery h2{
	margin: 0;
}
.old-gallery img{
	width: 100%;
	max-width: 1200px;
	border: 2px solid var(--dark-gray);
}
.old-gallery__item{
	display: flex;
	flex-direction: column;
	gap: var(--gap2);
	align-items: center;
	justify-content: center;
}
.old-video{
	display: flex;
	justify-content: center;
}
.old-video .simple-video{
	max-width: 1200px;
}
.old-video video{
	border-radius: 30px;
}

.project-detail__text ul, .project-detail__text ol{
    padding-left: 0;
    list-style: none;
    counter-reset: li;
}
.project-detail__text li{
    position: relative;
    padding-left: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dark-gray);
    margin-bottom: 10px;
}
.project-detail__text li:last-child{
    border-bottom: 0px solid transparent;
}
.project-detail__text ol li:before {
    counter-increment: li; /* Инкрементирует счётчик*/
    content: counter(li);
    position: absolute;
    bottom: 0px;
    left: 7px;
    color: var(--main-color, #5737C9);
    /* Design 2024/h5 */
    font-family: Montserrat;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 39px */
}
.project-detail__text ul li:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 7px;
    width: 20px;
    height: 20px;
    background: var(--gradient);
    border-radius: 100px;
}
.project-detail__text li :first-child{
    margin-top: 0;
}
.project-detail__text li :last-child{
    margin-bottom: 0;
}
.responsive-block{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	gap: var(--gap);
}
.responsive-block img{
	width: 100%;
	height: auto;
	max-width: fit-content;
}
.responsive-block .col-md-3{
	
}
.responsive-block .col-md-4{
}
.responsive-block .col-md-6{
	width: 100%;
}
.responsive-block .col-md-12{
	width: 100%;
}
@media screen and (min-width: 1200px){
	.next-project{
		padding: 0 200px;
	}
	.project-detail__header-title{
	}
	.project-detail__header{
		--gap-card: 30px;
		--header-height: 550px;
		--padding: 40px;
		margin-bottom: 80px;
	}
	.project-detail__nav{
		--gap-card: 30px;
		--header-height: 550px;
		--padding: 40px;
	}
	.project-detail__gallery{
		grid-template-columns: 1fr 1fr 1fr;
		padding: 150px 90px;
		gap: 100px;
	}
	.project-detail__gallery-item:nth-child(2n){
		margin-top: 50px;
	}
	.project-detail__first{
		grid-template-columns: 1fr 1fr;
		gap: 50px;
	}
	.project-detail__tasks{
		gap: 30px;
	}
	.project-detail__tasks .border-block{
		gap: 20px;
	}
	.project-detail__titles{
		gap: 10px;
	}
	.project-detail__cards{
		grid-template-columns: 1fr 1fr 1fr;
		gap: 50px;
	}
	.project-detail__card-img{
		height: auto;
	}
	.project-detail__card-text{
		padding: 40px 20px;
	}
	.project-detail__mobile-video video{
		/*max-width: 310px;*/
	}
	.project-detail__text li{
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
	.responsive-block .col-md-6{
		width: calc(50% - calc(var(--gap) / 2));
		max-width: fit-content;
	}
	.responsive-block .col-md-12{
		width: 100%;
	}
}

/*old css*/

.img_responsive_iphone__screen{
	max-width: fit-content;
}
.container:has(.col-md-4), .container:has(.col-md-6), .container .row{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}
.col-md-12 img, .col-lg-10 img{
	display: block;
	margin: auto;
	width: 80% !important;
}
.col-md-10, img{
	max-width: 100%;
}
.text-center{
	text-align: center;
}
/* End */
/* /local/templates/web2024/components/bitrix/news/portfolio-page/bitrix/news.detail/.default/style.css?17828043508810 */