.projects_section{
	margin-top: 5vw;
}
.projects{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: 14vw;
	grid-gap: 2vw;
	margin-top: 2vw;
}
.projects .project{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	border-radius: 1.2vw;
	cursor: pointer;
	transition: .3s;
}
.projects .project .img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	object-position: top;
	border: 1px solid var(--main--background);
	z-index: 2;
	transition: inherit;
}
.projects .project h3{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 5;
	padding: 1.5vw;
	padding-bottom: 2vw;
	font-size: 1.6vw;
	transition: inherit;
	opacity: 0;
	transform: translateY(3vw);
}
.projects .project h3::before{
	content: '';
	height: 2px;
	border-radius: 5px;
	position: absolute;
	left: 1.5vw;
	bottom: 1.5vw;
	background: var(--main-horizontal-gradient);
	transition: inherit;
	transition-delay: .2s;
	width: 0;
}
.projects .project::before{
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #00000020, var(--main--background));
	content: '';
	z-index: 3;
	transition: inherit;
	left: 0;
	top: 0;
	z-index: 3;
	opacity: 0;
}
body.white_mode .projects .project{
	box-shadow: 10px 10px 30px #00000020;
}
body.white_mode .projects .project .img{
	border: none;
}
body.white_mode .projects .project::before{
	background: linear-gradient(180deg, #ffffff20, var(--main--white-background));
}
body.white_mode .single_project_background{
	background: var(--main--white-background);
}
body.white_mode .single_project_info>.info-cont::after,
body.white_mode  .single_project_info>.info-cont::before{
	background: var(--main--white-background);
}
body.white_mode .single_project_info>.info-cont .time_spend>img{
	filter: invert(1);
}
body.white_mode .projects .project.animation .img,
body.white_mode .single_project_info .img_mobile{
	box-shadow: 10px 10px 30px #00000020;
}
body.white_mode .single_project_info .info_section_subtitle{
	color: #4d4d4d;
}
body.white_mode .single_project_info .domain_adress{
	background: #ffffff;
	box-shadow: 5px 5px 30px  #00000020;
}
body.white_mode .single_project_info .domain_adress a{
	color: #222;
}
body.white_mode .single_project_info .btns{
	background: var(--main--white-background);
}
/* body.white_mode .close{
	background: #ffffff;
	box-shadow: 5px 5px 30px  #00000020;
}
body.white_mode .close span{
	background: #222;
} */
.projects .project.fixed .img{
	position: fixed;
}
.projects .project.animation .img{
    height: 28vw!important;
    top: 9vw!important;
    width: 50vw!important;
    left: 45vw!important;
	z-index: 28;
}
.single_project_background{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 25;
	background: var(--main--background);
	opacity: 0;
	display: none;
	transition: .3s;
}
.single_project_background.display,
.single_project_info.display{
	display: block;
}
.single_project_background.active{
	opacity: 1;
}
.single_project_info{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 30;
	display: none;
	padding: 5vw;
	padding-top: 9vw;
	overflow: hidden;
	transition: .4s;
	opacity: 0;
}
.single_project_info.active{
	opacity: 1;
}
.single_project_info>.info-cont{
	width: 36%;
	height: 0%;
	position: relative;
	overflow: hidden;
	transition: height 1s;
}
.single_project_info>.info-cont>.info{
	width: 100%;
	height: 100%;
}
.single_project_info.active>.info-cont{
	height: 100%;
}
.single_project_info>.info-cont .time_spend{
	display: flex;
	align-items: center;
}
.single_project_info>.info-cont .time_spend>img{
	width: 1vw;
	margin-right: .5vw;
}
.single_project_info>.info-cont::after,
.single_project_info>.info-cont::before{
	content: '';
	position: absolute;
	left: 0;
	height: 12vw;
	width: 100%;
	background: #161513;
	filter: blur(1.5vw);
	transition: .3s;
	z-index: 20;
	transition-delay: .5s;
}
.single_project_info>.info-cont::after{
	bottom: 0;
	transform: translate(0, 50%) scale(2);
}
.single_project_info>.info-cont::before{
	top: 0;
	opacity: 0;
	transform: translate(0, -50%) scale(2);
}
.single_project_info>.info-cont .info{
	position: relative;
	z-index: 5;
}
.single_project_info.active>.info-cont::after{
	opacity: 0;
}
.single_project_info .domain_adress{
	border-radius: .8vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #353434;
	width: 36%;
	left: 32%;
	position: absolute;
	top: 3vw;
}
.single_project_info .domain_adress .copy {
	cursor: pointer;
	padding: .67vw 1.6vw;
}
.single_project_info .domain_adress .copy img{
	display: block;
	width: .9vw;
	transition: .2s;
}
.single_project_info .domain_adress a{
	padding: .67vw 1.6vw;
	display: block;
	text-decoration: none;
	font-size: .9vw;
	color: #fff;
	width: 28vw;
}
.single_project_info .domain_adress a span{
	color: #A9A9A9;
}
.single_project_info .info h2{
	font-size: 2.3vw;
	z-index: 25;
}
.single_project_info .info .main-text{
	font-size: 1vw;
}
.single_project_info .info_section_subtitle{
	font-size: 1vw;
	color: #B7B7B7;
	text-transform: uppercase;
	margin-top: 2vw;
	margin-bottom: .8vw;
}
.single_project_info .technologies_used_section{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.single_project_info .technologies_used_section .technology{
	display: flex;
	align-items: center;
	margin-right: 1.2vw;
}
.single_project_info .technologies_used_section .technology span{
	width: .8vw;
	height: .8vw;
	border-radius: 100%;
	margin-right: .3vw;
	margin-bottom: .1vw;
}
.single_project_info .technologies_used_section .technology .main-text{
	font-family: "popins-regular"; 
}
.single_project_info .technologies_used_section .technology span.html{
	background: #FF6D00;
}
.single_project_info .technologies_used_section .technology span.css{
	background: #039BE5;
}
.single_project_info .technologies_used_section .technology span.js{
	background: #FFD600;
}

.single_project_info .technologies_used_section .technology span.php{
	background: #a67fff;
}
.single_project_info .btns{
	position: fixed;
	z-index: 5;
	left: 5vw;
	bottom: 4vw;
	z-index: 25;
}
.single_project_info .btns>a{
	width: 12vw;
}
.single_project_info .img_mobile{
	position: absolute;
	right: -12vw;
	bottom: 4vw;
	width: 11vw;
	height: 20vw;
	object-fit: cover;
	object-position: top;
	border-radius: 1.5vw;
	border: 1px solid var(--border-color);
	transition: .4s;
}
.single_project_info.active .img_mobile{
	right: 2vw;
}
.close{
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5vw;
	height: 2.5vw;
	border-radius: 100%;
	background: #353434;
	z-index: 40;
	position: fixed;
	top: 3vw;
	right: 3vw;
	cursor: pointer;
	transition: .2s;
	opacity: 0;
}
.close.display{
	display: flex;
}
.close.active{
	opacity: 1;
}
.close span{
	width: 60%;
	height: 2px;
	transform: rotate(45deg);
	position: absolute;
	border-radius: 3px;
	background: #fff;
	transition: .2s;
}
.close span:first-child{
	transform: rotate(-45deg);
}

@media (hover: hover){
	.projects .project:hover h3{
		opacity: 1;
		transform: translate(0);
	}
	.projects .project:hover h3:before{
		width: calc(100% - 1.5vw * 2);
	}
	.projects .project:hover:before{
		opacity: 1;
	}
	.close:hover{
		transform: scale(1.1);
	}
	.close:hover span{
		background: var(--border-color);
	}
	.single_project_info .domain_adress .copy:hover img{
		filter: invert(.7);
	}
}


@media (min-width: 1920px) {
	.projects_section{
		margin-top: 96px;
	}
	.projects{
		grid-auto-rows: 268px;
		grid-gap: 38.4px;
		margin-top: 38px;
	}
	.projects .project{
		border-radius: 23px;
	}
	.single_project_info .info .main-text{
		font-size: 19px;
	}
	.projects .project h3{
		padding: 29px;
		padding-bottom: 38.4px;
		font-size: 29px;
		transform: translateY(58px);
	}
	.projects .project h3:before{
		left: 29px;
		bottom: 29px;
	}
	.projects .project.animation .img{
		height: 540px!important;
		top: 172px!important;
		width: 960px!important;
		left: calc(50vw - 96px)!important;
	}
	.single_project_info{
		max-width: 1920px;
		left: calc(50vw - 960px);
		padding: 96px;
		padding-top: 172px;
	}
	.single_project_info .domain_adress{
		border-radius: 16px;
		top: 58px;
	}
	.single_project_info .domain_adress .copy {
		padding: 13px 30px;
	}
	.single_project_info .domain_adress .copy img{
		width: 18px;
	}
	.single_project_info .domain_adress a{
		padding: 12px 30px;
		font-size: 18px;
		width: 540px;
	}
	.single_project_info .info h2{
		font-size: 45px;
	}
	.single_project_info .info_section_subtitle{
		font-size: 19px;
		margin-top: 38.4px;
		margin-bottom: 16px;
	}
	.single_project_info .technologies_used_section .technology{
		margin-right: 23px;
	}
	.single_project_info .technologies_used_section .technology span{
		width: 16px;
		height: 16px;
		margin-right: 6px;
		margin-bottom: 2px;
	}
	.single_project_info .btns{
		left: calc(50vw - 864px);
		bottom: 80px;
	}
	.single_project_info .btns>a{
		width: 230px;
	}
	.single_project_info .img_mobile{
		bottom: 80px;
		width:  211px;
		height: 385px;
		border-radius: 29px;
	}
	.single_project_info.active .img_mobile{
		right: 38.4px;
	}
	.close{
		width: 50px;
		height: 50px;
		top: 58px;
		right: unset;
		left: calc(50vw + 850px) ;
	}
}
@media (hover: hover) and (min-width: 1920px){
	.projects .project:hover h3:before{
		width: calc(100% - 29px * 2);
	}
}

@media (max-aspect-ratio: 1.4/1) and (min-width: 480px){

	.projects .project.animation .img {
			height: 43.2vh !important;
			width: 75.6vh !important;
			max-width: 70vw;
			max-height: 40vw;
			left: 5vw !important;
			top: 8.4vh !important;
			border-radius: 3.6vh;
	}

	.close {
		top: 2.4vh;
	}

	.single_project_info .domain_adress {
		top: 2.4vh;
	}

	.single_project_info {
		padding-top: 53.5vh;
	}

	.single_project_info > .info-cont {
		width: 60%;
	}

	.single_project_info .img_mobile {
		bottom: unset;
		top: 11.4vh;
		height: 36vh;
		width: 19.2vh;
		border-radius: 2.4vh;
	}

	.single_project_info.active .img_mobile{
		right: 5vw;
	}
	.single_project_info .btns {
		bottom: 2.4vh;
	}

}


@media (min-aspect-ratio: 16.5/9) and (max-width: 1920px){
	.single_project_info .img_mobile,
	.single_project_info .btns{
		bottom: 4vh;
	}
}



@media ((min-aspect-ratio: 18/9) and (max-width: 1920px)) or ((min-width: 1920px) and (max-height: 1000px)){
	.single_project_info .info h2{
		position: fixed;
		top: 3vw;
		left: 5vw;
	}
	.single_project_info{
		padding-top: 18vh;
	}
	.single_project_info .info_section_subtitle:nth-child(2){
		margin-top: 2vw;
	}
	.single_project_info>.info-cont{
		max-height: 65vh;
		width: 42%;
	}
	.single_project_info .img_mobile{
		bottom: unset;
		top: 46vh;
		width: 22vh;
		height: 42vh;
	}
	.single_project_info>.info-cont>.info{
		overflow-y: scroll;
		padding-right: 1vw;
		padding-top: 2vh;
		padding-bottom: 5vh;
	}
	.single_project_info.active>.info-cont::after,
	.single_project_info>.info-cont::before{
		opacity: 1;
		height: 5vh;
		filter: blur(1vh);
	}
	.projects .project.animation .img{
		top: 20vh!important;
		height: 60vh !important;
		width: 108vh !important;
		max-width: 50vw;
		max-height: 28vw;
		left: unset!important;
		right: 5vw;
		border-radius: 2vw;
	}
	.single_project_info .img_mobile{
		border: none;
	}
}


@media (min-width: 1920px) and (max-height: 1000px){
	.projects .project.animation .img{
		max-width: 960px;
		max-height: 540px;
		left: calc(50vw - 96px)!important;
		right: unset;
		border-radius: 38px;
	}
	.single_project_info .info h2{
		top: 58px;
		left: calc(50vw - 864px);
	}
}

@media (min-width: 1920px) and (max-height: 1050px){
	.single_project_info.active .img_mobile,
	.single_project_info .btns{
		bottom: 40px;
	}
	.single_project_info.active .img_mobile{
		right: 0;
	}
}


@media (max-aspect-ratio: 1/1) and (min-width: 480px){
	body.white_mode .single_project_info .img_mobile{
		box-shadow: unset;
	}
	.projects .project.animation .img{
		height: 45vw !important;
		width: 80vw !important;
		max-width: unset;
		max-height: unset;
		left: 10vw !important;
		top: 10vw !important;
		border-radius: 3vw;
	}
	.single_project_info .info h2{
		position: fixed;
		top: 57vw;
	}

	.single_project_info{
		padding: 10vw;
		padding-top: 61vw;
	}
	.single_project_info>.info-cont{
		width: 100%;
	}
	.single_project_info .img_mobile{
		bottom: unset;
		top: 30vw;
		height: 30vw;
		width: 16vw;
		border-radius: 2vw;
	}
	.single_project_info.active .img_mobile{
		right: 5vw;
	}
	.single_project_info .website_typ.single-pagee .img{
		width: 30%;
	}
	
	.single_project_info .btns{
		bottom: 2vw;
	} 
	.single_project_info>.info-cont>.info{
		overflow-y: scroll;
		padding-right: 1vw;
		padding-top: 2vw;
		padding-bottom: 5vw;
	}
	.single_project_info .domain_adress,
	.close{
		top: 3vw;
	}
	.single_project_info.active>.info-cont::after,
	.single_project_info>.info-cont::before{
		opacity: 1;
		height: 3vw;
		filter: blur(.5vw);
	}
	
}


@media (max-aspect-ratio: 1/1.3) and (min-width: 480px){
	.single_project_info .info h2{
		font-size: 2.6vw;
	}
	.single_project_info .info_section_subtitle{
		font-size: 1.2vw;
	}
	.single_project_info .info .main-text{
		font-size: 1.2vw;
	}
	.close{
		width: 2.8vw;
		height: 2.8vw;
	}
	.single_project_info .btns>a{
		width: 14vw;
	}
	.single_project_info .technologies_used_section .technology span{
		width: 1vw;
		height: 1vw;
		margin-right: .5vw;
	}
	.projects .project{
		border-radius: 1.5vw;
	}
}



@media (min-width: 480px) and (max-width: 800px){
	.projects{
		grid-template-columns: 1fr 1fr;
    	grid-auto-rows: 24vw;
   		grid-gap: 3vw;
		margin-top: 3vw;
	}
	.projects .project{
		border-radius: 2.5vw;
	}
}



@media(max-width: 480px){
	body.white_mode .single_project_info .img_mobile{
		box-shadow: unset;
	}
	.projects{
		grid-template-columns: 1fr;
    	grid-auto-rows: 46vw;
   		grid-gap: 5vw;
		margin-top: 4vw;
	}
	.projects .project{
		border-radius: 5vw;
	}
	
	.projects .project.animation .img{
		height: 45vw!important;
		width: 85vw!important;
		left: 5vw!important;
		top: 22vw!important;
	}
	.single_project_info .info .main-text{
		font-size: 3.5vw;
	}
	.single_project_info>.info-cont{
		width: 100%;
		margin-top: 71vw;
	}
	.single_project_info.active>.info-cont{
		height: 52vh;
	}
	.single_project_info>.info-cont::before{
		opacity: 1;
	}
	.single_project_info.active>.info-cont>.info{
		padding-top: 8vw;
		padding-right: 5vw;
		padding-bottom: calc(250px - 20vh);
		overflow-y: scroll;
	}
	.single_project_info.active>.info-cont::after{
		opacity: 1;
	}
	.single_project_info>.info-cont .time_spend>img{
		width: 3vw;
		margin-right: 1.5vw;
	}
	.single_project_info .img_mobile{
		top: 38vw;
		bottom: unset;
		right: -25vw;
		width: 20vw;
		height: 40vw;
		border-radius: 2.5vw;
	}
	.single_project_info.active .img_mobile{
		right: 3vw;
	}
	.single_project_info .domain_adress{
		top: 5vw;
		width: 76.5%;
		left: 5%;
		border-radius: 10vw;
	}
	.single_project_info .domain_adress a{
		padding: 3vw 5vw;
		font-size: 3.5vw;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.single_project_info .domain_adress a::after{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 6vw;
		background: #353434;
		transform: translate(50%, 0) scale(2);
		filter: blur(1vw);
	}
	body.white_mode .single_project_info .domain_adress a::after{
		background: #fff;
	}
	.single_project_info .domain_adress .copy{
		padding: 3vw 5vw;
	}
	.single_project_info .domain_adress .copy img{
		width: 3.5vw;
	}
	.close{
		width: 10.5vw;
		height: 10.5vw;
		top: 5vw;
		right: 5vw;
	}
	.single_project_info .info h2{
		font-size: 7vw;
		position: fixed;
		top: 72vw;
	}
	.single_project_info .info_section_subtitle{
		font-size: 3vw;
		margin-top: 5vw;
		margin-bottom: 2.5vw;
	}
	.single_project_info .btns{
		width: 100%;
		padding: 2vh;
		left: 0;
		bottom: 0;
		background: #161513;
	}
	.single_project_info .btns>a{
		width: 47%;
	}
	.single_project_info .technologies_used_section .technology{
		margin-right: 3vw;
	}
	.single_project_info .technologies_used_section .technology span{
		width: 3vw;
		height: 3vw;
		margin-right: 1vw;
	}
}
@media (max-width: 480px) and (min-aspect-ratio: 1/1.5) and (max-aspect-ratio: 1/1) {
	.projects .project.animation .img{
		height: 30vh !important;
        width: 57vh !important;
		top: calc(8vw + 10vh) !important;
	}
	.single_project_info.active>.info-cont{
		margin-top: 44vh;
	}
	.single_project_info .info h2{
		top: calc(8vw + 44vh);
		font-size: 5vh;
	}
	.single_project_info .img_mobile{
		top: 25vh;
	}
	.single_project_info .domain_adress,
	.close{
		top: 3vh;
	}
}