.projects-img-block {
    padding: 40px 50px 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%), url(image/projects/image.png) lightgray 50% / cover no-repeat;
}

.projects-img-block-content {
    gap: 17px;
}

.projects-img-block .breadcrumbs-item:last-child {
    color: #FFF;
}

.projects-img-block-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
}

.projects-img-block-content-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: stretch;
    flex-grow: 1;
    justify-content: space-between;
}

.projects-img-block-title {
    color: #FFF;
    font-size: 50px;
    font-style: normal;
    font-weight: 500;
    line-height: 50px; /* 100% */
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.projects-img-block-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.projects-img-block-row-item {
    width: 156px;
    height: 152px;
    flex-shrink: 0;
    border-radius: 16px 16px 0 0;
    padding: 11px 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.projects-img-block-row-item-icon {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    transition: 0.3s;
}

.projects-img-block-row-item-text {
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 155.556% */
}

.projects-icon-home {
    background-image: url("icon/projects/projects-icon-home.svg");
}

.projects-icon-interiors {
    background-image: url("icon/projects/projects-icon-interiors.svg");
}

.projects-icon-construction {
    background-image: url("icon/projects/projects-icon-construction.svg");
}

.projects-icon-production {
    background-image: url("icon/projects/projects-icon-production.svg");
}

.projects-icon-video {
    background-image: url("icon/projects/projects-icon-video.svg");
}

.projects-img-block-row-item:hover .projects-img-block-row-item-icon {
    filter: unset;
}

.projects-img-block-row-item.active {
    background: #FFF;
}

.projects-img-block-row-item.active .projects-img-block-row-item-icon {
    filter: unset;
}

.projects-img-block-row-item.active .projects-img-block-row-item-text {
    color: #292829;
}

.projects-list-block {
    padding: 59px 50px 40px;
    background: #fff;
}

.projects-list-block-content {
    align-items: center;
    gap: 40px;
}

.projects-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.projects-list-item {
    cursor: pointer;
    width: calc((100% - 24px) / 3);
    aspect-ratio: 385 / 272;
    border-radius: 10px;
    background: lightgray;
    overflow: hidden;
    position: relative;
}

.projects-list-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projects-list-item-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    height: 44px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.70);
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: gap 0.3s ease, padding-left 0.3s ease, background 0.3s ease;
}

.projects-list-item-btn-text {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    color: rgba(255, 255, 255, 0.90);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease;
}

.projects-list-item-btn-icon {
    width: 24px;
    height: 24px;
    background-image: url("icon/projects/projects-list-item-btn-icon.svg");
}

.projects-list-item:hover .projects-list-item-btn-text {
    max-width: 355px;
    opacity: 1;
    margin-left: 10px;
}

.projects-list-item:hover .projects-list-item-btn {
    gap: 23px;
    padding-left: 13px;
}



.projects-list-btn {
    display: flex;
    width: calc((100% - 24px) / 3);
    height: 69px;
    padding: 15px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #FF9C00;
    box-shadow: 0 -4px 11px 0 rgba(0, 0, 0, 0.20) inset, 0 6px 8px 0 rgba(255, 255, 255, 0.45) inset;
    color: #FFF;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 71.429% */
}

.projects-list-btn:hover {
    border-radius: 6px;
    background: #FFA326;
    box-shadow: 0 6px 8px 0 rgba(255, 255, 255, 0.35) inset, 0 -4px 11px 0 rgba(0, 0, 0, 0.30) inset;
}

.projects-list-video-item {
    aspect-ratio: 16/9;
}

.projects-list-video-item iframe {
    width: 100%;
    height: 100%;
}

.projects-list-video-item-hover {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    fill: var(--white);
    transition: 0.2s all linear;
    background: rgba(0, 0, 0, 0.4) url("data:image/svg+xml;charset=UTF-8, %3csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cmask id='mask0_2058_515' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='2' y='2' width='41' height='41'%3e%3cpath d='M22.556 40.8493C32.6815 40.8493 40.8893 32.6414 40.8893 22.5159C40.8893 12.3905 32.6815 4.18262 22.556 4.18262C12.4305 4.18262 4.22266 12.3905 4.22266 22.5159C4.22266 32.6414 12.4305 40.8493 22.556 40.8493Z' fill='white' stroke='white' stroke-width='4' stroke-linejoin='round'/%3e%3cpath d='M18.8906 22.5157V16.165L24.3906 19.3404L29.8906 22.5157L24.3906 25.691L18.8906 28.8664V22.5157Z' fill='black' stroke='black' stroke-width='4' stroke-linejoin='round'/%3e%3c/mask%3e%3cg mask='url(%23mask0_2058_515)'%3e%3cpath d='M0.554688 0.515625H44.5547V44.5156H0.554688V0.515625Z' fill='white'/%3e%3c/g%3e%3c/svg%3e ") no-repeat center center;
}

.projects-list-video-item-hover:active {
    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cmask id='mask0_2058_527' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='1' y='2' width='42' height='41'%3e%3cpath d='M22.3021 40.8493C32.4276 40.8493 40.6354 32.6414 40.6354 22.5159C40.6354 12.3905 32.4276 4.18262 22.3021 4.18262C12.1766 4.18262 3.96875 12.3905 3.96875 22.5159C3.96875 32.6414 12.1766 40.8493 22.3021 40.8493Z' fill='white' stroke='white' stroke-width='4' stroke-linejoin='round'/%3e%3cpath d='M18.6367 22.5157V16.165L24.1367 19.3404L29.6367 22.5157L24.1367 25.691L18.6367 28.8664V22.5157Z' fill='black' stroke='black' stroke-width='4' stroke-linejoin='round'/%3e%3c/mask%3e%3cg mask='url(%23mask0_2058_527)'%3e%3cpath d='M0.300781 0.515625H44.3008V44.5156H0.300781V0.515625Z' fill='%23FF9C00'/%3e%3c/g%3e%3c/svg%3e ");
}

.projects-list-video-item:hover .projects-list-video-item-hover {
    opacity: 1;
}

.video-modal-container {
    max-width: 1100px;
}

.video-modal-content {
    aspect-ratio: 16/9;
    padding: 0;
    background: #000;
}

.video-modal-content iframe {
    width: 100%;
    height: 100%;
}

@media (min-width: 990px) and (max-width: 1208px) {
    .projects-img-block {
        padding: 30px 30px 0;
    }

    .projects-list-block {
        padding: 30px;
        gap: 30px;
    }

    .projects-list {
        gap: 22px;
    }

    .projects-list-item,
    .projects-list-btn {
        width: calc((100% - 22px) / 2);
    }
}

@media (max-width: 989px) {
    .projects-img-block {
        padding: 24px 20px 17px;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%), url(image/projects/image-mobile.png) lightgray 50% / cover no-repeat;
    }

    .projects-img-block-content-container {
        gap: 24px;
    }

    .projects-img-block-title {
        color: #FFF;
        width: 320px;
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
        line-height: 32px; /* 100% */
        padding-bottom: 30px;
    }

    .projects-img-block-row {
        flex-wrap: wrap;
        gap: 11px 15px;
        justify-content: flex-start;
    }

    .projects-img-block-row-item {
        width: calc((100% - 30px) / 3);
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #FFF;
        height: auto;
        gap: 2px;
    }

    .projects-img-block-row-item-icon {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        background-size: cover;
    }

    .projects-img-block-row-item-text {
        color: rgba(255, 255, 255, 0.90);
        text-align: center;
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 100%; /* 11px */
    }

    .projects-list-block {
        padding: 27px 20px 28px;
    }

    .projects-list-item {
        width: 100%;
    }

    .projects-list-item:hover .projects-list-item-btn-text {
        max-width: 0;
        opacity: 0;
        margin-left: 0;
    }

    .projects-list-item:hover .projects-list-item-btn {
        gap: 0;
        padding-left: 10px;
    }

    .projects-list-block-content {
        gap: 30px;
    }

    .projects-list-btn {
        width: 100%;
        display: flex;
        height: 54px;
        padding: 15px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 6px;
        background: #FF9C00;
        box-shadow: 0 -4px 11px 0 rgba(0, 0, 0, 0.20) inset, 0 6px 8px 0 rgba(255, 255, 255, 0.45) inset;
        color: #FFF;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px; /* 83.333% */
    }
}



.project-info-modal-container {
    max-width: 670px;
}

.project-info-modal-content {
    padding: 43px 43px 36px;
    border-radius: 10px;
    background: #EFEFEF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    gap: 56px;
    position: relative;
}

.project-info-modal-top-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.project-info-modal-top-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-info-modal-top-title {
    color: #272727;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 64px; /* 160% */
    text-transform: uppercase;
}

.project-info-modal-top-title span {
    color: #FFB33B;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 64px;
    text-transform: uppercase;
}

.project-info-modal-top-text {
    color: #272727;
    text-align: center;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 111.111% */
    text-transform: uppercase;
}

#projectInfoModal {
    align-items: flex-start;
    padding: 40px 0;
    overflow: auto;
}

.project-info-modal-img-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    width: 100%;
}

.project-info-modal-img-list img {
    width: 100%;
}

.project-info-modal-img-list .img-container:last-child {
    height: 179px;
    position: relative;
    overflow: hidden;
}

.project-info-modal-img-list .img-container:last-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.05) 30%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.4) 70%,
            rgba(255, 255, 255, 0.8) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    transition: all 0.5s ease;
    z-index: 1;
    height: 179px;
}

.project-info-modal-bottom-content {
    display: flex;
    flex-direction: column;
    gap: 33px;
    align-items: center;
    width: 100%;
}

.project-info-modal-bottom-title {
    color: #272727;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 100% */
    text-transform: uppercase;
}

.project-info-modal-form {
    width: 100%;
    padding: 0 7px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    align-items: center;
}

.project-info-modal-form-input-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.project-info-modal-form-input-row {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 20px;
}

.project-info-modal-form-input-row-card {
    flex: 1 0 0;
    height: 90px;
    border-radius: 20px;
    border: 1px solid rgba(70, 70, 70, 0.40);
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.project-info-modal-form-input-row-card:hover,
.project-info-modal-form-input-row-card.active {
    border: 2px solid #48924E;
    padding: 0 14px;
}

.project-info-modal-form-input-row-card:hover .quiz-block-content-list-item-dot-center,
.project-info-modal-form-input-row-card.active .quiz-block-content-list-item-dot-center {
    display: block;
}

.project-info-modal-form-input-row-card-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-info-modal-form-input-row-card .quiz-block-content-list-item-icon {
    width: 64px;
    height: 64px;
    background-size: cover;
}

.project-info-modal-form-input-row-card .quiz-block-content-list-item-title {
    color: #272727;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 108.333% */
}

.project-info-modal-form-input-container-title {
    color: #272727;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px; /* 144.444% */
}

.project-info-modal-form-input-container .quiz-block-form-input-container {
    padding: 25px;
}

.project-info-modal-form-input-container .quiz-block-form-input {
    background: transparent;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 86.667% */
    border: none;
}

.project-info-modal-form-text {
    color: #272727;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 38px; /* 158.333% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.project-info-modal-form-btn {
    display: flex;
    width: 556px;
    height: 69px;
    padding: 15px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #FF9C00;
    box-shadow: 0px -4px 11px 0px rgba(0, 0, 0, 0.20) inset, 0px 6px 8px 0px rgba(255, 255, 255, 0.45) inset;
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 83.333% */
}

.project-info-modal-form-btn:hover {
    border-radius: 6px;
    background: #FFA326;
    box-shadow: 0px 6px 8px 0px rgba(255, 255, 255, 0.35) inset, 0px -4px 11px 0px rgba(0, 0, 0, 0.30) inset;
}

button.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.project-info-modal-form-btn-text {
    color: #2F2F2F;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px; /* 135.714% */
    width: 462px;
    opacity: 0.5;
}

.project-info-modal-form-btn-text a {
    color: #2F2F2F;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.project-info-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background-image: url("icon/projects/project-info-modal-close.svg");
}

@media (max-width: 1208px) {
    .project-info-modal-content {
        padding: 75px 10px 20px;
    }

    .project-info-modal-top-title {
        color: #272727;
        text-align: center;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 28px */
        text-transform: uppercase;
    }

    .project-info-modal-top-title span {
        color: #FFB33B;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        text-transform: uppercase;
    }

    .project-info-modal-top-text-container {
        gap: 5px;
    }

    .project-info-modal-top-text {
        color: #272727;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px; /* 187.5% */
        text-transform: uppercase;
    }

    .project-info-modal-top-content {
        gap: 26px;
    }

    .project-info-modal-content {
        gap: 56px;
    }

    .project-info-modal-bottom-title {
        color: #272727;
        text-align: center;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: 30px; /* 115.385% */
        text-transform: uppercase;
    }

    .project-info-modal-bottom-content {
        gap: 29px;
    }

    .project-info-modal-form {
        gap: 30px;
    }

    .project-info-modal-form-input-container {
        gap: 14px;
    }

    .project-info-modal-form-input-row {
        gap: 8px;
    }

    .project-info-modal-form-input-row-card-content {
        flex-direction: column;
    }

    .project-info-modal-form-input-row-card .quiz-block-content-list-item-icon {
        width: 58px;
        height: 58px;
        flex-shrink: 0;
        aspect-ratio: 1/1;
    }

    .project-info-modal-form-input-row-card-content {
        gap: 2px;
    }

    .project-info-modal-form-input-row-card {
        padding: 9px 0 17px;
        height: auto;
        flex-direction: column;
        align-items: center;
    }

    .project-info-modal-form-input-row-card:hover,
    .project-info-modal-form-input-row-card.active {
        padding: 8px 0 16px;
    }

    .project-info-modal-form-input-row-card .quiz-block-content-list-item-title {
        color: #272727;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 111.111% */
    }

    .project-info-modal-form-input-container-title {
        color: #272727;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 26px; /* 162.5% */
    }

    .project-info-modal-form-input-container .quiz-block-form-input-container {
        height: 76px;
    }

    .project-info-modal-form-input-container .quiz-block-form-input {
        font-size: 26px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 100% */
        text-align: center;
    }

    .project-info-modal-form-text {
        display: none;
    }

    .project-info-modal-form-btn {
        display: flex;
        width: 100%;
        height: 69px;
        padding: 15px 40px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 6px;
        background: #FF9C00;
        box-shadow: 0px -4px 11px 0px rgba(0, 0, 0, 0.20) inset, 0px 6px 8px 0px rgba(255, 255, 255, 0.45) inset;
        color: #FFF;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px; /* 90.909% */
    }

    .project-info-modal-form-btn-text {
        margin-top: -20px;
        color: #2F2F2F;
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 19px; /* 135.714% */
        width: 100%;
    }
}