// ------------  [home page]  ------------
.percent {
    background-image: url('..//img/webp/AnyConv.com__section-2-back\ \(1\).webp');
    width: 100%;
    height: 1160px;
    background-size: cover;
    margin-top: -30rem;
    display: flex;
    align-items: center;
    gap: 4rem;

    &__image {
        display: flex;
        align-items: center;
        margin-top: 35rem;

        img {
            max-width: 85rem;
            height: 100%;
            width: 100%;
            object-fit: contain;

        }
    }

    &__content {
        margin-top: 30rem;

        &--heading {
            font-weight: 500;
            font-size: 7.5rem;
            text-align: left;
            color: $white;
            margin-bottom: 19rem;
        }

        &--text {
            font-weight: 500;
            font-size: 3rem;
            line-height: 4rem;
            text-align: left;
            color: $white;
            max-width: 50rem;
            width: 100%;

        }
    }
}

// ------------  [img inline]  ------------
.img-bg {
    background-color: $white;
    border-radius: 80px;
    margin-top: -7rem;
}

.img-inline {
    max-width: 167rem;
    width: 100%;
    padding: 0 2rem;
    margin: 0 auto;
    transform: translateY(-4rem);

    &__container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 3rem;


        .img-box {
            width: 100%;
            max-width: 25rem;

            &__set {
                width: 100%;
                height: 16rem;
                object-fit: cover;
                filter: drop-shadow(20px 20px 30px rgba(0, 0, 0, 0.16));

            }

            &__text {
                padding: 4rem 1rem;

                p {
                    font-weight: 400;
                    font-size: 1.6rem;
                    line-height: 2.5rem;
                    text-align: center;

                }


            }

        }
    }
}

// ------------  [CashBack]  ------------
.cash {
    &__heading {
        max-width: 75rem;
        width: 100%;

        &--main {
            font-weight: 600;
            font-size: 4rem;
            line-height: 5rem;
            text-align: left;
            margin-bottom: 3.8rem;
            margin-top: 4rem;

        }

        &--text {
            font-weight: 400;
            font-size: 1.8rem;
            line-height: 3rem;
            text-align: left;

        }
    }



    &__wrapper {
        display: flex;
        margin-top: 3rem;
        gap: 2rem;

        &--card {
            display: flex;
            align-items: center;

            
            
            img {
                max-width: 70rem;
                height: 100%;
                object-fit: contain;
                transform: translateY(12rem);

            }
        }

        &--box {
            max-width: 70rem;
            height: 44rem;
            background-color: $white;
            box-shadow: 30px 30px 40px rgba(0, 0, 0, 0.45);
            border-radius: 36px;

            &--content {
                max-width: 71rem;
                width: 100%;
                height: 100%;
                display: flex;
                gap: 3rem;
                justify-content: center;
                padding: 3rem;
                align-items: center;

                .heading {
                    h1 {
                        font-weight: 600;
                        font-size: 3.2rem;
                        text-align: center;

                    }

                    .price-box {

                        p {
                            font-family: "Roboto Mono";
                            font-weight: 400;
                            font-size: 1.7rem;
                            text-align: center;
                            margin-top: 5rem;

                        }

                        h3 {
                            font-family: "Roboto Mono";
                            font-weight: 400;
                            font-size: 4rem;
                            text-align: center;

                        }
                    }
                }

                .moch {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;


                    img {
                        margin-bottom: 3rem;
                        width: 12rem;
                        height: 4rem;
                        object-fit: contain;

                    }

                    &_box {
                        width: 28rem;
                        height: 20rem;
                        background-color: $primary;
                        border-radius: 36px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid #fc5046;
                        filter: drop-shadow(20px 20px 30px rgba(0, 0, 0, 0.16));

                        p {
                            font-family: "Roboto Mono";
                            font-weight: 400;
                            font-size: 1.7rem;
                            text-align: center;
                            color: #212121;
                            margin-bottom: 1rem;

                        }

                        .price {
                            font-family: "Roboto Mono";
                            font-weight: 400;
                            font-size: 5rem;
                            text-align: center;
                            color: $white;

                        }
                    }
                }
            }
        }

    }
}

// ------------  [benefits]  ------------
.benefits {
    background-image: url('..//img/webp/AnyConv.com__section-4-back.webp');
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -25rem;
    height: 110rem;
    background-position: bottom;    

    &__container {
        max-width: 140rem;
        width: 100%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;

        &--left {
            max-width: 90rem;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                margin-top: 12rem;
            }
        }

        &--right {

            &--heading {
                font-weight: 600;
                font-size: 4rem;
                line-height: 5rem;
                text-align: left;
                color: $white;



            }

            &--sub {
                margin-top: 1.8rem;
                margin-bottom: 5rem;
                font-weight: 400;
                font-size: 1.8rem;
                line-height: 3rem;
                text-align: left;
                color: $white
            }

            ul {
                li {
                    font-weight: 400;
                    font-size: 1.7rem;
                    line-height: 3rem;
                    text-align: left;
                    color: $white;
                    align-items: center;
                    display: flex;
                    gap: 1.5rem;

                    img {
                        width: 1.2rem;
                        height: 100%;
                        object-fit: contain;


                    }

                    p {
                        color: $white;
                    }
                }
            }
        }

    }

}

// ------------  [air plane]  ------------
.plane {
    &__img {
        display: flex;
        justify-content: center;
        margin-bottom: 6rem;

        img {
            width: 15rem;
            height: 100%;
            object-fit: contain;
            display: flex;
            justify-content: center;
        }

    }

    &__container {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem;

        &--rent {
            h2 {
                font-weight: 600;
                font-size: 4rem;
                line-height: 5rem;
                text-align: center;

            }

            img {
                max-width: 80rem;
                width: 100%;
                height: 100%;
                object-fit: contain;
                margin-top: -12rem;
            }
        }

        &--img {
            max-width: 72rem;
            width: 100%;
            margin-top: -12rem;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;

            }
        }

    }
}

// ------------  [DE]  ------------
.de {
    background-image: url('..//img/webp/AnyConv.com__section-5-back.webp');
    background-repeat: no-repeat;
    width: 100%;
    height: 1100px;
    margin-top: -50rem;
    margin-bottom: 5rem;
    background-size: contain;


    &__content {
        max-width: 100rem;
        display: flex;
        padding-top: 25rem;
        align-items: center;
        gap: 5rem;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 7rem;
        display: flex;
        justify-content: center;

        &--heading {

            h1 {
                font-weight: 600;
                font-size: 5rem;
                line-height: 6.5rem;
                text-align: left;
                color: $white;
            }

            p {
                font-weight: 400;
                font-size: 1.6rem;
                text-align: center;

            }
        }

        &--text {
            p {
                font-weight: 500;
                font-size: 1.8rem;
                line-height: 3rem;

            }
        }
    }

    &__slider {
        position: relative;

        &--heading {
            h1 {
                font-weight: 600;
                font-size: 3.5rem;
                line-height: 4rem;
                text-align: center;
                color: $white;

            }
        }

        &--card {
            display: flex;
            max-width: 160rem;
            width: 100%;
            margin: 0 auto;
            margin-top: 5.5rem;
            justify-content: center;
            gap: 4.5rem;

            &-img {
                img {}
            }
        }

        .btn-left {

            position: absolute;
            top: 55%;
            left: 16rem;

        }

        .btn-right {
            position: absolute;
            top: 55%;
            right: 16rem;

            i {
                transform: rotate(180deg);
            }
        }

    }
}

.relative-section {
    position: relative;
    z-index: 1;
}

// ------------  [voce]  ------------
.voce {
    max-width: 150rem;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 10rem;
    position: relative;
    z-index: 10;
   





    &__left {
        display: flex;
        flex-direction: column;
        padding: 0 4rem;
        justify-content: center;

        img {
            width: 130px;
            height: 40px;
            object-fit: contain;
            margin-bottom: 3rem;
        }

        &--heading {
            font-weight: 600;
            font-size: 4rem;
            line-height: 5rem;
            text-align: left;
            margin-bottom: 3.2rem;

        }

        &--text {
            font-weight: 400;
            font-size: 2rem;
            text-align: left;
            margin-bottom: 4.5rem;

        }

        .solcie {
            font-weight: 400;
            text-decoration: underline;
            font-size: 1.6rem;
            text-align: left;
            color: #f6553f;



        }
    }

    &__right {
        display: flex;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 20;



        .card-1 {
            max-width: 30rem;
            width: 100%;
            height: auto;
            object-fit: contain;
            position: absolute;
            bottom: -58%;
            right: 85%;

        }

        .black-girl {
            max-width: 70rem;
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: relative;
            z-index: 100;
            transform: translateY(8rem);

        }

    }
}

// ------------  [seu]  ------------
.seu {
    background-image: url('..//img/webp/footer-top.webp');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 1000px;
    margin-top: 0;
    position: relative;
    z-index: 2;
    

    &__heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 10rem;

        h1 {
            font-weight: 600;
            font-size: 3.5rem;
            line-height: 4rem;
            color: $white;
            padding-top: 20rem;
        }

        p {
            font-weight: normal;
            font-size: 1.8rem;
            color: $white;

        }


    }

    &__play {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        &--video {
            position: relative;
            max-width: 100rem;
            width: 100%;
            height: 53rem;
            margin-top: 15rem;
            z-index: 50;


            &--box {
                width: 100%;
                height: 100%;
                background: #292929;
                box-shadow: 30px 30px 40px rgba(0, 0, 0, 0.16);
                z-index: 1;


            }

            &--content {
                margin-top: 10rem;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translatex(-50%);
                z-index: 50;

                img {
                    width: 130px;
                    height: 100px;
                    object-fit: contain;
                    margin-bottom: 3rem;
                }

                button {
                    width: 9rem;
                    height: 9rem;
                    background-color: transparent;
                    background-color: $white;
                    border-radius: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    i {
                        font-size: 6.5rem;
                        color: $primary;
                    }
                }

            }

        }

    }

    .card-2 {

        position: absolute;
        right: 27%;
        top: -13rem;


    }
}