.why-us-page {
    & .why-us-page__header {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        background-image: url('../img/bkg-whyus-hero.png');
        background-size: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        height: 718px;

        & .why-us-page__back-container {
            display: flex;
            justify-content: space-between;
            padding: 36px 1rem;
            width: 100%;
            max-width: 1140px;

            & .why-us-page__title {
                display: flex;
                padding: 6px 16px;
                align-items: flex-start;
                border-radius: 4px;
                border: 1px solid var(--color-dark-gray);

                & .tag-small {
                    color: var(--color-dark-gray);
                    text-transform: uppercase;
                }
            }

            & .why-us-page__go-back {
                display: flex;
                height: 32px;
                padding: 4px 0px;
                align-items: center;

                & .tag-small {
                    color: var(--color-dark-gray);
                    text-transform: uppercase;
                    text-decoration: none;
                    display: flex;
                    gap: 5px;
                    transition: all .3s ease-in-out;

                    -webkit-transition: all .3s ease-in-out;
                    -moz-transition: all .3s ease-in-out;
                    -ms-transition: all .3s ease-in-out;
                    -o-transition: all .3s ease-in-out;

                    &:hover {
                        gap: 8px;
                    }

                    & svg {
                        fill: var(--color-dark-gray);
                        margin-top: 0px;

                        & path {
                            fill: var(--color-dark-gray);
                        }
                    }
                }
            }
        }

        & .why-us-page__hero {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 145px 0 96px;
            width: 1140px;

            & .why-us-page__hero-container {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-flow: column;
                gap: 24px;
                max-width: 1140px;
                width: 100%;

                & .why-us-page__hero-text {
                    width: 100%;
                    max-width: calc(100%);
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    gap: 32px;
                    align-items: flex-start;

                    & .h2-title-hero {
                        width: 100%;
                        max-width: 876px;
                        color: var(--color-blue-dark);
                    }

                    & .txt-large {
                        color: var(--color-gray);
                        width: 100%;
                        max-width: 876px;
                        text-align: left;
                    }
                }
            }
        }
    }

    & .why-us-page__what-we-do {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: center;
        padding: 96px 0;
        max-width: 1140px;
        width: calc(100% - 4rem);
        margin: 0 auto;

        & .why-us-page__what-we-do-container {
            display: flex;
            flex-flow: row;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 0;

            & .why-us-page__what-we-do-img {
                width: 50%;
                max-width: 550px;
                height: 400px;

                & img {
                    width: 100%;
                }
            }

            & .why-us-page__what-we-do-text {
                display: flex;
                flex-flow: column;
                align-items: flex-start;
                max-width: 100%;
                width: auto;
                gap: 16px;

                & h2.h2-title {
                    background: var(--GC-MainGradient, linear-gradient(42deg, #25C3C1 4.8%, #377EF7 98.12%));
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    text-align: left;
                }

                & p.txt-medium {
                    color: var(--color-gray);
                    max-width: 558px;
                    text-align: left;
                }
            }
        }
    }

    & .why-us-page__team {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 1140px;
        width: calc(100% - 4rem);
        margin: 0 auto;
        padding: 96px 0;

        & .why-us-page__team-container {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 0;

            & .why-us-page__team-text {
                width: calc(50% - 12px);
                display: flex;
                flex-flow: column;
                justify-content: center;
                gap: 16px;

                & h2.h2-title {
                    background: var(--GC-MainGradient, linear-gradient(42deg, #25C3C1 4.8%, #377EF7 98.12%));
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    text-align: left;
                }

                & p.txt-medium {
                    color: var(--color-gray);
                    max-width: 558px;
                    text-align: left;
                }
            }

            & .why-us-page__team-img {
                width: 50%;
                max-width: 550px;
                height: 400px;

                & .why-us-page__img {
                    width: 100%;
                }
            }
        }
    }

    & .why-us-page__trusted-companies {
        display: flex;
        width: 1140px;
        height: auto;
        padding: 20px;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        gap: 24px;
        flex-shrink: 0;
        margin: 0 auto;

        & .why-us-page__trusted-companies-text {
            display: flex;
            width: 788px;
            padding: 10px;
            flex-direction: column;
            align-items: center;
            gap: 32px;
            margin-bottom: 64px;

            & .h2-title {
                text-align: center;
                background: var(--GC-Branding-2025-GC-Gradient, linear-gradient(42deg, #25C3C1 4.8%, #377EF7 98.12%));
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            & p.txt-medium {
                color: var(--color-gray);
                text-align: center;

            }
        }

        & .genomcore-why-us-company-imgs {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: center;
            gap: 24px 34px;
            width: 100%;
            margin: 0;
            border-radius: 24px;
            background: var(--color-bkg-gray);
            padding: 20px;

            &.half {
                width: calc(50% - 34px);
                flex: 1 0 calc(50% - 34px);
            }

            & h4.tag-medium {
                width: 100%;
                display: flex;
                justify-content: center;
                color: var(--color-ultra-light-gray);
                text-align: center;
                text-transform: uppercase;
            }

            & .why-us-page__company-logo-container {
                width: calc(100% - 2rem);
                display: flex;
                justify-content: center;
                flex-flow: row wrap;
                gap: 24px;

                & .why-us-page__company-logo {
                    display: flex;
                    justify-content: center;
                    width: auto;
                    height: 34px;
                    max-width: 200px;
                    margin: 20px 0;
                    min-width: min-content;

                }
            }
        }
    }

    & .why-us-page__quote {
        margin: 0 auto;
        background-image: url(../img/genomcore-whyus-quote-bkg.png);
        background-position: 100% 42px;
        background-size: 100%;
        background-repeat: no-repeat;
        height: 1233px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 300px;

        & .why-us-page__quote-container {
            border-radius: 24px;
            background: linear-gradient(286deg, #25C3C1 32.19%, #377EF7 115.31%);
            display: flex;
            width: 1140px;
            height: 550px;
            padding: 0px;
            flex-flow: row;
            justify-content: center;
            align-items: center;
            gap: -100px;
            flex-shrink: 0;
            border-radius: 34px;

            & .why-us-page__quote-img {
                display: flex;
                flex-flow: column;
                align-items: center;
                height: 550px;
                justify-content: flex-end;
                overflow: hidden;

                & .why-us-page__img {
                    width: 100%;
                    height: auto;
                    padding: 2rem 0 0;
                }
            }

            & .founders-mobile {
                display: none;
            }

            & .why-us-page__quote-text {
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                justify-content: flex-start;
                padding: 0 2rem;
                width: 475px;

                & .why-us-quote-logo-genomcore-mobile {
                    display: none;
                }

                & .why-us-quote-logo-genomcore {
                    width: 348px;
                    margin-bottom: 33px;
                }

                & p.txt-large {
                    color: var(--color-white);
                    text-align: left;
                    width: 402px;
                    margin-bottom: 24px;

                }

                & .founders {
                    width: 50%;
                    display: flex;
                    flex-flow: column;
                    align-items: flex-start;
                    justify-content: center;
                    text-align: center;

                    & p.txt-large {
                        color: var(--color-white);
                        text-transform: uppercase;
                        width: auto;
                        margin: 0;

                        &.name {
                            color: var(--color-white);
                            text-align: center;
                            text-transform: uppercase;
                        }


                    }

                    .txt-small {
                        color: var(--color-white);
                        text-align: center;
                    }


                }
            }
        }
    }


}

@media (max-width: 1200px) {
    .why-us-page {
        & .why-us-page__header {
            & .why-us-page__hero {
                width: 960px;
            }
        }

        & .why-us-page__what-we-do {
            & .why-us-page__what-we-do-container {
                align-items: flex-start;
                justify-content: space-between;
                gap: 24px;

            }
        }

        & .why-us-page__team {
            & .why-us-page__team-container {
                & .why-us-page__team-text {
                    justify-content: flex-start;
                    gap: 24px;
                }
            }
        }

        & .why-us-page__trusted-companies {
            width: 960px;

            & .genomcore-why-us-company-imgs {
                & .why-us-page__company-logo-container.healthcare {
                    width: 550px;
                }

                & .why-us-page__company-logo-container.public {
                    width: 650px;
                }

                & .why-us-page__company-logo-container.health {
                    width: 250px;
                }

                &.half {
                    width: calc(50% - 34px);
                    flex: 1 0 calc(50% - 34px);
                    height: 260px;
                    display: flex;
                    align-items: flex-start;
                }
            }

        }

        & .why-us-page__quote {
            & .why-us-page__quote-container {
                width: 960px;
                height: auto;
                padding: 0px;
                align-items: flex-end;
                background-size: cover;

                & .why-us-page__quote-text {
                    padding: 2rem;
                }
            }
        }
    }
}

@media (max-width: 992px) {
    .why-us-page {
        & .why-us-page__header {
            & .why-us-page__hero {
                width: 720px;

                & .why-us-page__hero-container {
                    max-width: 720px;
                    width: 100%;

                }
            }
        }

        & .why-us-page__what-we-do {
            padding: 64px 0;
            max-width: 720px;

        }

        & .why-us-page__trusted-companies {
            width: 720px;

        }

        & .why-us-page__quote {
            height: auto;
            padding-top: 100px;
            background: none;
            padding-bottom: 200px;

            & .why-us-page__quote-container {
                width: 100%;
                max-width: 720px;
                height: auto;
                padding: 0px;
                align-items: center;
                flex-flow: column;
                background: none;
                flex-flow: column-reverse;
                border-radius: 24px;
                background: linear-gradient(286deg, #25C3C1 32.19%, #377EF7 115.31%);

                & .why-us-page__quote-img {
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    height: auto;
                    width: 100%;
                    max-width: 520px;
                    justify-content: flex-end;
                    background: none;

                    & .why-us-page__img {
                        width: 100%;
                        height: auto;
                        padding: 2rem 0 0;
                        width: 480px;
                        height: auto;
                    }
                }

                & .founders-mobile {
                    display: flex;
                    max-width: 520px;
                    padding: 16px;
                    width: 100%;
                    justify-content: space-around;
                    align-items: center;
                    text-align: center;

                    & .founders {
                        width: 50%;
                        display: flex;
                        flex-flow: column;
                        align-items: center;
                        justify-content: center;
                        text-align: center;

                        & p.txt-large {
                            color: var(--color-white);
                            text-transform: uppercase;

                            &.name {
                                color: var(--color-white);
                                text-align: center;
                                text-transform: uppercase;
                            }
                        }

                        & .txt-small {
                            color: var(--color-white);
                            text-align: center;
                        }
                    }
                }

                & .why-us-page__quote-text {
                    width: 520px;
                    padding: 2rem 0;
                    justify-content: flex-start;

                    & .why-us-quote-logo-genomcore {
                        display: flex;
                    }

                    & .why-us-quote-logo-genomcore-mobile {
                        display: none;
                        margin-bottom: 24px;

                    }

                    & p.txt-medium {
                        width: 100%;
                        text-align: left;
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .why-us-page {
        & .why-us-page__header {
            background-size: contain;
            margin-bottom: 32px;
            height: auto;

            & .why-us-page__back-container {
                padding: 24px 0;
                max-width: 540px;
                width: calc(100% - 2rem);


                & .why-us-page__title {
                    padding: 6px 16px;

                    & .tag-small {
                        text-transform: uppercase;
                    }
                }

                & .why-us-page__go-back {
                    & .tag-small {
                        text-transform: uppercase;

                    }
                }
            }

            & .why-us-page__hero {
                max-width: 540px;
                width: calc(100% - 2rem);
                padding: 42px 0 72px 0;

                & .why-us-page__hero-container {
                    & .why-us-page__hero-text {
                        & .h2-title-hero {
                            width: 100%;
                            max-width: 876px;
                        }

                        & .txt-large {}
                    }


                }
            }
        }

        & .why-us-page__what-we-do {
            width: calc(100% - 2rem);
            padding: 0 0 72px 0;

            & .why-us-page__what-we-do-container {
                flex-flow: column;

                & .why-us-page__what-we-do-img {
                    width: 100%;
                    max-width: 550px;
                    height: auto;
                    margin-top: 24px;
                }

                & .why-us-page__what-we-do-text {
                    & h2.h2-title {}

                    & p.txt-medium {}
                }
            }
        }

        & .why-us-page__team {
            max-width: 520px;
            width: calc(100% - 2rem);
            margin: 0 auto;
            padding: 24px 0 72px;

            & .why-us-page__team-container {
                flex-flow: column-reverse;

                & .why-us-page__team-img {
                    width: 100%;
                    max-width: 550px;
                    height: auto;
                    margin-bottom: 16px;
                }

                & .why-us-page__team-text {
                    width: 100%;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    gap: 16px;

                    & h2.h2-title {}

                    & p.txt-medium {}
                }
            }
        }

        & .why-us-page__trusted-companies {
            max-width: 520px;
            width: calc(100% - 2rem);
            padding: 0;

            & .why-us-page__trusted-companies-text {
                width: 100%;
                padding: 0;
                margin-bottom: 0;

                & .h2-title {
                    text-align: left;
                    font-size: 36px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 120%;
                    /* 43.2px */
                    letter-spacing: -0.36px;
                }

                & p.txt-medium {}


            }

            & .genomcore-why-us-company-imgs {
                padding: 32px 24px;

                &.half {
                    width: 100%;
                    flex: 1 0 100%;
                    height: auto;
                    display: flex;
                    align-items: flex-start;
                }

                & h4.tag-medium {
                    text-transform: uppercase;
                    text-align: left;
                    justify-content: flex-start;
                }

                & .why-us-page__company-logo-container {
                    & .why-us-page__company-logo {
                        margin: 16px 0;

                    }
                }
            }
        }

        & .why-us-page__quote {
            padding-bottom: 262px;

            & .why-us-page__quote-container {
                width: calc(100% - 2rem);
                max-width: 520px;
                height: auto;
                padding: 0px;
                align-items: center;
                flex-flow: column;
                background: none;
                flex-flow: column-reverse;
                border-radius: 24px;
                background: linear-gradient(346deg, #377EF7 -14.16%, #25C3C1 69%);

                & .why-us-page__quote-text {
                    width: calc(100% - 2rem);
                    padding: 2rem 0;
                    justify-content: flex-start;

                    & .why-us-quote-logo-genomcore {
                        display: flex;
                        width: 100%;
                    }
                }

                & .why-us-page__quote-img {
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    height: auto;
                    width: calc(100% - 1rem);
                    max-width: 520px;
                    justify-content: flex-end;
                    background: none;

                    & .why-us-page__img {
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }
    }
}