.breadcrumbs {
    font-family: var(--urbanist);
    font-size: var(--fs-xs);
    color: var(--primary-color);
    margin: var(--space-lg) 0 var(--space-lg);
}

.breadcrumbs a {
    text-decoration: none;
    color: var(--primary-color);
}

.breadcrumbs a:hover {
    color: var(--gold);
}

.breadcrumbs span {
    color: var(--gold);
}

.project-image {
    margin: 0 0 var(--space-section) 0;
    max-height: 700px;
    border-radius: var(--space-xs);
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: clamp(260px, 48vw, 700px);
    object-fit: cover;
    display: block;
}

.project-detail-grid {
    display: grid;
    grid-template-columns: 350px 350px;
    gap: var(--space-lg);
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.project-detail-grid .left {
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.project-detail-grid .left h1 {
    font-family: var(--urbanist);
    font-size: var(--fs-lg);
    color: var(--primary-color);
}

.project-detail-grid .left p {
    font-family: var(--urbanist);
    font-size: var(--fs-xs);
    color: var(--primary-color);
}

.project-detail-grid .middle {
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.project-detail-grid .middle .project-detail {
    display: flex;
    justify-content: space-between;
    font-family: var(--urbanist);
    font-size: var(--fs-xs);
    color: var(--primary-color);
    border-bottom: 1px solid #cccccc;
    padding-bottom: var(--space-xs);
}

.project-detail-grid .right {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.project-detail-grid .right p {
    font-family: var(--urbanist);
    font-size: var(--fs-xs);
    color: var(--primary-color);
}

.project-detail-grid .right .client-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.project-detail-grid .right .client-info img {
    width: 40px;
    height: 40px;
    background-color: grey;
    object-fit: cover;
    border-radius: 999px;
    display: block;
}

.project-detail-grid .right .client-info h3 {
    font-family: var(--urbanist);
    font-size: var(--fs-sm);
    color: var(--primary-color);
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: var(--space-lg);
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc;
}

.divider span {
    margin: 0 10px;
    font-size: var(--fs-base);
    font-weight: bold;
}

.project-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-bottom: var(--space-section);
}

.project-heading-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.project-heading-content h2 {
    font-family: var(--urbanist);
    font-size: var(--fs-lg);
    color: var(--primary-color);
}

.project-heading-content p {
    font-family: var(--urbanist);
    font-size: var(--fs-sm);
    color: var(--primary-color);
}

.project-heading-images {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-xs);
}

.project-heading-images.top-images {
    margin: 0 0 var(--space-section) 0;
}



.project-heading-images:not(:has(img)) {
    display: none;
}

.project-heading-images:has(> :only-child) {
    grid-template-columns: 1fr;
}

.project-heading-images div {
    width: 100%;
    height: 400px;
    background-color: rgb(77, 76, 76);
    border-radius: var(--space-xs);
    overflow: hidden;
}

.project-heading-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-heading-images .box1 {
    background-color: grey;
}

.project-heading-images .box3 {
    grid-column: 1/3;
}

.explore-more {
    margin-bottom: var(--space-section);
}

.explore-more h2 {
    font-family: var(--playfair-display);
    font-size: var(--fs-xl);
    color: var(--primary-color);
    margin-bottom: var(--space-md);
}

.explore-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-section) var(--space-xs);
}

.explore-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.explore-card.is-clickable {
    cursor: pointer;
}

.explore-card.is-hidden {
    display: none;
}



.explore-card .explore-image {
    width: 100%;
    max-width: 350px;
    height: clamp(240px, 24vw, 320px);
    overflow: hidden;
    border-radius: var(--space-xs);
}

.explore-card .explore-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.explore-description {
    max-width: 100%;
    padding: var(--space-xs);
    background-color: white;
    border-radius: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.explore-description .explore-image {
    margin-left: auto;
    margin-right: auto;
}

.explore-description .explore-image img {
    object-position: center;
}

.explore-description .icons {
    display: flex;
    align-items: center;
    gap: 5px;


}

.explore-description .icons span {
    font-family: 'JetBrains Mono', monospace;
    font-size: calc(var(--fs-xs) - 4px);
    color: var(--primary-color);
    margin-right: var(--space-sm);
}

.explore-description h2 {
    font-family: var(--urbanist);
    font-size: var(--fs-base);
    color: var(--primary-color);
    margin-bottom: 0;
}

.explore-description h2 a {
    text-decoration: none;
}

.explore-description p {
    font-family: var(--urbanist);
    font-size: var(--fs-base);
    color: var(--primary-color);
}

.explore-description .small {
    font-size: var(--fs-xs);
}

.explore-description a {
    font-family: var(--urbanist);
    font-size: var(--fs-sm);
    color: var(--primary-color);
}


@media (min-width: 769px) and (max-width: 1024px) {
    .project-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
        align-items: start;
    }

    .project-detail-grid .left {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .project-detail-grid .middle,
    .project-detail-grid .right {
        max-width: 100%;
        min-width: 0;
    }

    .project-heading-content {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: var(--space-md);
    }

    .project-heading-images div {
        height: 300px;
    }
}


@media (max-width: 1024px) {


    .project-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .project-detail-grid .left {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .project-detail-grid .middle,
    .project-detail-grid .right {
        max-width: 100%;
        min-width: 0;
    }


    .project-heading-content {
        gap: var(--space-md);
    }


    .project-heading-images div {
        height: 300px;
    }

    .explore-card:nth-child(even) {
        direction: ltr;
    }

    .explore-card .image {
        max-width: 100%;
    }


    .explore-card .project-image {
        max-width: 100%;
        height: clamp(220px, 34vw, 320px);
    }
}


@media (max-width: 768px) {


    .project-image {
        margin: var(--space-xl) 0;
    }

    .project-image img {
        height: clamp(220px, 52vw, 420px);
    }


    .project-detail-grid {
        grid-template-columns: 1fr;
    }

    .project-detail-grid .left {
        grid-column: auto;
    }


    .project-heading-content {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }


    .project-heading-images div {
        height: 200px;
    }

    .mulberry-page .project-heading-images .box1 img {
        object-position: center 40%;
    }

    .mulberry-page .project-heading-images .box1 img.mobile-pos-60 {
        object-position: center 60%;
    }

    .mulberry-page .project-heading-images .box1 img.mobile-pos-80 {
        object-position: center 80%;
    }

    .explore-card .explore-image {
        height: 280px;
    }
}


@media (max-width: 576px) {


    .project-heading-images {
        grid-template-columns: 1fr;
    }

    .project-heading-images .box3 {
        grid-column: auto;
    }

    .project-heading-images div {
        height: 160px;
    }

    .mulberry-page .project-heading-images .box1 img {
        object-position: center 40%;
    }

    .mulberry-page .project-heading-images .box1 img.mobile-pos-60 {
        object-position: center 60%;
    }

    .mulberry-page .project-heading-images .box1 img.mobile-pos-80 {
        object-position: center 80%;
    }

    .project-image img {
        height: clamp(200px, 58vw, 320px);
    }


    .project-detail-grid .middle .project-detail {
        flex-direction: column;
        gap: 2px;
    }

    .explore-description h2 {
        font-size: var(--fs-lg);
    }

    .explore-description .icons {
        flex-wrap: wrap;
    }

    .explore-grid {
        grid-template-columns: 1fr;
    }

    .explore-card .explore-image,
    .explore-description {
        max-width: 100%;
    }

}