/*----------------------------------------
	33. project css
----------------------------------------*/
@use "../abstract" as *;


// projects area style 
.project-area {
    .noise-wrapper {
        position: absolute;
        opacity: 0.4;
    }
}

.winning-projects {
    p {
        font-size: 30px;
        font-family: var(--tpl-ff-heading);
        display: inline-block;
        position: relative;
        margin-bottom: 0;
        line-height: 30px;
    }
}

.triangle {
    position: absolute;
    right: -400px;
    top: 1085px;

    @media #{$xxl} {
        right: -550px;
    }

    @media #{$xl} {
        right: -650px;
    }

    @media #{$md,$sm,$xs} {
        display: none;
    }
}

.projects-wrapper {
    border: 1px solid #D9D9D9;

    &__border {
        border-top: 1px solid #D9D9D9;
        margin-bottom: 75px;
    }

    >* {
        @media #{$xxs} {
            display: block !important;
        }

        .project-box__thumb {
            border-left: 1px solid #D9D9D9;

            @media #{$xxs,$xs,$sm} {
                border-left: 0;
                border-top: 1px solid #D9D9D9;
            }
        }

        &:not(:first-child)::before {
            position: absolute;
            content: "";
            width: 92%;
            height: 1px;
            background: #D9D9D9;
            top: 0;
            left: 0;

            @media #{$sm,$xs} {
                width: 100%;
            }
        }

        &:nth-child(2n) {
            flex-direction: row-reverse;

            &:before {
                right: 0;
                left: auto !important;
            }

            .project-box__thumb {
                border-right: 1px solid #D9D9D9;
                border-left: 0;
            }
        }
    }
}

.b-right {
    border-right: 1px solid #D9D9D9;
    height: 100%;
    position: relative;
    top: -200px;
    z-index: -1;

    @media #{$xl} {
        top: -170px;
    }

    @media #{$lg} {
        top: -150px;
    }

    @media #{$md,$sm,$xs} {
        display: none;
    }
}

.rot-line {
    position: relative;

    &::before {
        position: absolute;
        content: "";
        height: 1px;
        width: 775px;
        background-color: #D9D9D9;
        bottom: -1380px;
        transform: rotate(128.21deg);
        left: -178px;
        z-index: -1;

        @media #{$xxl} {
            width: 730px;
            bottom: -1330px;
            left: -140px;
        }

        @media #{$xl} {
            width: 588px;
            bottom: -1440px;
            left: -112px;
        }

        @media #{$lg} {
            width: 490px;
            bottom: -1530px;
            left: -94px;
        }

        @media #{$md,$sm,$xs} {
            display: none;
        }
    }
}

.projects-all-view-btn {
    // border-right: 1px solid #D9D9D9;
    // height: 100%;
    text-align: center;
    overflow-x: clip;

    @media #{$md,$sm,$xs} {
        border: 1px solid #D9D9D9;
        border-top: 0;
        padding: 50px 0;
    }

    .c-button {
        position: sticky;
        top: 0;
    }

    // .cross-line {
    //     position: absolute;
    //     content: "";
    //     width: 100%;
    //     height: 1px;
    //     background: #D9D9D9;
    //     bottom: -310%;
    //     left: 0;
    //     transform: rotate(-52deg);
    //     transform-origin: 0 0;

    //     @media #{$md,$sm,$xs} {
    //         display: none;
    //     }
    // }
}

// project style 
.project {
    &__thumb {
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    &__title {
        .icon-box {
            transform: rotate(-45deg);
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.project-box {
    display: flex;
    position: relative;

    @media #{$xxs,$xs,$sm} {
        display: inline;
    }

    >* {
        flex: 1 1 0;
    }

    &-content {
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .project__title {
            font-size: 24px;
            margin-bottom: 88px;

            @media #{$lg,$md,$sm,$xs,$xxs} {
                margin-bottom: 30px;
            }

            a {
                display: flex;
                justify-content: space-between;
                gap: 0 20px;
                align-items: center;

                &:hover {
                    color: var(--clr-theme-2);

                    .icon-box i {
                        animation: iconltr 0.5s forwards;
                    }
                }
            }
        }

        .awards-list-box {
            margin-bottom: 80px;

            @media #{$lg,$md,$sm,$xs,$xxs} {
                margin-bottom: 30px;
            }

            p {
                font-size: 18px;
                font-family: var(--tpl-ff-heading);
                color: var(--clr-theme-1);
                font-weight: 400;
                line-height: 30px;
                margin-bottom: 10px;
            }

            .awards-list {
                ul {
                    li {
                        list-style: none;
                        color: #626262;

                        &:not(:last-child) {
                            margin-bottom: 7px;
                        }
                    }
                }
            }
        }
    }

    &__thumb {
        padding: 24px;


        img {
            width: 100%;
            height: 100%;
        }
    }

    &__btn {
        .text-btn {
            color: var(--clr-theme-2);
            font-family: var(--tpl-ff-heading);

            &:hover {
                color: var(--clr-common-white);
            }
        }
    }

    .is-black a:hover {
        color: var(--clr-theme-1);
    }

}

// Project is white style
.projects-wrapper {
    &.is-white {
        border: 1px solid #414141;

        .project-box-content {
            .project__title {
                color: var(--clr-common-white);
            }

            p {
                color: #A5A5A5;
            }

            .awards-list-box {
                .awards-list {
                    ul {
                        li {
                            color: #A5A5A5;
                        }
                    }
                }
            }
        }

        &>* {
            .project-box__thumb {
                border-left: 1px solid #414141;
            }
        }

        &> :not(:first-child)::before {
            background: #414141;
        }

        &> :nth-child(2n) {
            .project-box__thumb {
                border-right: 1px solid #414141;
                border-left: 0;
            }
        }
    }
}

// Project btn
.project-social-wrappper {
    display: grid;
    grid-auto-rows: auto;
    gap: 30px 0;
    position: sticky;
    margin-top: 0px;
    top: 30px;
    justify-content: center;
}

.social-round-content {
    display: flex;
    align-items: center;
    gap: 15px 20px;

    @media #{$xxs,$xs} {
        gap: 15px 15px;
    }
}

.social-round-link {
    span {
        height: 30px;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #A5A5A5;
        color: #A5A5A5;
        border-radius: 50%;
        font-size: 20px;
    }
}

.social-round-item {
    display: inline-flex;
    align-items: center;
    gap: 20px 86px;
    background: var(--clr-common-white);
    padding: 20px 30px;
    border-radius: 55px;
    justify-content: center;
    max-width: 340px;

    @media #{$xxs} {
        flex-wrap: wrap;
        gap: 0px 44px;
        background: var(--clr-common-white);
        padding: 5px 10px;
    }

    .project-social-title {
        font-size: 24px;
        margin-bottom: 0;
    }

    &:hover {
        .project-social-title {
            color: var(--clr-theme-2);
        }

        .social-round-link {
            span {
                border-color: var(--clr-theme-2);
                color: var(--clr-theme-2);

                i {
                    animation: iconltr 0.5s forwards;
                }
            }
        }
    }
}

.social-item-wrapper {
    .social-round-item {
        background: transparent;
        border: 1px solid #D9D9D9;
    }
}

.social-border-item {
    text-align: center;

    .social-round-item {
        border: 1px solid #D9D9D9;
        background-color: transparent;
    }
}

.project-works-inner-2 {
    .row {
        --bs-gutter-x: 110px;
    }
}

// project-area-2

.project-area-2 {
    position: relative;
    background-color: transparent;
    overflow: hidden;
}

.project__text {
    font-size: 150px;
    font-weight: 500;
    color: var(--clr-theme-primary);
    text-transform: uppercase;
    padding: 50px 0 50px;
    opacity: 1;

    @media #{$xl} {
        font-size: 125px;
    }

    @media #{$lg} {
        font-size: 100px;
    }

    @media #{$md} {
        font-size: 80px;
    }

    @media #{$sm} {
        font-size: 60px;
    }

    @media #{$xs} {
        font-size: 34px;
    }
}

.project__sub-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--clr-theme-primary);
    text-transform: uppercase;
    font-family: var(--tpl-ff-heading);
    margin-bottom: 0;
    line-height: 25px;
    padding-bottom: 10px;
    display: inline-block;
    position: relative;
}

.project__sub-title::after {
    position: absolute;
    content: "";
    width: 111px;
    height: 1px;
    bottom: 0;
    left: 0px;
    background-image: linear-gradient(90deg, var(--clr-theme-2) 0%, transparent 100%);
}

.project__sub-title span {
    font-size: 16px;
    font-weight: 600;
    color: var(--clr-theme-2);
    font-family: var(--tpl-ff-heading);
    padding-left: 27px;
}

.project-box-3-content .project-box-3-title {
    font-size: 24px;
    font-family: var(--tpl-ff-heading);
    font-weight: 300;
    margin-bottom: 0;
    line-height: 1.25;
    margin-top: 20px;
    color: #000;

}

.project__list-1 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 30px 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 0px 30px;
    position: relative;
    margin-bottom: 0;

    @media #{$xs,$sm} {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.project__item {
    padding-bottom: 30px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    scale: 0.5;
    opacity: 0;

    @media (hover:none) {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}


.project__item:nth-child(2n) {
    top: 50%;

    @media #{$xs,$sm} {
        top: 0%;
    }
}

.row_bottom {
    margin-top: 80vh;

    @media #{$xs,$sm} {
        margin-top: -180px;
    }
}

.project-padding {
    @media #{$xs,$xxs,$sm} {
        padding-top: 0;
    }
}

// project-box-3 style 
.project-box-3 {
    &:hover {

        .area-thumb-content {
            transform: scale(0.92);
            opacity: 1;
            visibility: visible;
        }
    }

    &-thumb {
        position: relative;

        img {
            width: 100%;
            aspect-ratio: 100/110;
        }

        .area-thumb-content {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            @include transition(.3s);
            opacity: 0;
            visibility: hidden;

            @media (hover:none) {
                opacity: 1;
                visibility: visible;
            }

            .area-btn {
                position: absolute;
                right: 60px;
                bottom: 60px;

                .icon-box-upward {
                    width: 90px;
                    height: 90px;
                    color: var(--clr-common-white);
                    font-size: 50px;

                    &:hover {
                        color: var(--clr-theme-2);
                    }

                    &::before {
                        border-color: #D9D9D9;
                    }
                }
            }
        }
    }

    &-content {

        padding: 20px 20px;
        position: absolute;
        bottom: 100px;
        background-color: var(--clr-common-white);
        margin: 20px 20px;
        opacity: 0;
        visibility: hidden;
        transition: .5s ease-in-out;

        .tag {
            font-size: 16px;
            color: var(--clr-theme-2);
            background: var(--clr-common-white);
            padding: 2px 16px;
            display: inline-block;
            border-radius: 0;
            border: 1px solid #D9D9D9;

            &:hover {
                color: var(--clr-common-white);
                background-color: var(--clr-theme-1);
                border-color: var(--clr-theme-1);
            }

        }

        .project-box-3-title {
            font-size: 24px;
            font-family: var(--tpl-ff-heading);
            font-weight: 300;
            margin-bottom: 0;
            line-height: 1.25;
            margin-top: 20px;

            @media #{$xs} {
                font-size: 20px;
                margin-top: 10px;
            }

            &:hover {
                color: var(--clr-common-white);
            }
        }
    }
}

.project__item:hover .project-box-3-content {
    opacity: 1;
    visibility: visible;
}

// Projet inner page
.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 104px;

    @media #{$xl} {
        gap: 50px 60px;
    }

    @media #{$lg,$md} {
        gap: 50px 60px;
    }

    @media #{$xs,$sm} {
        grid-template-columns: repeat(1, 1fr);
    }
}

.project__title-2.icon-box {
    transform: rotate(-45deg);
    display: inline-flex;
    justify-content: center;
    align-items: center;

    i {
        font-size: 24px;
    }
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 20px 100px;

    @media #{$lg,$md,$sm,$xs} {
        gap: 20px 30px;
    }
}

.project-link:hover {
    color: var(--clr-theme-2);
}