@import url('./styles.css');
@import url('./header.css');
@import url('./footer.css');
@import url('./dark-mode.css');


.s-hero-empresas {
    padding-block: 22.3rem 14rem;
    background-color: var(--green);

    .container {
        position: relative;
        z-index: 2;

        h1 {
            text-align: center;
            color: white;
            margin-bottom: 3rem;
            position: relative;
            z-index: 2;

            span {
                color: var(--orange);
            }
        }

        .title {
            position: relative;
            width: 100%;
            max-width: 638px;
            margin-inline: auto;

            img {
                position: absolute;
                top: 0;
                right: 0;
                position: absolute;
            }
        }

        p {
            text-align: center;
            color: white;
            margin-bottom: 5.6rem;
        }

        form {
            width: 100%;
            max-width: 573px;
            margin-inline: auto;
            display: flex;
            gap: 0;

            input[type="text"] {
                width: 100%;
                max-width: 455px;
                padding: 1.5rem 2.4rem;
                border: 0;
                border-radius: 5.6rem 0 0 5.6rem;
                background-color: white;
                color: var(--grey-300, #7A7A7A);
                font-size: 18px;
                font-weight: 400;
                line-height: 140%;
            }

            input[type="submit"] {
                width: 100%;
                max-width: 118px;
                padding: 1.5rem 2.4rem;
                border: 0;
                border-radius: 0 5.6rem 5.6rem 0;
                background-color: var(--orange);
                color: white;
                font-size: 18px;
                font-weight: 500;
                line-height: 140%;
                cursor: pointer;
                transition: all .3s ease;
            }

            input[type="submit"]:hover {
                background-color: var(--orange-01);
            }
        }
    }

    img {

        &.frame-left,
        &.img-left-top,
        &.img-left-bottom,
        &.frame-right,
        &.img-right-top,
        &.img-right-bottom {
            position: absolute;
        }

        &.frame-left {
            top: 195px;
            left: 28px;
        }

        &.img-left-top {
            left: 65px;
            top: 250px;
        }

        &.img-left-bottom {
            left: 166px;
            top: 388px;
        }

        &.frame-right {
            top: 164px;
            right: 197px;
        }

        &.img-right-top {
            right: 56px;
            top: 188px;
        }

        &.img-right-bottom {
            top: 300px;
            right: 75px;
        }
    }

    @media(max-width: 1024px) {
        padding-block: 18rem 8rem;

        img {

            &.frame-left,
            &.img-left-top,
            &.img-left-bottom,
            &.frame-right,
            &.img-right-top,
            &.img-right-bottom {
                display: none;
            }
        }

        .title {
            img {
                display: none;
            }
        }
    }

    @media (max-width: 767px) {
        padding-block: 13rem 4rem;

        .container {
            h1 {
                br {
                    display: none;
                }
            }

            p {
                br {
                    display: none;
                }
            }

            form {
                input[type="text"] {
                    font-size: 12px;
                    padding: 14px;
                }

                input[type="submit"] {
                    font-size: 12px;
                    padding: 14px;
                }
            }
        }
    }
}

.s-empresas-parceiras {
    background-color: var(--off);
    padding-block: 8rem;

    h2 {
        text-align: center;
        margin-bottom: 5.6rem;
    }

    .grid-area-itens {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem;
        justify-items: center;
        margin-bottom: 3.2rem;

        .card-empresa {
            width: 100%;
            max-width: 397px;
            background-color: white;
            padding: 2.4rem;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            &:hover {
                button {
                    svg {
                        path {
                            transform: translateX(3px);
                        }
                    }
                }
            }

            img.logo {
                width: 100%;
                max-width: 140px;
                height: 44px;
                object-fit: contain;
                margin-bottom: 1.6rem;
            }

            p {
                color: var(--dark-grey);
                margin-bottom: 32px;
                text-transform: uppercase;
            }

            .item {
                display: flex;
                align-items: center;
                gap: 1.6rem;

                span {
                    color: var(--dark-grey);
                }
            }

            .item:not(:last-child) {
                margin-bottom: 8px;
            }

            button {
                margin-top: 3.2rem;
                width: 100%;
                max-width: fit-content;
                display: flex;
                align-items: center;
                gap: 1.2rem;
                font-size: 18px;
                font-weight: 500;
                line-height: 140%;
                color: var(--orange);
                padding-bottom: 8px;
                border-bottom: 3px solid var(--orange);

                svg {
                    path {
                        transition: all .3s ease;
                    }
                }
            }
        }
    }

    @media (max-width: 1024px) {
        padding-block: 4rem;

        .grid-area-itens {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 767px) {
        .grid-area-itens {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    a.btn {
        display: table;
        margin-inline: auto;
    }
}

.s-conectar-empresas {
    background-color: var(--orange);
    padding-block: 152px 116px;

    .container {
        position: relative;

        .frame-left {
            position: absolute;
            top: -100px;
            left: 0;
            z-index: 2;
        }

        .frame-right {
            position: absolute;
            right: 20px;
            top: -120px;
            z-index: 2;
        }

        @media (max-width: 1200px) {

            .frame-left,
            .frame-right {
                display: none;
            }
        }
    }

    .main-area {
        position: relative;
        width: 100%;
        max-width: 675px;
        margin-inline: auto;
        text-align: center;

        h2 {
            color: var(--orange-01);
            margin-bottom: 10px;
        }

        p {
            color: var(--dark-grey);
            margin-bottom: 2.5rem;
        }

        h2,
        p,
        .btn {
            position: relative;
            z-index: 1;
        }

        .main-bg {
            position: absolute;
            top: -50px;
            right: 0;
            left: 0;
            margin-inline: auto;
            z-index: 0;
            width: 100%;
            height: 237px;
        }

    }

    @media (max-width: 1024px) {
        padding-block: 4rem;
    }

    @media (max-width: 767px) {
        .main-area {
            background-color: var(--orange-02);
            padding: 1.6rem;
            border-radius: 16px;

            .main-bg {
                display: none;
            }
        }
    }
}

.s-depoimentos {

    &.empresas {
        border-top: 0;
        padding-top: 0;
    }

    padding-block: 7rem 5.6rem;

    .container {
        position: relative;
        z-index: 2;

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2.4rem;
            margin-bottom: 5.6rem;

            .buttons {
                width: 100%;
                max-width: 12rem;
                display: flex;
                justify-content: space-between;
                gap: 2.4rem;
                align-items: center;

                .swiper-button-prev,
                .swiper-button-next {
                    position: relative;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: 0;
                    width: 4.8rem;
                    height: 4.8rem;
                }
            }
        }

        .swiper-slide {
            display: flex;
            align-items: stretch;
            height: auto !important;
            justify-content: center;

            .card-depoimento {
                width: 100%;
                height: 100%;
                max-width: 39.7rem;
                border-radius: 8px;
                background: var(--Preto, #272627);
                box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.10);
                overflow: hidden;
                border-top: 8px solid var(--orange);
                padding: 3.4rem 2.4rem 2.4rem 2.4rem;

                p {
                    color: #fff;
                    margin-bottom: 8rem;
                    font-size: 2.4rem;
                    transition: all .3s ease;

                    span {
                        color: var(--orange);
                    }
                }

                button {
                    display: flex;
                    align-items: center;
                    gap: 1.2rem;
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 140%;
                    color: var(--orange);
                    padding-bottom: 8px;
                    border-bottom: 3px solid var(--orange);
                    transition: all .3s ease;

                    svg {
                        path {
                            transition: all .3s ease;
                        }
                    }
                }

                .author {
                    transform: translateY(100%);
                    pointer-events: none;
                    visibility: hidden;
                    height: 0;
                    width: 0;
                    opacity: 0;
                    display: flex;
                    align-items: center;
                    gap: 1.6rem;
                    justify-content: flex-start;
                    transition: all .3s ease;

                    .image {
                        width: 5.2rem;
                        height: 5.2rem;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .text {
                        width: 100%;
                        max-width: 28rem;

                        h6 {
                            color: var(--orange);
                            margin-bottom: 4px;
                        }

                        span {
                            color: #fff;
                        }
                    }

                }
            }

            &:hover {


                .card-depoimento {
                    padding-top: 1.6rem;

                    button {
                        width: 0;
                        height: 0;
                        pointer-events: none;
                        visibility: hidden;
                        opacity: 0;
                    }

                    p {
                        font-size: 1.8rem;

                        span {
                            color: #fff;
                        }
                    }

                    .author {
                        transform: translateY(0);
                        pointer-events: all;
                        visibility: visible;
                        height: auto;
                        width: auto;
                        opacity: 1;
                    }
                }
            }
        }
    }

    @media (max-width: 767px) {
        padding-bottom: 4rem;

        .container {
            .top {
                flex-direction: column;

                h2 {
                    text-align: center;

                    br {
                        display: none;
                    }
                }
            }
        }
    }
}