/* cs prelude */
.section-cs-prelude {
    padding: 100px 0 0;

    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}

@media only screen and (max-width: 1024px) {
    .section-cs-prelude {
        padding: 48px 0 0;
    }
}

.section-cs-prelude h2,
.section-cs-prelude h3,
.section-cs-prelude h4,
.section-cs-prelude p {
    color: var(--color_gray_900);
}

.section-cs-prelude .prelude-top,
.section-cs-prelude .prelude-bottom {
    display: flex;

    gap: 24px;
}

@media only screen and (max-width: 1024px) {
    .section-cs-prelude .prelude-top,
    .section-cs-prelude .prelude-bottom {
        flex-wrap: wrap;
    }
}

.section-cs-prelude .prelude-top > div,
.section-cs-prelude .prelude-bottom > div {
    flex: 0 1 50%;
}

@media only screen and (max-width: 1024px) {
    .section-cs-prelude .prelude-top > div,
    .section-cs-prelude .prelude-bottom > div {
        flex: 0 0 100%;
    }
}

@media only screen and (max-width: 1024px) {
    .prelude-mockup {
        order: 1;
    }

    .prelude-mockup img {
        width: 100%;
    }
}

.prelude-feat .prelude-bold-p {
    margin-bottom: 40px;
    max-width: 506px;
}

@media only screen and (max-width: 1024px) {
    .prelude-feat .prelude-bold-p {
        margin-bottom: 32px;
    }
}

.prelude-feat .prelude-year {
    opacity: 0.1;
}

@media only screen and (max-width: 1024px) {
    .prelude-feat .prelude-year {
        margin-bottom: 48px;
    }
}

.prelude_text h2,
.prelude_text p:not(:last-child) {
    margin-bottom: 40px;
}

@media only screen and (max-width: 1024px) {
    .prelude_text {
        padding-top: 48px;
    }

    .prelude_text h2,
    .prelude_text p:not(:last-child) {
        margin-bottom: 24px;
    }
}

.prelude-numbers {
    margin-top: 68px;
    padding-bottom: 100px;
}

@media only screen and (max-width: 1024px) {
    .prelude-numbers {
        margin-top: 74px;
        padding-bottom: 72px;
    }
}

.prelude-number-item:not(:last-child) {
    margin-bottom: 40px;
}

@media only screen and (max-width: 1024px) {
    .prelude-number-item:not(:last-child) {
        margin-bottom: 56px;
    }
}
/* /cs prelude */


/* cs project scope */
.section-cs-project-scope {
    overflow: hidden;
}

@media only screen and (max-width: 1024px) {
    .section-cs-project-scope {
        padding: 48px 0;
    }
}

.grid-container {
    position: relative;
}

.project-scope-grid {
    display: grid;

    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-gap: 0px;
}

.project-scope-grid::before {
    width: 0;
    padding-bottom: 100%;

    content: '';

    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.cs-project-scope-header {
    grid-area: 2 / 1 / 2 / 5;
}

@media only screen and (max-width: 1024px) {
    .cs-project-scope-header {
        display: none;
    }
}

.cs-project-scope-header-mobile {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .cs-project-scope-header-mobile {
        display: block;

        margin-bottom: 48px;
    }
}

.cs-project-scope-header h2 {
    color: var(--color_gray_900);
}

.step1,
.step2,
.step3,
.week1,
.week2,
.week3,
.week4,
.week5,
.week6,
.week7 {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color_gray_900);

    font-size: var(--cs_heading_4_font_size);
    line-height: var(--cs_line-height_xl);
}

.step1,
.step2,
.step3 {
    position: relative;

    border: 1px solid var(--color_gray_900);
    background-repeat: no-repeat;
}

.step1 {
    margin-bottom: -1px;

    grid-area: 3 / 1 / 4 / 11;
}

.step2 {
    grid-area: 4 / 4 / 5 / 12;
}

.step3 {
    margin-top: -1px;
    margin-left: -1px;

    grid-area: 5 / 12 / 6 / 14;
}

.step1:after,
.step2:after,
.step3:after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    content: '';
    transition: all var(--translation_duration);
    transition-delay: var(--translation_duration--slow);
}

.step1:after {
    background: linear-gradient(90deg, rgba(155, 152, 197, 0.2) 59.16%, rgba(255, 232, 124, 0.2) 100%), #FFFFFF;
}

.step2:after {
    background: linear-gradient(90deg, rgba(155, 152, 197, 0.2) 0%, rgba(255, 232, 124, 0.2) 35.99%), #FFFFFF;
}

.step3:after {
    background: linear-gradient(90deg, rgba(255, 232, 124, 0.2) 0%, rgba(214, 234, 233, 0.2) 51.04%), #FFFFFF;
}

.week1 {
    grid-area: 7 / 1 / 8 / 2;
}

.week2 {
    grid-area: 7 / 3 / 8 / 4;
}

.week3 {
    grid-area: 7 / 5 / 8 / 6;
}

.week4 {
    grid-area: 7 / 7 / 8 / 8;
}

.week5 {
    grid-area: 7 / 9 / 8 / 10;
}

.week6 {
    grid-area: 7 / 11 / 8 / 12;
}

.week7 {
    grid-area: 7 / 13 / 8 / 14;
}

.project-scope-subgrid {
    position: absolute;
    z-index: -1;
    top: 0;

    display: grid;

    width: 100%;

    transition: opacity var(--translation_duration);

    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-gap: 0;
}

.project-scope-subgrid::before {
    width: 0;
    padding-bottom: 100%;

    content: '';

    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.project-scope-subgrid>div {
    position: relative;
}

.project-scope-subgrid>div:nth-child(13n-1):before {
    position: absolute;
    right: -50vw;

    width: 300vw;

    content: '';

    opacity: 0.1;
    border-bottom: 1px solid var(--color_gray_900);
}

.project-scope-subgrid>div:nth-last-child(13):after,
.project-scope-subgrid>div:nth-last-child(12):after,
.project-scope-subgrid>div:nth-last-child(11):after,
.project-scope-subgrid>div:nth-last-child(10):after,
.project-scope-subgrid>div:nth-last-child(9):after,
.project-scope-subgrid>div:nth-last-child(8):after,
.project-scope-subgrid>div:nth-last-child(7):after,
.project-scope-subgrid>div:nth-last-child(6):after,
.project-scope-subgrid>div:nth-last-child(5):after,
.project-scope-subgrid>div:nth-last-child(4):after,
.project-scope-subgrid>div:nth-last-child(3):after,
.project-scope-subgrid>div:nth-last-child(2):after,
.project-scope-subgrid>div:nth-last-child(1):after {
    position: absolute;
    right: 0;
    bottom: 0;

    height: 100vh;

    content: '';

    opacity: 0.1;
    border-right: 1px solid var(--color_gray_900);
}

.project-scope-subgrid>div:nth-last-child(13):before {
    position: absolute;
    bottom: 0;
    left: 0;

    height: 100vh;

    content: '';

    opacity: 0.1;
    border-left: 1px solid var(--color_gray_900);
}

@media only screen and (max-width: 1024px) {
    .grid-container {
        overflow: -moz-scrollbars-none;
        overflow-x: scroll;
        overflow-y: hidden;

        width: calc(100vw - 30px);

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .grid-container::-webkit-scrollbar {
        display: none;
    }

    .project-scope-grid,
    .project-scope-subgrid {
        width: 150%;
        margin-right: 30px;
    }

    .project-scope-subgrid {
        overflow: hidden;

        height: 100%;

        border-bottom: 1px solid rgba(19, 19, 19, 0.1);
    }

    .project-scope-subgrid>div:nth-child(13n-1):before {
        right: 0;
    }

    .step1,
    .step2,
    .step3,
    .week1,
    .week2,
    .week3,
    .week4,
    .week5,
    .week6,
    .week7 {
        font-size: var(--cs_body_font_size);
    }

    .project-scope-grid-swipe {
        position: absolute;
        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 100%;
    }

    .project-scope-grid-swipe:before {
        position: absolute;
        bottom: 10px;
        left: 50%;

        display: block;

        width: 64px;
        height: 64px;
        margin-left: -32px;

        content: '';

        background: url('/wp-content/themes/wpmiquido/img/icons/icon__scroll-hand.svg') 0 0 no-repeat;
    }
}


@media only screen and (max-width: 768px) {
    .project-scope-grid,
    .project-scope-subgrid {
        width: 180%;
    }
}

@media only screen and (max-width: 460px) {
    .project-scope-grid,
    .project-scope-subgrid {
        width: 250%;
    }
}

/* /cs project scope */


/* cs challenge */
.section-cs-challenge {
    padding: 100px 0;

    background: linear-gradient(180deg, #928FBF 0%, rgba(232, 217, 254, 0) 100%);
}

@media only screen and (max-width: 768px) {
    .section-cs-challenge {
        padding: 48px 0 32px;
    }
}

.section-cs-challenge h2,
.section-cs-challenge p {
    color: var(--color_gray_900);
}

.cs-challenge-texts {
    display: flex;

    margin-bottom: 40px;

    column-gap: 24px;
}

@media only screen and (max-width: 768px) {
    .cs-challenge-texts {
        flex-wrap: wrap;

        margin-bottom: 32px;

        column-gap: unset;
        row-gap: 24px;
    }
}

.cs-challenge-texts > div {
    flex: 0 1 33%;
}

@media only screen and (max-width: 768px) {
    .cs-challenge-texts > div {
        flex: 0 0 100%;
    }
}

.cs-challenge-background-solution {
    display: flex;
}

@media only screen and (max-width: 768px) {
    .cs-challenge-background-solution {
        flex-wrap: wrap;
    }
}

.cs-background-solution-texts {
    display: flex;
    flex: 0 1 40%;
    flex-direction: column;

    gap: 80px;
}

@media only screen and (max-width: 768px) {
    .cs-background-solution-texts {
        flex: 0 0 100%;
        order: 1;

        gap: 32px;
    }
}

.cs-background-solution-texts h2 {
    margin-bottom: 40px;
}

@media only screen and (max-width: 768px) {
    .cs-background-solution-texts h2 {
        margin-bottom: 24px;
    }
}

.cs-background-solution-image {
    flex: 0 1 60%;
}

@media only screen and (max-width: 768px) {
    .cs-background-solution-image {
        flex: 0 0 100%;

        margin-bottom: 32px;
    }
}

.cs-background-solution-image {
    position: relative;
}

.cs-background-solution-image img {
    max-width: 100%;
}

.cs-background-solution-image .mockup {
    position: absolute;
    top: 0;
    right: 0;

    width: auto;
}

.cs-background-solution-image .mockup1 {
    position: relative;
    z-index: 1;

    float: right;

    animation: floatImg 5s ease-in-out infinite;
}

.cs-background-solution-image .mockup2 {
    animation: floatImg 5s ease-in-out infinite;
    animation-delay: 1s;
}

.cs-challenge-cta {
    text-align: center;
    margin-top: 100px;
    display: flex;
    justify-content: center;
}

@media only screen and (max-width: 1024px) {
    .cs-challenge-cta {
        margin-top: 60px;
        margin-bottom: 60px;
    }
}
/* /cs challenge */


/* cs video */
.section-cs-video {
    padding-top: 100px;
}

@media only screen and (max-width: 768px) {
    .section-cs-video {
        display: none;
    }
}

.section-cs-video video {
    width: 100%;
}
/* /cs video */


/* cs scope minimal */
.section-cs-scope-minimal {
    padding: 80px 0 100px;
}

@media only screen and (max-width: 768px) {
    .section-cs-scope-minimal {
        padding: 0 0 48px;
    }
}

.container-cs-scope-minimal {
    display: flex;
}

@media only screen and (max-width: 768px) {
    .container-cs-scope-minimal {
        flex-wrap: wrap;
    }
}

.cs-scope-minimal-header {
    flex: 0 0 25%;
}

@media only screen and (max-width: 768px) {
    .cs-scope-minimal-header {
        flex: 0 0 100%;

        margin-bottom: 24px;
    }
}

.section-cs-scope-minimal h2 {
    color: var(--color_gray_900);
}

.section-cs-scope-minimal p {
    color: var(--color_gray_900);
}
/* /cs scope minimal */


/* cs result 3 col + image */
.section-cs-result-3-col-image {
    padding: 100px 0;
}

@media only screen and (max-width: 768px) {
    .section-cs-result-3-col-image {
        padding: 48px 0;
    }
}

.cs-result-header {
    margin-bottom: 40px;
}

@media only screen and (max-width: 768px) {
    .cs-result-header {
        margin-bottom: 32px;
    }
}

.cs-result-header h2 {
    color: var(--color_gray_900);
}

.container-cs-result {
    display: flex;

    column-gap: 24px;
}

@media only screen and (max-width: 768px) {
    .container-cs-result {
        flex-wrap: wrap;

        column-gap: unset;
        row-gap: 24px;
    }
}

.container-cs-result > div {
    flex: 0 1 33%;
}

@media only screen and (max-width: 768px) {
    .container-cs-result > div {
        flex: 0 1 100%;
    }
}

.container-cs-result p {
    color: var(--color_gray_900);
}

.container-cs-result-image {
    overflow: hidden;

    margin-top: 40px;

    aspect-ratio: 2.9 / 1;
}

@media only screen and (max-width: 768px) {
    .container-cs-result-image {
        margin-top: 32px;
    }
}

.container-cs-result-image figure {
    overflow: hidden;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 0;
    background-size: cover;

    will-change: background-position-y;
}

.container-cs-result-image img {
    width: 100%;
    height: auto;
}
/* /cs result 3 col + image */


/* cs key takeaways */
.section-cs-key-takeaways {
    padding: 100px 0 0;
}

@media only screen and (max-width: 768px) {
    .section-cs-key-takeaways {
        padding: 48px 0 0;
    }
}

.section-cs-key-takeaways h2 {
    margin-bottom: 40px;

    color: var(--color_gray_900);
}

@media only screen and (max-width: 768px) {
    .section-cs-key-takeaways h2 {
        margin-bottom: 32px;
    }
}

.cs-key-takeaways-boxes {
    display: flex;

    gap: 24px;
}

@media only screen and (max-width: 768px) {
    .cs-key-takeaways-boxes {
        flex-wrap: wrap;

        gap: 32px;
    }
}

.cs-key-takeaways-box {
    flex: 0 1 50%;

    padding: 24px;
}

@media only screen and (max-width: 768px) {
    .cs-key-takeaways-box {
        flex: 0 0 100%;
    }
}

.cs-key-takeaways-box h3 {
    margin-bottom: 40px;

    color: var(--color_gray_900);
}

@media only screen and (max-width: 768px) {
    .cs-key-takeaways-box h3 {
        margin-bottom: 24px;
    }
}

.cs-key-takeaways-box p {
    color: var(--color_gray_900);
}

.cs-key-takeaways-bottom {
    display: flex;

    padding-top: 88px;

    background: linear-gradient(180deg, #D6EAE9 0%, #EEFCFF 91.15%);
}

@media only screen and (max-width: 768px) {
    .cs-key-takeaways-bottom {
        flex-wrap: wrap;

        padding-top: 32px;

        background: unset;
    }
}

.cs-key-takeaways-bottom > div {
    flex: 0 1 50%;
}

@media only screen and (max-width: 768px) {
    .cs-key-takeaways-bottom > div {
        flex: 0 0 100%;
    }
}

.container-cs-key-takeaways-image {
    display: flex;
    align-items: flex-end;

    padding: 48px 24px 0 48px;
}

@media only screen and (max-width: 768px) {
    .container-cs-key-takeaways-image {
        order: 1;

        padding: 0;
    }
}

.container-cs-key-takeaways-image img {
    width: 100%;
    height: auto;
}

.container-cs-key-takeaways-quote {
    margin-bottom: 64px;
    padding: 48px;
}

@media only screen and (max-width: 768px) {
    .container-cs-key-takeaways-quote {
        margin-bottom: 32px;
        padding: 0;
    }
}

.container-cs-key-takeaways-quote blockquote {
    position: relative;

    color: var(--color_gray_900);
}

.container-cs-key-takeaways-quote blockquote:before {
    position: absolute;
    top: 0;
    left: -14px;

    display: block;

    content:'“';

    color: var(--color_gray_900);

    font-family: var(--cs_font_family_quote);
    font-size: var(--cs_decor_4_font_size);
}

.container-cs-key-takeaways-quote blockquote p {
    letter-spacing: var(--cs_letter-spacing);

    font-family: var(--cs_font_family_quote);
}

.container-cs-key-takeaways-quote blockquote cite {
    position: relative;

    display: block;

    margin-top: 10px;
    padding-top: 10px;
}

/* /cs key takeaways */


/* cs more projects */
.section-cs-more-projects {
    padding: 100px 0;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    .section-cs-more-projects {
        padding: 48px 0;
    }
}

.section-cs-more-projects h3 {
    margin-bottom: 40px;

    color: var(--color_gray_900);
}

@media only screen and (max-width: 768px) {
    .section-cs-more-projects h3 {
        margin-bottom: 32px;
    }
}

.more-projects-container {
    position: relative;

    width: 77%;
}

@media only screen and (max-width: 460px) {
    .more-projects-container {
        width: 100%;
    }
}

.section-cs-more-projects .owl-stage {
    display: flex;
}

.more-projects-item a {
    position: relative;

    display: block;
}

.more-projects-item a:before {
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    content: '';
    transition: all var(--translation_duration);

    opacity: 0;
    background-color: inherit;
}

.more-projects-item a:hover:before {
    opacity: 0.4;
}

.more-projects-item a img {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .more-projects-img {
        display: none;
    }
}

.more-projects-img-mobile {
    display: none;
}

@media only screen and (max-width: 768px) {
    .more-projects-img-mobile {
        display: block;
    }
}

.more-projects-item .more-project-item-title {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;

    max-width: calc(100% - 64px);
    padding: 20px 48px 5px 0;

    background-color: var(--c_neutral--25);
}

@media only screen and (max-width: 768px) {
    .more-projects-item .more-project-item-title {
        padding: 28px 16px 0px 0;

    }
}

.more-project-item-title .project-logo {
    max-width: 113px;
    margin-bottom: 10px;
}

.more-project-item-title p {
    position: relative;

    display: flex;
    align-items: center;

    text-transform: lowercase;

    color: var(--color_gray_900);
}

.more-project-item-title p span {
    display: block;

    width: 40px;
    height: 2px;

    content: '';
}

.more-project-item-title h4 {
    overflow: hidden;

    margin-top: 10px;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: var(--color_gray_900);
}

@media only screen and (max-width: 768px) {
    .more-project-item-title h4 {
        white-space: unset;
    }
}

.section-cs-more-projects .owl-nav {
    position: absolute;
    top: calc(50% - (56px / 2));

    display: flex;

    width: 100%;
    height: 0;
}

.section-cs-more-projects .owl-nav .owl-next {
    margin-right: -1px;
    margin-left: auto;
}

.section-cs-more-projects .owl-nav button {
    padding: 0;

    cursor: pointer;

    border: none;
    background: transparent;
}

.section-cs-more-projects .owl-nav button.disabled {
    display: none;
}

.section-cs-more-projects .owl-nav button .arrow {
    display: block;

    width: 56px;
    height: 56px;

    transition: all var(--translation_duration);

    background-color: var(--white);
    background-repeat: no-repeat;
    background-position: center;

    position: relative;
    z-index: 1;
}

.section-cs-more-projects .owl-nav button .arrow:hover {
    background-color: var(--color_gray_200);
}

.section-cs-more-projects .owl-nav button .arrow.arrow-prev {
    background-image: url(../../img/shapes/cs-slider-arrow-right.svg);
    left: 1px;
}

.section-cs-more-projects .owl-nav button .arrow.arrow-next {
    background-image: url(../../img/shapes/cs-slider-arrow-left.svg);
    right: 1px;
}

.section-cs-more-projects .owl-dots {
    display: none;
}
/* /cs more projects */