
.projects__title {
    user-select: none;
}

.projects__slider  {
    padding-bottom: 24px;
}

.project {
    position: relative;
    height: 0;
    padding-top: 450px;
    border-radius: var(--border-radius-small);
    user-select: none;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}
.projects__slider .swiper-slide-active {
border-radius: var(--border-radius-small);
overflow: hidden;
}
.project:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.15);
    z-index: 2;
}

.project__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

  .project__desc {
     display: flex;
     max-width: 400px;
     max-height: 400px;
     position: absolute;
     left: 50%;
     top: 50%;
     z-index: 3;
     width: calc(100% - 4rem);
     height: 80%;
     background: rgba(255, 255, 255, 0.84);
     backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
     padding: 2rem 3rem;
     display: flex;
     flex-direction: column;
     gap: 20px;
     border-radius: var(--border-radius-small);
     transform: translate(-50%, -50%);
 }
.projects__slider .swiper-slide-active .project__label {
    display: none;
}
 .project__desc h4 {
     font-weight: 600;
     font-size: 1.2rem;
     color: var(--color-light-text);
 }
 .project__hover-visible {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
 }
 .project__location {
     display: flex;
     gap: 16px;
     align-items: center;
 }

 .project__elevator {
     display: grid;
     gap: 16px;
     align-items: center;
     grid-template-columns: 26px auto;
 }

 .project__elevator p {
     white-space: nowrap;
 }

 .project__equipment {
     color: var(--color-text);
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 16px;
     padding: 1rem 0;
     justify-content: center;
     border-top: 1px solid #CBDAE3;
     border-bottom: 1px solid #CBDAE3;
 }

 .project__elevator {
     font-size: 0.8rem;
     font-weight: 500;
 }

 .project__location p {
     font-size: 0.8rem;
     color: var(--color-light-text);
 }

 .projects__slider .swiper-slide-active .project__desc:hover .card__btn:after {
     left: 4px;
 }
 .project__btn {
    margin: auto 0 0 auto;
 }
.projects__wrapper .swiper-button {
    display: none;
}
.vertical-img img{
    object-fit: cover !important;
}

@media screen and (min-width: 560px) {
    .about__images {
        gap: 2rem;
        padding: 0 2rem;
    }
}
@media screen and (min-width: 600px) {
    .projects__wrapper {
            position: relative;
            padding: 0 72px;
            max-width: 704px;
            margin: 0 auto;
        }
    
    .projects__wrapper .swiper-button-next,
    .projects__wrapper .swiper-button-prev {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px;
        width: 56px !important;
        height: 56px !important;
        margin-top: -28px;
        transition: all 0.3s ease;
    }
    .projects__wrapper .swiper-button-next {
        padding: 12px 12px 12px 18px;}
    .projects__wrapper .swiper-button-prev {
        padding: 12px 18px 12px 12px;
    }

  .projects__wrapper .swiper-button svg path {
      stroke: var(--color-gray-30);
      transition: all 0.3s ease;
  }

   .projects__wrapper .swiper-button:hover svg path{
        stroke: var(--color-gray-50);
    }
    .projects__wrapper .swiper-button:after {
        content: unset;
    }
    .project { 
        padding-top: 120%;
    }
    .about__images {
        gap: 2rem;
        padding: 0 2rem;
    }
}
@media screen and (min-width: 680px) {
    .project {
        padding-top: 600px;
    }
}
@media screen and (min-width: 768px) {
    .vertical-img img {
        object-fit: contain !important;
    }
}
@media screen and (min-width: 900px) {
    .projects .title {
        margin-left: 72px;
    }
    .projects__wrapper {
        max-width: 100%;
        padding: 0 56px;
    }
    .projects__slider .swiper-wrapper{
        display: flex;
        align-items: center;
    }
    .projects .swiper-button-prev,
    .projects .swiper-rtl .swiper-button-next {
            left: 0;
        }
    .projects .swiper-button-next,
    .projects .swiper-rtl .swiper-button-prev {
        right: 0;
    }
    .project {
        padding-top: 54%;
        margin: auto 0;
        transition: all 0.3s;
    }
    .projects__slider .swiper-slide-active {
        padding-top: 56%;
    }
    .projects__slider .swiper-slide-active  .project__desc {
        display: flex;
    }

    .project__desc {
        display: flex;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        max-height: 4rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
     .project__desc h4 {
        display: block;
        width: fit-content;
        font-size: 1rem;
        font-weight: 600;
        position: relative;
        top: 0.64rem;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .project__hover-visible {
        opacity: 0;
        transform: scaleY(0);
        visibility:hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .projects__slider .swiper-slide-active .project__desc,
    .projects__slider .project:hover .project__desc{
        max-width: 400px;
        max-height: 400px;
        height: 80%;
        align-items: start;
        background-color: rgba(255, 255, 255, 0.84);
                 }
    .projects__slider .swiper-slide-active .project__hover-visible,
    .projects__slider .project:hover .project__hover-visible {
        opacity: 1;
        visibility: visible;
        transform: scaleY(1);
        
    }
   .projects__slider .swiper-slide-active .project__desc h4,
   .projects__slider .project:hover .project__desc h4 {
        top: 0;
        left: 0;
        transform: translateX(0) scale(1.1);
    }
    .projects__slider img {
        display: inline-block;
        border-radius: var(--border-radius-small);
    }
}

@media screen and (min-width: 1024px) {
    .project {
            padding-top: 44%;
    }
    .projects__slider .swiper-slide-active {
        padding-top: 46%;
    }
}

@media screen and (min-width: 1280px) {
    .project {
        padding-top: 38%;
    }
    .project__desc {
        padding: 2rem;
    }
    .project__btn {
        transform: translateY(1rem);
     }
    .projects__slider .swiper-slide-active {
        padding-top: 40%;
    }
}

@media screen and (min-width: 1360px) {
    .project__desc {
        padding: 2rem 3rem;
    }
    .project__btn {
        transform: translateY(0);
    }
}
@media screen and (min-width: 1800px) {
        .card__btn,
        .project__location p,
        .project__elevator {
            font-size: 0.9rem;
        }
        .project__desc h4,
        .project__label h3 {
            font-size: 1.2rem;
        }
        .project__equipment {
          padding: 2rem 0;
        }
    }
@keyframes showBlock {
    0% {
        transform: translate(0, 50%) scale(0.7);
        opacity: 0;
    }

    100% {
        transform: translate(0, 50%) scale(1);
        opacity: 1;
    }
}