.project {
    height: 0;
    overflow: hidden;
    transform-origin: 50% 100%;
}

.project a {
    display: flex;
    text-decoration: none;
    justify-content: space-between;
}

.content-wrapper {
    padding: 0 4%;
    width: 40%;
}

.project h2 {
    color: var(--primary-800, #3E3C37);
    font-variant-numeric: lining-nums proportional-nums;

    /* header-3 */
    font-family: "Playfair Display";
    font-size: 2.2vw;
    font-style: normal;
    font-weight: 400;
    line-height: 138.889%;
}

.project a p {
    color: var(--primary-500, #747474);

    /* body-1 */
    font-family: Gilroy-Regular;
    font-size: 1.15vw;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 150% */
}

.img-wrapper {
    width: 58%;
}

.project .flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 1vw;
    margin-top: 5%;
}

.project .flex .col {
    width: 44%;
    flex: none;
}

.project .flex h3 {
    color: var(--secondary-900, #A69163);
    font-family: Gilroy-Medium;
    font-size: 1.4vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 2.4px;
    margin-bottom: 0;
}

.project .flex span {
    color: #3E513A;
    font-family: Gilroy-Regular;
    font-size: 1vw;
    font-style: normal;
    font-weight: 400;
    line-height: 111%;
    /* 111.111% */
}

section#first-sec-portfolio {
    display: flex;
    justify-content: space-between;
    padding: 0;
    position: absolute;
    width: 100%;
    top: 40%;
    align-items: flex-start;
}

.project-content {
    width: 36%;
    padding: 0 4%;
    margin-top: 1% !important;
}

.project-image-wrapper {
    width: 58%;
}

.project-content h2 {
    color: #CDB47A;
    font-family: Gilroy-SemiBold;
    font-size: 1.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 5.6px;
}

.project-image-wrapper h1 {
    color: var(--primary-900, #282621);
    font-variant-numeric: lining-nums proportional-nums;

    /* header-1 */
    font-family: "Playfair Display";
    font-size: 3.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: 113%;
    /* 113.158% */
}




/* new */


/* DHK initial state */
.project:nth-child(1) {
    height: 20vh;
}

.project:nth-child(2) {
    height: 5vh;
}

.scroll_section {
    padding-left: var(--size--1-25rem);
    flex-flow: column;
    justify-content: flex-end;
    height: 100vh;
    display: flex;
    position: sticky;
    top: 0;
}

.scroll_wrap {
    z-index: 5;
    margin-bottom: var(--size--10rem);
    max-width: 120rem;
    height: 400vh;
    min-height: 100vh;
    display: block;
    position: relative;
}

:not(.u-margin-trim-off, .u-block-gap, .w-background-video)> :not(:not(.w-condition-invisible) ~ :not(.w-condition-invisible)) {
    margin-top: 0;
}

:not(.u-margin-trim-off, .u-block-gap, .w-background-video)> :not(:has(~ :not(.w-condition-invisible))) {
    margin-bottom: 0;
}

section#first-sec-portfolio {
    z-index: 3;
    background: #fff;
}

.page_main.desk-view {
    background: #fff;
    position: relative;
    z-index: 1;
}

@media (max-width:767px) {
    section#first-sec-portfolio {
        position: unset;
        display: block;
        padding: 20% 5% !important;
    }

    .project-content {
        width: 100%;
        padding: 0;
        margin-top: 1% !important;
    }

    .project-image-wrapper {
        width: 100%;
    }

    .project {
        height: auto !important;
        overflow: hidden;
        transform-origin: 50% 100%;
        border: 1px solid var(--secondary-100, #F5F0E4);
        background: #FFF;
        padding: 6%;
        margin-bottom: 8%;

    }

    .project a {
        display: block;
    }

    .portfolio-project-wrapper {
        padding: 0 5%;
    }

    .img-wrapper,
    .content-wrapper {
        width: 100%;
        padding: 0;
    }

    .project-content h2 {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 3.2px;
    }

    .project-image-wrapper h1 {
        font-size: 30px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.64px;
    }

    .project h2 {
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 4% 0 !important;
    }

    .project a p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .project .flex {
        display: none;
    }
}

.sticky-btn {
    border-radius: 4.1vw;
    border: 1px solid rgba(255, 255, 255, 0.29);
    background: linear-gradient(105deg, rgba(40, 38, 33, 0.96) 5.14%, rgba(86, 71, 34, 0.96) 94.53%);
    position: fixed;
    padding: 0.5%;
    bottom: 0;
    z-index: 100;
    display: flex;
    width: 30%;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
}

.sticky-btn a.active {
    border-radius: 4.1vw;
    background: linear-gradient(105deg, rgba(40, 38, 33, 0.50) 5.14%, rgba(86, 71, 34, 0.50) 94.53%);
    color: #EACD8B;
    text-align: center;
    font-family: Gilroy-SemiBold;
    font-size: 1.1vw;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 160% */
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3% 4%;
    text-decoration: none;
}

.sticky-btn a {
    color: var(--secondary-0, #FAF7F2);
    text-align: center;
    font-family: Gilroy-SemiBold;
    font-size: 1.1vw;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 160% */
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3% 4%;
    text-decoration: none;
}

.sticky-btn a span {
    display: none;
}

.sticky-btn a.active span {
    border-radius: 50%;
    background: var(--secondary-900, #A69163);
    color: var(--primary-0, #FFF);
    text-align: center;
    font-family: Gilroy-SemiBold;
    font-size: 1vw;
    font-style: normal;
    font-weight: 400;
    /* 228.571% */
    text-transform: uppercase;
    display: flex;
    align-items: center;
    width: 1.8vw;
    height: 1.8vw;
    justify-content: center;
    padding-left: 2px;
}

.sticky-btn a.active {
    display: flex;
    align-items: center;
    gap: 1vw;
}


@media (max-width:767px) {
    .sticky-btn {
        border-radius: 32px;
        background: linear-gradient(105deg, #282621 5.14%, #564722 94.53%);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        padding: 16px 20px;
        bottom: 0;
        z-index: 100;
        width: 62%;
        justify-content: left;
        left: 50%;
        transform: translateX(-50%);
    }

    .sticky-btn ul {
        list-style-type: none;
        justify-content: left;
        padding: 0;
    }

    .sticky-btn a.active {
        display: flex;
        align-items: center;
        gap: 2vw;
    }

    .sticky-btn a.active {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%;
        letter-spacing: 3px;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 0;
        background: none;
        position: relative;
        width: fit-content;
    }

    .sticky-btn a.active span {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        width: 30px;
        height: 30px;
        position: absolute;
        left: 102%;
    }

    .dropdown-menu {
        display: none;
    }

    .dropdown.active .dropdown-menu {
        display: block;
        position: unset;
        background: transparent;
    }

    .sticky-btn a {
        color: var(--primary-200, #BEBEBC);
        justify-content: center;
        font-family: Gilroy-Regular;
        font-size: 16px;
        display: block;
        font-style: normal;
        padding-top: 15px;
        font-weight: 400;
        line-height: 18px;
        /* 112.5% */
        letter-spacing: 3.2px;
        text-transform: uppercase;
    }

    .sticky-btn a.active::after {
        content: "";
        background-image: url(../image//dropdown-arrow.png);
        width: 20px;
        height: 20px;
        position: absolute;
        z-index: 1;
        left: 45vw;
        transition: 0.3s all linear;
    }

    .sticky-btn li.dropdown.active a.active::after {
        transform: rotate(180deg);
    }

}