.case-study-banner {
    padding: 12rem 0 5rem;
    background-color: var(--bs-primary);
}
.case-study-banner .badge {
    color: #fffc;
    background-color: #ffffff1a;
    margin-bottom: 1.5rem;
}
.case-study-banner .main-title {
    max-width: 56rem;
    color: var(--bs-white);
    font-size: 3.75rem;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.case-study-banner .main-title span {
    color: var(--secondary-blue);
}
.case-study-banner p {
    max-width: 42rem;
    color: #fffc;
    margin-bottom: 2rem;
}
.case-study-banner .ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.case-study-filters {
    padding: 2rem 0;
    background-color: var(--bs-light);
}
.case-study-filters .form-select {
    text-align: left;
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.case-study-filters .form-select svg,
.case-study-filters .dropdown-item svg {
    width: 1rem;
    height: 1rem;
}
.case-study-filters .dropdown-menu {
    --bs-dropdown-min-width: 100%;
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-link-active-bg: var(--accent-green);
    --bs-dropdown-item-border-radius: 0.5rem;
    --bs-dropdown-item-padding-x: 2rem;
    --bs-dropdown-link-color: var(--bs-primary);
}
.case-study-filters .dropdown-menu .filter-option {
    position: relative;
}
.case-study-filters .dropdown-menu .filter-option.active::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    left: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.case-study-listings {
    padding: 5rem 0;
    background-color: var(--bs-light);
}
.case-study-listings .card {
    --bs-card-spacer-y: 2.5rem;
    --bs-card-spacer-x: 2.5rem;
}

.case-study-listings .rounded-start::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
    inset: 0;
    background-image: linear-gradient(0deg, rgba(var(--bs-primary-rgb),.8) 0%, rgba(var(--bs-primary-rgb),0) 100%);
}
.case-study-listings .rounded-start > div {
    z-index: 3;
}
.case-study-listings .rounded-start .badge {
    backdrop-filter: blur(4px);
    background-color: #fff3;
}

.case-study-listings .feature {
    text-align: center;
    padding: .75rem;
    background-color: var(--bs-light);
    border-radius: var(--bs-border-radius);
}

.case-study-listings .blockquote {
    padding: .5rem 1rem;
    border-left: solid 4px var(--secondary-blue);
}








.case-study-single-banner {
    padding: 12rem 0 3rem;
    min-height: 60dvh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.case-study-single-banner::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(var(--bs-primary-rgb),.6) 50%, rgba(var(--bs-primary-rgb),.8) 80%, rgba(var(--bs-primary-rgb),1) 100%);
}
.case-study-single-banner .container {
    position: relative;
    z-index: 3;
}
.case-study-single-banner a {
    color: #FFF;
    text-decoration: none;
}
.case-study-single-banner .tags {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}
.case-study-single-banner .badge {
    --bs-badge-padding-x: 0.875em;
    --bs-badge-padding-y: 0.5em;
    --bs-badge-font-size: 0.875em;
    --bs-badge-font-weight: 500;
}
.case-study-single-banner .badge.case-industry {
    background-color: var(--bs-primary);
}
.case-study-single-banner .badge.case-market {
    background-color: #33547c;
}
.case-study-single-banner .main-title {
    max-width: 56rem;
    color: var(--bs-white);
    font-size: 3.75rem;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.case-study-single-banner .main-title span {
    color: var(--secondary-blue);
}
.case-study-single-banner .meta {
    color: #fffc;
}
.case-study-single-banner .meta .list-inline-item {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.case-study-single-banner .meta .list-inline-item:not(:last-child) {
    margin-right: 1rem;
}
.case-study-single-banner .meta svg {
    width: 1rem;
    height: 1rem;
}

.case-study-single-content .row {
    --bs-gutter-x: 3rem;
}
.case-study-single-content .overview {
    margin-bottom: 3rem;
}
.case-study-single-content .alert {
    --bs-alert-border: 0 solid var(--bs-alert-border-color);
    border-left-width: .25rem;
    --bs-alert-padding-x: 2rem;
    --bs-alert-padding-y: 2rem;
    --bs-alert-margin-bottom: 3rem;
}
.case-study-single-content .alert h2 {
    color: var(--bs-alert-color);
}
.case-study-single-content .alert .leading-relaxed {
    color: var(--bs-body-color);
}
.case-study-single-content .implementation {
    counter-reset: implementation;
    margin-bottom: 3rem;
}
.case-study-single-content .implementation-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.case-study-single-content .implementation-list .card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.case-study-single-content .implementation-list .card-body::before {
    counter-increment: implementation;
    content: counter(implementation);
    flex: 1 0 2rem;
    max-width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #e5eaf0;
    color: var(--bs-primary);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.case-study-single-content .takeaways {
    margin-bottom: 3rem;
}
.case-study-single-content .takeaways-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.case-study-single-content .takeaways-list .card {
    --bs-card-border-width: 0;
    --bs-card-bg: #f6f8f9;
    flex: 1 0 50%;
    max-width: calc(50% - .5rem);
}
.case-study-single-content .takeaways-list .card-body {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.case-study-single-content .takeaways-list .card-body svg {
    flex: 1 0 1.25rem;
    max-width: 1.25rem;
    height: 1.25rem;
    color: var(--bs-primary);
    margin-top: .125rem;
}
.case-study-single-content .testimonial .card {
    --bs-card-spacer-y: 2rem;
    --bs-card-spacer-x: 2rem;
}
.case-study-single-content .testimonial .blockquote {
    position: relative;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--bs-primary);
    margin-bottom: 1.5rem;
    font-style: italic;
    padding-left: 2rem;
}
.case-study-single-content .testimonial .blockquote-footer {
    font-size: 1rem;
    color: var(--bs-body-color);
    margin-top: 0;
    padding-left: 2rem;
}
.case-study-single-content .testimonial .blockquote::after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    width: 3rem;
    height: 3rem;
    top: -1rem;
    left: -1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ccd6e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

.case-study-single-content aside .card {
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
}
.case-study-single-content .project-details {
    --bs-list-group-item-padding-x: 0;
    --bs-list-group-item-padding-y: 1rem;
}
.case-study-single-content .project-details .list-group-item {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}
.case-study-single-content .project-details .list-group-item > span:last-child {
    text-align: right;
}

.related-stories {
    position: relative;
    padding: 4rem 0;
    background-color: #f7f8fa;
}
.related-stories .card {
    text-decoration: none;
}
.related-stories .card-img-top {
    position: relative;
    height: 10rem;
    overflow: clip;
}
.related-stories .card-img-top::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background-image: linear-gradient(to top, rgb(0 0 0 / .6), transparent);
}
.related-stories .card-img-top .badge {
    position: absolute;
    z-index: 2;
    bottom: .75rem;
    left: .75rem;
}
.related-stories .card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .5s;
}
.related-stories .card:focus .card-img-top img,
.related-stories .card:hover .card-img-top img {
    transform: scale(1.05);
}

.case-study-listings + .flex-content.cta-bar,
.related-stories + .flex-content.cta-bar {
    padding: 5rem 0;
}
.case-study-listings + .flex-content.cta-bar .main-title,
.related-stories + .flex-content.cta-bar .main-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.case-study-listings + .flex-content.cta-bar .text,
.related-stories + .flex-content.cta-bar .text {
    font-size: 1.125rem;
    line-height: 1.75rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}
.case-study-listings + .flex-content.cta-bar .ctas,
.related-stories + .flex-content.cta-bar .ctas {
    display: flex;
    justify-content: center;
    gap: 1rem;
}


body:not(.modal-open) .case-study-details .aside {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    z-index: 1020;
}


.case-study-listings .card .case-location {
    color: var(--bs-white);
}


@media (max-width: 991px) {
    .case-study-banner .main-title,
    .case-study-single-banner .main-title {
        font-size: 2.75rem;
        line-height: 3rem;
    }
    .case-study-filters > .container > .d-flex:not(.flex-wrap) {
        flex-wrap: wrap;
    }
    .case-study-filters .dropdown {
        flex: 1 0 50%;
        max-width: 48%;
    }
    .case-study-listings .rounded-start {
        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
    }

    .case-study-single-content aside {
        margin-top: 2rem;
    }

    .related-stories .blog-listings .listings .col-md-6:last-child {
        display: none;
        visibility: hidden;
    }
}
@media (max-width: 767px) {
    .case-study-banner .main-title,
    .case-study-single-banner .main-title {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .case-study-filters > .container > .d-flex:not(.flex-wrap) {
        flex-direction: column;
    }
    .case-study-filters .dropdown {
        flex: 1 0 100%;
        max-width: 100%;
    }
    .case-study-listings h2 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .case-study-listings .card {
        --bs-card-spacer-y: 1rem;
        --bs-card-spacer-x: 1rem;
    }
    .case-study-listings .rounded-start .badge {
        display: none;
    }
    .case-study-listings .rounded-start .badge:nth-child(1),
    .case-study-listings .rounded-start .badge:nth-child(2) {
        display: inline-block;
    }

    .case-study-listings .blockquote {
        font-size: .875rem;
    }

    .case-study-single-banner .meta .list-inline {
        flex-direction: column;
    }

    .case-study-single-content .row {
        --bs-gutter-x: 2rem;
    }

    .case-study-single-content .takeaways-list .card {
        flex: 1 0 100%;
        max-width: 100%;
    }

    .case-study-single-content .testimonial .blockquote {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .related-stories .listings {
        gap: 1.5rem;
    }
}

@media (max-width: 575px) {
    .case-study-listings + .flex-content.cta-bar .ctas,
    .related-stories + .flex-content.cta-bar .ctas {
        flex-direction: column;
    }
}