.portfolio-header-block {
    padding: 80px 30px 0;
}

.portfolio-header-block-content {
    align-items: center;
    gap: 50px;
}

.portfolio-header-title-container {
    display: flex;
    width: 545px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.portfolio-header-title-container h1 {
    text-align: center;
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 60px */
    background: linear-gradient(93deg, #FFF 2.06%, #999 72.53%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portfolio-header-title-container p {
    color: #BABABA;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
}

.portfolio-header-tabs-group {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.portfolio-header-tabs-group button {
    display: flex;
    height: 46px;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 60px;
    background: #302C2B;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}

.portfolio-header-tabs-group button:hover {
    background: #2A2625;
}

.portfolio-header-tabs-group button.active {
    background: #0CB4CE;
}

.portfolio-header-tabs-group button.active:hover {
    background: #20C8E2;
}

.portfolio-tab {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
}

.portfolio-tab.active {
    display: flex;
}

.portfolio-visualisation-swiper-block {
    padding: 60px 30px 120px;
}

.lf-swiper-container {
    width: 100%;
    position: relative;
}

.lf-swiper-img-container {
    width: 100%;
    aspect-ratio: 1380/809;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.lf-swiper-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lf-swiper-btn {
    display: none;
}

.lf-swiper-container .swiper-button-prev,
.lf-swiper-container .swiper-button-next {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 52px;
    background: #2A2625;
}

.lf-swiper-container .swiper-button-prev:hover,
.lf-swiper-container .swiper-button-next:hover {
    background: #2A2625;
}

.lf-swiper-container .swiper-button-prev {
    left: -74px;
}

.lf-swiper-container .swiper-button-next {
    right: -74px;
}

.lf-swiper-container .swiper-button-prev i,
.lf-swiper-container .swiper-button-next i {
    width: 13px;
    height: 19px;
    flex-shrink: 0;
    background-image: url("icon/home-services-info-swiper-btn-nav-icon.svg");
}

.lf-swiper-container .swiper-button-next i {
    transform: rotate(180deg);
}

.portfolio-visualisation-image-block {
    width: 100%;
    aspect-ratio: 1920/905;
    background-image: url("image/portfolio/portfolio-visualisation-image.webp");
    background-position: center;
    background-size: cover;
}

.portfolio-visualisation-video-block {
    padding: 120px 30px 0;
}

.portfolio-visualisation-video-block-content {
    gap: 60px;
    align-items: center;
}

.portfolio-visualisation-video-block-content h2 {
    width: 1156px;
    text-align: center;
    font-size: 44px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%; /* 48.4px */
    background: linear-gradient(93deg, #FFF 2.06%, #999 72.53%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portfolio-visualisation-video-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}

.portfolio-visualisation-video-content .video {
    aspect-ratio: 1380/732;
    background-position: center;
    background-size: cover;
}

.portfolio-visualisation-video-content .video.one {
    background-image: url("image/portfolio/portfolio-visualisation-video-content-video-1.webp");
}

.portfolio-visualisation-video-content .video.two {
    background-image: url("image/portfolio/portfolio-visualisation-video-content-video-2.webp");
}

.portfolio-visualisation-video-content .video.three {
    background-image: url("image/portfolio/portfolio-visualisation-video-content-video-3.webp");
}

.portfolio-visualisation-video-content .video.four {
    background-image: url("image/portfolio/portfolio-visualisation-video-content-video-4.webp");
}

.portfolio-tour-block {
    padding: 60px 30px 40px;
}

.portfolio-tour-block-content {
    align-items: stretch;
    gap: 50px;
}

.portfolio-tour-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding-top: 20px;
    border-top: 1px solid #858585;
}

.portfolio-tour-header big {
    color: #3F3F3F;
    font-size: 94px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 94px */
    text-transform: uppercase;
}

.portfolio-tour-header p {
    color: #B5B5B5;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
}

.portfolio-tour-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
}

.lf-vtour-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1380/730;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
}

.lf-vtour-container span {
    display: flex;
    width: 211px;
    height: 123px;
    padding: 16px 26px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(8px);
}

.lf-vtour-container span i {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    background-image: url("icon/lf-vtour-icon.svg");
}

.lf-vtour-container span p {
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    white-space: nowrap;
}

.lf-vtour-container:hover span {
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(31, 220, 249, 0.30);
    backdrop-filter: blur(13px);
}

.lf-vtour-container.aurum {
    background-image: url("image/portfolio/portfolio-tour-aurum.webp");
}

.lf-vtour-container.slava {
    background-image: url("image/portfolio/portfolio-tour-slava.webp");
}

.lf-vtour-container.bashni {
    background-image: url("image/portfolio/portfolio-tour-bashni.webp");
}

.lf-vtour-container.avant {
    background-image: url("image/portfolio/portfolio-tour-avant.webp");
}

.lf-vtour-container.amber-city {
    background-image: url("image/portfolio/portfolio-tour-amber-city.webp");
}

.lf-vtour-container.himkinsky {
    background-image: url("image/portfolio/portfolio-tour-himkinsky.webp");
}

.lf-vtour-container.granat {
    background-image: url("image/portfolio/portfolio-tour-granat.webp");
}

.lf-vtour-container.ldm {
    background-image: url("image/portfolio/portfolio-tour-ldm.webp");
}

.lf-vtour-container.urman {
    background-image: url("image/portfolio/portfolio-tour-urman.webp");
}

.lf-vtour-container.klever {
    background-image: url("image/portfolio/portfolio-tour-klever.webp");
}

.lf-vtour-container.azizi {
    background-image: url("image/portfolio/portfolio-tour-azizi.webp");
}

.lf-vtour-container.bering {
    background-image: url("image/portfolio/portfolio-tour-bering.webp");
}

.lf-vtour-container.noville {
    background-image: url("image/portfolio/portfolio-tour-noville.webp");
}

.portfolio-photo-swiper-block {
    padding: 60px 30px 0;
}

.portfolio-photo-video-block {
    padding: 60px 30px 0;
}

.portfolio-photo-video-block-content {
    align-items: stretch;
    gap: 40px;
}

.photo-video-one {
    background-image: url("image/portfolio/portfolio-photo-video-image-1.webp");
}

.photo-video-two {
    background-image: url("image/portfolio/portfolio-photo-video-image-2.webp");
}

.photo-video-three {
    background-image: url("image/portfolio/portfolio-photo-video-image-3.webp");
}

.lf-video-container {
    width: 100%;
    aspect-ratio: 1380/728;
    background-position: center;
    background-size: cover;
}

.portfolio-construction-swiper-block {
    padding: 60px 30px 0;
}

.portfolio-construction-content-block {
    padding: 120px 30px 0;
}

.portfolio-construction-content-block-content {
    align-items: stretch;
    gap: 78px;
}

.photo-construction-one {
    background-image: url("image/portfolio/portfolio-construction-video-1.webp");
}

.portfolio-construction-content-row {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.lf-vtour-container.sm {
    width: auto;
    flex: 1 0 0;
}

.lf-vtour-container.sm span {
    width: 298px;
}

.lf-vtour-container.kozh {
    background-image: url("image/portfolio/portfolio-tour-kozh.webp");
}

.lf-vtour-container.sampson {
    background-image: url("image/portfolio/portfolio-tour-sampson.webp");
}

.portfolio-views-swiper-block {
    padding: 60px 30px;
}

.lf-vtour-container.olivia {
    background-image: url("image/portfolio/portfolio-tour-olivia.webp");
}

.lf-vtour-container.stories {
    background-image: url("image/portfolio/portfolio-tour-stories.webp");
}

@media (max-width: 1528px) {
    .lf-swiper-container .swiper-button-prev {
        left: -26px;
    }

    .lf-swiper-container .swiper-button-next {
        right: -26px;
    }
}

@media (min-width: 990px) and (max-width: 1439px) {
    .portfolio-header-block {
        padding: 40px 40px 0;
    }

    .portfolio-header-title-container {
        width: 632px;
    }

    .portfolio-visualisation-swiper-block {
        padding: 60px 40px 80px;
    }

    .portfolio-visualisation-video-block {
        padding: 80px 40px 0;
    }

    .portfolio-visualisation-video-block-content h2 {
        width: 100%;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
    }

    .portfolio-tour-block {
        padding: 60px 40px 20px;
    }

    .portfolio-tour-block-content {
        gap: 30px;
    }

    .portfolio-tour-header p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
    }

    .portfolio-tour-header big {
        font-size: 90px;
        font-style: normal;
        font-weight: 500;
    }

    .portfolio-tour-header {
        border-top: 1px dashed #858585;
    }

    .portfolio-tour-list {
        gap: 40px;
    }

    .portfolio-photo-swiper-block {
        padding: 60px 40px 0;
    }

    .portfolio-photo-video-block {
        padding: 60px 40px 0;
    }

    .portfolio-construction-swiper-block {
        padding: 60px 40px 0;
    }

    .portfolio-construction-content-block {
        padding: 60px 40px 0;
    }

    .portfolio-construction-content-block-content {
        gap: 80px;
    }

    .portfolio-construction-content-row {
        flex-direction: column;
    }

    .lf-vtour-container.sm {
        width: 100%;
        flex: unset;
    }

    .lf-vtour-container.sm span {
        width: 211px;
    }

    .portfolio-views-swiper-block {
        padding: 60px 15px 20px;
    }
}

@media (max-width: 989px) {

    .lf-swiper-container .swiper-button-prev {
        display: none;
    }

    .lf-swiper-container .swiper-button-next {
        display: none;
    }

    .portfolio-header-block {
        padding: 22px 15px 0;
    }

    .portfolio-header-block-content {
        gap: 40px;
    }

    .portfolio-header-title-container {
        gap: 16px;
        width: 344px;
    }

    .portfolio-header-title-container h1 {
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
    }

    .portfolio-header-title-container p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
    }

    .portfolio-visualisation-swiper-block {
        padding: 50px 15px 60px;
    }

    .lf-swiper-container .swiper {
        padding-bottom: 24px;
    }

    .lf-swiper-container .swiper-pagination {
        bottom: 0;
    }

    .portfolio-visualisation-video-block {
        padding: 60px 15px 0;
    }

    .portfolio-visualisation-video-block-content h2 {
        width: 345px;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
    }

    .portfolio-visualisation-video-block-content {
        gap: 30px;
    }

    .portfolio-visualisation-video-content {
        gap: 30px;
    }

    .portfolio-header-tabs-group button {
        height: 42px;
        padding: 16px 12px;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
    }

    .portfolio-header-tabs-group {
        flex-wrap: nowrap;
        overflow: auto;
        justify-content: flex-start;
        width: 100%;
        padding-bottom: 22px;
    }

    .portfolio-header-tabs-group button {
        white-space: nowrap;
    }

    .portfolio-tour-block {
        padding: 50px 15px 30px;
    }

    .portfolio-tour-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .portfolio-tour-header big {
        font-size: 90px;
        font-style: normal;
        font-weight: 500;
    }

    .portfolio-tour-header p {
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
    }

    .portfolio-tour-block-content {
        gap: 30px;
    }

    .portfolio-tour-list {
        gap: 30px;
    }

    .portfolio-photo-swiper-block {
        padding: 50px 15px 0;
    }

    .portfolio-photo-video-block {
        padding: 50px 15px 0;
    }

    .portfolio-construction-swiper-block {
        padding: 50px 15px 0;
    }

    .portfolio-construction-content-block {
        padding: 60px 15px 0;
    }

    .portfolio-construction-content-block-content {
        gap: 60px;
    }

    .portfolio-construction-content-row {
        flex-direction: column;
    }

    .lf-vtour-container.sm {
        width: 100%;
        flex: unset;
    }

    .lf-vtour-container.sm span {
        width: 211px;
    }

    .portfolio-views-swiper-block {
        padding: 50px 15px 10px;
    }
}