.projects{
  padding: 14.0625rem 0 0rem 0;
  overflow: hidden;
}
.projects .projects__header{
	margin-bottom: -1rem;
}
.projects .projects__content{
	min-height: 100vh;
}
.projects .projects__title{
   margin-bottom: 2.5rem;
}
.projects .projects__text{
   margin-left: 7.0625rem;
   width: 44.1725rem;
}
.projects .projects__list{
	position: relative;
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
}
.projects .projects__list .projects__list-content{
	padding-left: 3rem;
	padding-right: 3rem;
	height: 100vh;
}
.projects .projects__list .projects__item{
	width: 27.3125rem;
	height: 36.25rem;
	flex-shrink: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.projects .projects__list .projects__item .projects__item-bg{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	
	height: 100%;
	width: 160%;
	flex-shrink: 0;
}

.projects .projects__list .projects__item-first{
	position: absolute;
	top: 50%;
	transform: translate(0px, -50%);
	padding-left: 3rem;
	padding-right: 1rem;
	width: 24.25rem;
	height: 36.5rem;
	z-index: 2
}
.projects__text_button .button {
    align-self: flex-start; /* Кнопка ігнорує розтягування контейнера */
}
.projects__text_button {
    align-items:center;
    justify-content: space-between;
	width: 100%;
}

.project-popup__container {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

.project-popup__image-side {
    width: 50%;
    background: #eee;
}

.project-popup__image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-popup__content-side {
    width: 50%;
    padding: 6rem; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    background-color: var(--light-secondary);
}

.project-popup__description {
    margin-bottom: 3rem;
	margin-top: 3.5rem;
	max-width: 22.0625rem;
    color: var(--dark);
}

.project-popup__sub-image {
    width: 100%;
    margin-top: auto; 
    padding-top: 2rem;
}

.project-popup__sub-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.project-popup .popup__close:not(.button) {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 99999;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--dark);
	stroke: var(--dark);
	fill:var(--dark);
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    
	width: 8.25rem;
	height: 8.25rem;
	border: 1px solid var(--dark);
	border-radius: 500px;
}

.project-popup .popup__close:not(.button) svg {
    color: var(--dark);
	stroke: var(--dark);
	fill:var(--dark);
    width: 3.180625rem;
    height: 2.293125rem;
}

#project-ajax-popup {
    display: flex; 
    align-items: center;
    justify-content: center;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999; 
    background-color: rgba(0,0,0,0.5); 
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

#project-ajax-popup.is-active {
    visibility: visible;
    opacity: 1;
}

#project-ajax-popup .popup__body {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--light-secondary);
	padding: 0;
}

body.popup-open {
    overflow: hidden;
}
@media (max-width: 767px) {
    .project-popup .popup__close {
        top: 1rem;
        right: 1rem;
        border-radius: 50%;
    }
    .project-popup__content-side {
        padding: 2rem;
    }
    
    .project-popup__sub-image {
        margin-top: 2rem;
    }
    .project-popup__container {
        flex-direction: column;
    }
    .project-popup__image-side, 
    .project-popup__content-side {
        width: 100%;
    }
    .project-popup__content-side {
        padding: 2rem;
    }
    .project-popup .popup__body {
        overflow-y: auto;
    }
}
@media screen and (max-width: 767px) {
	.projects .projects__header{
		margin-bottom: 0;
	}
	.projects .projects__text{
		margin-left: 0;
	}
	.projects .projects__list .projects__item{
		width: 20.563rem;
		height: 28.375rem;
	}

	.projects .projects__list .projects__item-first {
		top:0 !important;
		z-index: 1 !important;
		padding-left: 1.25rem !important;
		height: 8.875rem !important;
	}
	.projects .projects__list .projects__list-content{
		padding-left: 1rem;
	}
}