.projects-wrapper > .intro {
    margin-top: 5rem;
    .text {
        padding-bottom: 2.5rem;
        border-bottom: solid 1px var(--bs-light-gray);
        p:last-child {
            margin-bottom: 0;
        }
    }
}

#projects-filter {
    margin: 2.5rem 0 3.75rem;
    .form-select[aria-expanded="true"] {
        background-image: url("data:image/svg+xml,%3Csvg width='13' height='14' viewBox='0 0 13 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.27832 1L11.6105 12.6149' stroke='%23dee2e6' stroke-width='1.75283' stroke-linecap='round'/%3E%3Cpath d='M11.4126 1L1.1941 12.715' stroke='%23dee2e6' stroke-width='1.75283' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .input-group-text,
    .form-control {
        border-color: var(--bs-border-color-translucent);
        background-color: var(--bs-white);
    }
    .card {
        --bs-card-border-width: 0;
        --bs-card-bg: var(--bs-body-bg);
        --bs-card-border-radius: 0;
        padding: 3.5rem 0 0 0;
    }
    .nav {
        --bs-nav-link-color: var(--bs-black);
        --bs-nav-link-hover-color: var(--bs-black);
        --bs-nav-link-font-weight: 500;
        --bs-nav-link-padding-y: 0.25rem;
        --bs-nav-link-padding-x: 0.5rem;
        .nav-item {
            margin-bottom: .5rem;
        }
        .btn-link {
            color: var(--bs-black);
            --bs-btn-active-bg: #D6E3FB;
            width: 100%;
            text-align: left;
            text-decoration: none;
        }
    }
    .tab-pane {
        padding-left: 4rem;
        max-height: 290px;
        overflow-x: hidden;
        overflow-y: auto;
        .btn-link {
            color: var(--bs-body-color);
            --bs-btn-active-bg: #D6E3FB;
            width: 100%;
            text-align: left;
            font-weight: 400;
            text-decoration: none;
            text-transform: none;
        }
    }
    #all-projects {
        padding: 3.75rem 0 0;
        &:not(.active) {
            display: none;
        }
    }
}

#projects-results {
    --column-gap: 2rem;
    --row-items: 3;
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: var(--column-gap);
    grid-row-gap: 2rem;
    margin-bottom: 4rem;
    .item {
        flex: 1 0 calc(100% / var(--row-items));
        max-width: calc((100% / var(--row-items)) - (var(--column-gap) / var(--row-items)) * (var(--row-items) - 1));
        aspect-ratio: 1/.85;
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 1rem;
        text-decoration: none !important;
        border-radius: var(--bs-border-radius);
        overflow: hidden;
        margin-bottom: .5rem;
        &::before,
        &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: 2;
            /* inset: 0; */
            top: 20%;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            opacity: .6;
            background: linear-gradient(to bottom,rgba(5,13,50,0) 0%,rgba(5,13,50,1) 100%);
            transition: all .3s ease-in-out;
        }
        &::after {
            opacity: 0;
            background: linear-gradient(to bottom,rgba(5,13,50,0) 0%,rgba(5,13,50,1) 100%);
        }
        .title {
            position: relative;
            z-index: 3;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            h5 {
                color: var(--bs-light);
            }
            > svg {
                flex: 1 0 54px;
                max-width: 54px;
                transition: all .2s ease-in-out;
                circle,
                path {
                    stroke: #F3F5F8;
                }
            }
        }
        .image {
            position: absolute;
            z-index: 1;
            inset: 0;
            > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        &:hover {
            &::after {
                opacity: 1;
            }
            .title {
                > svg {
                    transform: rotate(-45deg);
                    circle {
                        stroke: #CFFC51;
                        fill: #CFFC51;
                    }
                    path {
                        stroke: #121317;
                    }
                }
            }
        }
        &:not(.show) {
            display: none;
        }
    }
    &:not(:has(.show))::after {
        content: "No Results Found - Please Modify Your Search or Filters";
        display: block;
        text-align: center;
        padding: 45px 15px;
        flex: 1 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    #projects-results {
        --row-items: 2;
    }
}
@media (max-width: 375px) {
    #projects-results {
        --row-items: 1;
    }
}


/* single */
#projects.single {
    padding: 3.75rem 0 0 0;
    .project-header {
        > .title {
            + .meta {
                margin: 4rem 0 2.5rem;
            }
        }
         > .row {
            +.title {
                margin: 3.75rem 0;
            }
         }
    }
    .meta {
        border: solid 1px var(--bs-light-gray);
        border-radius: var(--bs-border-radius);
        padding: 2.75rem;
        /* margin: 4rem 0 2.5rem; */
        .list-unstyled {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin: 2.5rem 0 0;
            span.btn {
                pointer-events: none;
            }
            + .text {
                margin-top: 2.5rem;
                padding-top: 2.5rem;
                border-top: solid 1px var(--bs-light-gray);
                p > span {
                    color: inherit !important;
                    font-family: inherit !important;
                }
                p:last-child {
                    margin-bottom: 0;
                }
            }
            + .partners {
                margin-top: 2.5rem;
                padding-top: 2.5rem;
                border-top: solid 1px var(--bs-light-gray);
            }
        }
    }
    .text {
        h4 {
            text-transform: uppercase;
            margin-bottom: 1.875rem;
        }
    }
    #project-staff {
        margin-top: 2.5rem;
        h4 {
            text-transform: uppercase;
            margin-bottom: 1.875rem;
        }
        + .container-fluid {
            margin-top: 2.5rem;
        }
    }

    #projects-slider {
        margin-bottom: 3.75rem;
        border-radius: var(--bs-border-radius);
        overflow: hidden;
        .swiper-slide {
            aspect-ratio: 2/1;
            > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            &::before {
                content: "";
                display: block;
                position: absolute;
                z-index: 2;
                left: 0;
                right: 0;
                bottom: 0;
                height: 140px;
                pointer-events: none;
                opacity: .8;
                background: linear-gradient(to bottom,rgba(5,13,50,0) 0%,rgba(5,13,50,1) 100%);
            }
        }
    }

    &.vertical {
        .project-header {
            .row {
                --bs-gutter-x: 3.75rem;
            }
            .meta {
                .list-unstyled {
                    gap: .75rem;
                    flex-direction: column;
                }
            }
        }
        #projects-slider {
            margin-bottom: 0;
            .swiper-slide {
                aspect-ratio: .85/1;
            }
        }
    }
}

#related-projects {
    background-color: var(--bs-black);
    color: var(--bs-light);
    padding: 6rem 0 0;
    margin-top: 4rem;
    h2 {
        color: var(--bs-light);
        margin-bottom: 1.375rem;
    }
    .swiper-nav {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-bottom: 2.5rem;
        position: relative;
    }
    .swiper-button-next, .swiper-button-prev {
        position: static;
        margin-top: 0;
    }
    #related-projects-slider {
        padding-bottom: 0;
        .swiper-wrapper {
            margin: 3rem 0 0 0;
        }
        .swiper-slide {
            aspect-ratio: 1/.85;
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            padding: 1rem;
            text-decoration: none !important;
            border-radius: var(--bs-border-radius);
            overflow: hidden;
            margin-bottom: .5rem;
            &::before,
            &::after {
                content: "";
                display: block;
                position: absolute;
                z-index: 2;
                left: 0;
                right: 0;
                bottom: 0;
                height: 140px;
                pointer-events: none;
                opacity: .8;
                background: linear-gradient(to bottom,rgba(5,13,50,0) 0%,rgba(5,13,50,1) 100%);
            }
            &::after {
                opacity: 0;
                background: linear-gradient(to bottom,rgba(5,13,50,0) 40%,rgba(5,13,50,1) 100%);
            }
            .title {
                position: relative;
                z-index: 3;
                width: 100%;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                gap: 1rem;
                h5 {
                    color: var(--bs-light);
                }
                > svg {
                    flex: 1 0 60px;
                    max-width: 60px;
                    transition: all .2s ease-in-out;
                    circle,
                    path {
                        stroke: #F3F5F8;
                    }
                }
            }
            .image {
                position: absolute;
                z-index: 1;
                inset: 0;
                > img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            &:hover {
                &::after {
                    opacity: .8;
                }
                .title {
                    > svg {
                        transform: rotate(-45deg);
                        circle {
                            stroke: #CFFC51;
                            fill: #CFFC51;
                        }
                        path {
                            stroke: #121317;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 991px) {
    #projects.single {
        #project-staff {
            #bio-results {
                --row-items: 3.5;
            }
        }
    }
}
@media (max-width: 767px) {
    .projects-wrapper {
        > .intro {
            margin-top: 2rem;
            .text {
                padding-bottom: 1.25rem;
            }
        }
        #projects-filter {
            margin: 1.25rem 0 2.5rem;
            .col-auto {
                width: 100%;
            }
            .col + .col-auto {
                margin-top: 1rem;
            }
            .tab-pane {
                padding-left: 0;
            }
            .btn {
                width: auto;
            }
            #projectFilters {
                /* display: block; */
                .card {
                    padding: 2rem 0 0 0;
                }
                .tab-pane {
                    .list-unstyled {
                        columns: 2;
                        break-inside: avoid;
                        gap: 0;
                        display: block;
                        li {
                            display: inline-block;
                            margin-bottom: 1rem;
                            .btn {
                                padding: 0;
                                &.active {
                                    background: none;
                                    font-weight: 700;
                                }
                            }
                        }
                    }
                }
            }
        }
        #projects-results {
            --row-items: 2;
            grid-row-gap: 1rem;
            margin-bottom: 2.5rem;
            .item {
                .title {
                    svg {
                        flex: 1 0 45px;
                        max-width: 45px;
                        max-height: 45px;
                    }
                }
            }
        }
    }
    #projects.single {
        padding-top: 1rem;
        #projects-slider {
            margin-bottom: 1rem;
            .swiper-slide {
                aspect-ratio: 1.125/1;
            }
        }
        .meta {
            margin-top: 1.5rem !important;
            padding: 1.25rem;
            .list-unstyled {
                gap: .75rem;
                margin-top: 1.25rem;
                + .text {
                    margin-top: 1.25rem;
                    padding-top: 1.25rem;
                }
            }
        }
        .text {
            h4 {
                margin-bottom: 1.25rem;
            }
        }
        #project-staff {
            margin-bottom: 2rem;
        }
    }
    #related-projects {
        padding: 1.25rem 0;
        .swiper-nav {
            gap: 0.375rem !important;
            margin-bottom: 0 !important;
        }
        .swiper-wrapper {
            margin: 1.25rem 0 0 0 !important;
            .swiper-slide {
                aspect-ratio: 49/27 !important;
                .title {
                    h5 {
                        font-size: .875rem;
                    }
                    > svg {
                        flex: 1 0 30px !important;
                        max-width: 30px !important;
                    }
                }
            }
        }
    }
}
@media (max-width: 575px) {
    .projects-wrapper {
        #projects-results {
          --row-items: 1;
        }
    }
    #projects.single {
        #project-staff {
            #bio-results {
                --row-items: 1.5;
            }
        }
    }
}