#back-top-btn {
    display: block;
    opacity: 0;
    position: fixed;
    bottom: var(--spacing-unit-m);
    right: var(--spacing-unit-m);
    z-index: 8;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--black);
    cursor: pointer;
    padding: var(--spacing-unit-xm);
    border-radius: 100%;
    box-shadow: none;
    transition: box-shadow 0.3s ease, opacity 0.5s ease;
}

#back-top-btn:hover {
    box-shadow: 0 0 20px 5px var(--light-blue);
}

#back-top-btn:active,
#back-top-btn:focus {
    box-shadow: none;
}

.case-study-intro-text {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-unit-3xl) var(--page-gutter) var(--spacing-unit-l);
}

@media only screen and (min-width: 900px) {
    .case-study-intro-text {
        flex-direction: row;
        align-items: center;
        margin: var(--page-gutter) var(--page-gutter) var(--spacing-unit-2xl);
    }
    
}

.case-study-intro-hero {
    position: relative;
    width: 100vw;
    height: 35vh;
}

@media only screen and (min-width: 900px) {
    .case-study-intro-hero {
        height: 75vh;
    }
}

.case-study-intro-column-left {
    margin-bottom: var(--spacing-unit-xl);
}

@media only screen and (min-width: 640px) {
    .case-study-intro-column-left {
        width: 52%;
        margin-right: 8%;
    }
}

@media only screen and (min-width: 900px) {
    .case-study-intro-column-right {
        width: 40%;
    }
}

.case-study-title {
    font-size: var(--font-size-large-mobile);
    margin-bottom: var(--spacing-unit-m);
}

@media only screen and (min-width: 900px) {
    .case-study-title {
        font-size: var(--font-size-large-tablet-s);
    }
}

.role,
.duration,
.tools {
    margin-bottom: var(--spacing-unit-m);
}

.role h3,
.duration h3,
.tools h3 {
    margin-bottom: var(--spacing-unit-s);
}

.role p,
.duration p,
.tools p,
.case-study-section-text,
.case-study-title-description,
.img-caption,
.column-img-caption,
.scroll-caption,
.bullet-list-container p,
.bullet-list-container li {
    color: var(--description-text-color);
}

.case-study-section-text {
    margin: var(--spacing-unit-m) 0;
}

.case-study-section {
    margin: 0 var(--page-gutter) var(--section-gutter);
}

.case-study-section.section-1 {
    margin: var(--section-gutter) var(--page-gutter);
}

@media only screen and (min-width: 900px) {
    .case-study-section {
        margin: 0 var(--page-gutter) var(--page-gutter);
    }

    .case-study-section.section-1 {
        margin: var(--page-gutter);
    }
}

.case-study-section-heading {
    font-size: var(--font-size-medium-m);
    margin-bottom: var(--spacing-unit-s);
}

@media only screen and (min-width: 900px) {
    .case-study-section-heading {
        font-size: var(--font-size-medium-l);
        margin-bottom: var(--spacing-unit-xm);
    }
}

.case-study-section-extra-heading {
    font-size: 18px;
    margin: var(--spacing-unit-xm) 0 var(--spacing-unit-s);
}

@media only screen and (min-width: 900px) {
    .case-study-section-extra-heading {
        font-size: var(--font-size-medium-s);
        margin: var(--spacing-unit-l) 0 var(--spacing-unit-xm);
    }
}

.img-full-width {
    width: calc(100vw - (2 * var(--page-gutter)));
    height: auto;
    margin-top: var(--spacing-unit-l);
}

.img-outline {
    border: 1px solid var(--light-gray);
}

.inline-link {
    text-decoration: underline;
}

.inline-link:hover {
    text-decoration: none;
}

.case-study-subheading {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    margin: var(--spacing-unit-xs) 0 var(--spacing-unit-s);
}

.lihti .case-study-subheading,
.lihti .inline-link,
.lihti .bold-text,
.lihti .pain-point h3,
.scentair .case-study-subheading,
.scentair .inline-link,
.scentair .bold-text {
    color: var(--turquoise);
}

.zen .case-study-subheading,
.zen .bold-text,
.zen .pain-point h3 {
    color: var(--bright-blue);
}

.zen .inline-link {
    color: var(--dark-blue);
}

.foreign-affairs .case-study-subheading,
.foreign-affairs .inline-link,
.foreign-affairs .bold-text,
.foreign-affairs .pain-point h3 {
    color: var(--red);
}

.sonneman .case-study-subheading,
.sonneman .inline-link,
.sonneman .bold-text {
    color: var(--gold);
}

.boppy .case-study-subheading,
.boppy .inline-link,
.boppy .bold-text {
    color: var(--orchid);
}

.img-caption,
.column-img-caption,
.scroll-caption {
    font-size: 14px;
    font-style: italic;
    text-align: center;
}

.img-caption {
    margin: var(--spacing-unit-m) auto var(--spacing-unit-xl);
}

.column-img-caption {
    margin: var(--spacing-unit-m) auto;
}

.zen-competitors .column-img-caption {
    margin: var(--spacing-unit-l) auto var(--spacing-unit-xl);
}

.bullet-list-container {
    margin-top: var(--spacing-unit-xm);
}

.bullet-list-container ul {
    margin: 12px 0 var(--spacing-unit-m) var(--spacing-unit-xl);
}

.bullet-list-container li {
    list-style-image: url(../assets/bullet-arrow.svg);
    margin-top: 3px;
    padding-inline-start: 8px;
}

.column-img-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stats .column-img-container,
.news .column-img-container,
.companies .column-img-container,
.testimonials .column-img-container {
    padding: 0 var(--spacing-unit-xs);
}

.column-img,
.scroll-img {
    object-fit: cover; 
    height: auto;
    width: 100%;
}

.column-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--spacing-unit-xl);
}

@media only screen and (min-width: 900px) {
    .column-container {
        flex-direction: row;
        margin-top: var(--spacing-unit-3xl);
    }

    .columns-4-6-reversed {
        flex-direction: row-reverse;
    }
}

.column-right,
.cta,
.mission,
.company-filters,
.site-map,
.zen-competitors .onboarding {
    padding-top: var(--spacing-unit-xl);
}

@media only screen and (min-width: 900px) {
    .stacked-imgs-2 {
        padding-top: var(--spacing-unit-l);
    }

    .column-right {
        padding-top: 0;
    }

    .columns-7-3 .column-right {
        width: 30%;
    }

    .columns-7-3 .column-left {
        width: 70%;
        margin-right: var(--spacing-unit-4xl);
    }

    .columns-4-6 .column-right {
        width: 60%;
    }

    .columns-4-6 .column-left {
        width: 40%;
        margin-right: var(--spacing-unit-4xl);
    }

    .columns-4-6-reversed .column-right {
        margin-right: var(--spacing-unit-4xl);
    }

    .columns-4-6-reversed .column-left {
        margin-right: 0;
    }

    .zen-user-flows .columns-4-6 .column-left,
    .zen-user-flows .columns-7-3 .column-left {
        margin-right: var(--spacing-unit-2xl);
    }

    .columns-5-5 .column-right {
        width: 50%;
    }

    .columns-5-5 .column-left {
        width: 50%;
        margin-right: 50px;
    }

    .zen-user-flows .double-description {
        align-items: flex-start;
        margin-bottom: var(--spacing-unit-m);
    }

    .design-system .columns-7-3 .column-left {
        margin: 0 0 0 var(--spacing-unit-2xl);
    }

    .additional-text {
        margin-bottom: var(--spacing-unit-xm);
    }
}

.design-system .column-img-container {
    margin: var(--spacing-unit-m) 0;
}

@media only screen and (max-width: 900px) {
    .design-system .column-right .column-img-container {
        width: 60%;
    }
}

.demo-flow .img-full-width,
.design-system .column-container {
    margin-top: 0;
}

.stage-summary,
.design-system,
.case-study-secondary-section {
    margin: var(--spacing-unit-3xl) 0 var(--spacing-unit-s);
}

.stacked-imgs .stats,
.stacked-imgs .news,
.stacked-imgs-2 .companies,
.stacked-imgs-2 .testimonials {
    display: flex;
    align-items: flex-end;
}

.stacked-imgs .img-caption,
.stacked-imgs-2 .img-caption {
    margin: var(--spacing-unit-xs) auto var(--spacing-unit-xl);
}

.columns-reversed {
    flex-direction: column-reverse;
}

.columns-reversed .column-right {
    padding-top: 0;
}

.columns-reversed .column-left {
    padding-top: var(--spacing-unit-2xl);
}

@media only screen and (min-width: 900px) {
    .columns-reversed {
        flex-direction: row;
    }

    .columns-reversed .column-left {
        padding-top: 0;
    }
}

.info-design-text,
.resources-design-text {
    margin-bottom: var(--spacing-unit-m);
}

.info-design-imgs {
    position: relative;
}

.info-design-imgs .case-study-section,
.info-design-imgs .column-container {
    margin-top: 0;
}

.lihti-screens {
    margin-top: var(--spacing-unit-xl);
}

.info-design-imgs-bg-container {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.info-design-imgs-bg {
    background-color: var(--extra-light-gray);
    width: 100%;
    height: 97%;
}

.resources-design .info-design-imgs-bg {
    height: 80%;
}

@media only screen and (min-width: 900px) {
    .info-design-imgs-bg {
        height: 93%;
    }
}

/* Scroll Box */
.scroll-caption {
    margin: var(--spacing-unit-l) 0 var(--spacing-unit-xm);
}

.scroll-box {
    height: 70vh;
    overflow-y: scroll;
}

.triple-scroll-box-container,
.double-scroll-box-container,
.triple-mobile-design {
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 900px) {
    .triple-scroll-box-container,
    .double-scroll-box-container,
    .triple-mobile-design {
        flex-direction: row;
    }

    .double-scroll-box-container .scroll-box {
        height: 90vh;
    }

    .scroll-box-container,
    .mobile-design-container {
        padding: 0 var(--spacing-unit-xs);
    }
}

@media only screen and (max-width: 899px) {
    .triple-scroll-box-container .scroll-box {
        height: 90vh;
    }
}

@media only screen and (min-width: 900px) {
    .dev-mobile-screens .scroll-box {
        height: 85vh;
    }
    
    .dev-mobile-screens .scroll-caption {
        text-align: left;
    }
}

/* Case Study Footer */
.case-study-projects-footer {
    height: 20vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-unit-m);
}

.case-study-projects-footer.lihti,
.case-study-projects-footer.scentair {
    background-color: var(--turquoise);
}

.case-study-projects-footer.zen{
    background-color: var(--bright-blue);
}

.case-study-projects-footer.foreign-affairs {
    background-color: var(--red);
}

.case-study-projects-footer.sonneman {
    background-color: var(--gold);
}

.case-study-projects-footer.boppy {
    background-color: var(--orchid);
}

.case-study-projects-footer a {
    text-decoration: none;
    color: var(--white);
}

.next-project {
    text-align: right;
}

.project-subheading {
    font-size: 14px;
    margin-bottom: var(--spacing-unit-xs);
}

.case-study-projects-footer .project-name {
    font-size: var(--font-size-medium-m);
}

.triple-mobile-design,
.boppy-hc-products,
.boppy-hc-mobile {
    margin-top: var(--spacing-unit-2xl);
}

.dev-mobile-screens .columns-reversed .column-left {
    padding-top: 0;
}

.zen-affinity-map.column-container {
    align-items: flex-end;
}

.zen-user-flows .column-right,
.transaction-leads {
    padding-top: var(--spacing-unit-m);
}

.fa-data .converts,
.fa-user-flows .subscriber-flow,
.fa-data .converts .bullet-list-container,
.fa-competitor-section {
    padding-top: var(--spacing-unit-3xl);
}

.competitor-item {
    padding-bottom: var(--spacing-unit-s);
}

.competitor-item:last-child {
    padding-bottom: var(--spacing-unit-m);
}