/* commons  */

/* Hero Section - Section 1  */
.thanks-hero_container {
    position: relative;

    .img-container {
        height: auto;
        width: 100%;
        margin: 146px 0 196px 0;

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

        .img-mobile {
            display: none;
        }
    }

    .content_container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 625px;
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;

        .para-primary {
            max-width: 450px;
            width: 100%;
            margin-top: 8px;
            margin-inline: auto;
        }

        #redirect-cta {
            margin-top: 42px;

            a {
                text-decoration: none;
                color: var(--text-arcon-red);
            }
        }
    }

    @media screen and (width <=1024px) {
        & {
            .img-container {
                margin: 93px 0 155px 0;

                .img-web {
                    display: none;
                }

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

            .content_container {
                width: 90%;
                top: 100%;

                #redirect-cta {
                    margin-top: 40px;
                }
            }
        }
    }
}

/* Trusted - Section 2   */
.trustedContainer {
    /* max-width: 1272px; */
    margin-block: var(--spacer-120);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 60px;

    .top-container {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: start;

        h2 {
            margin-inline: auto;
        }
    }

    .bottom-container {
        width: 100%;
        height: auto;
        border: 1px solid var(--bg-grey2);
        border-radius: 12px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        justify-content: start;
        align-items: center;

        .client {
            position: relative;
            max-width: 215px;
            width: 100%;
            height: 85px;
            border-right: 1px solid var(--bg-grey2);

            img {
                position: absolute;
                max-width: 98px;
                width: 100%;
                max-height: 33px;
                height: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                filter: grayscale(1);
            }

            &:last-child {
                border-right: 0;
            }
        }
    }

    @media screen and (max-width: 1025px) {
        & {
            margin-block: 80px;
            gap: 32px;

            .top-container {
                flex-direction: column;
                gap: 24px;

                h2 {
                    margin-inline: unset;
                }
            }

            .bottom-container {
                grid-template-columns: repeat(3, 1fr);

                .client {
                    height: 60px;
                    border-bottom: 1px solid var(--bg-grey2);

                    img {
                        max-width: 68px;
                        width: 100%;
                        max-height: 23px;
                        height: 100%;
                    }

                    &:nth-child(3) {
                        border-right: 0;
                    }

                    &:nth-child(4),
                    &:nth-child(5),
                    &:nth-child(6) {
                        border-bottom: 0;
                    }
                }
            }
        }
    }

    @media screen and (min-width: 601px) and (max-width: 1024px) {
        & {
            .bottom-container {
                .client {
                    max-width: 100%;
                }
            }
        }
    }
}