*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

html, body{
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.container{
    width: 100%;
    max-width: 1180px;
    padding: 0 2%;
    margin: 0 auto;
}

marque{
    color: #D89D00;
}

.wrapper-bg-perguntas{
    background-image: url('./images/bg-perguntas.png');
    background-position: top center;
    background-size: cover;
    overflow-x: hidden;
}

.wrapper-bg{
    background-image: url('./images/bg.png');
    background-position: top center;
    background-size: cover;
}

.wrapper-btn{
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img{
        width: 80%;
        margin-top: 20px;
        max-width: 280px!important;
    }

    .compra{
        width: 80%;
        max-width: 220px!important;
    }
}

.btn{
    padding: 15px 60px;
    border-radius: 30px;
    background: radial-gradient(#FFB900 30%, #D89D00 100%);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    text-decoration: none;
    box-shadow: 0 5px 4px 4px rgba(0,0,0,0.3);
    margin-top: 20px;
    transition: 1s;
    cursor: pointer;
}

.btn:hover{
    transform: scale(1.1);
}

.banner{
    width: 100%;
    padding: 50px 0;
    background-image: url('./images/bg-banner.png');
    background-size: cover;
    background-position: center;

    .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .banner-left{
        width: 50%;
        display: flex;
        flex-direction: column;
        animation-name: left;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;

        img{
            width: 100%;
            max-width: 250px;
        }

        h4{
            padding: 8px;
            border-radius: 20px;
            border: 1px solid #D89D00;
            width: auto;
            display: inline-block;
            width: fit-content;
            font-weight: normal;
            font-size: 14px;
            color: #fff;
            text-transform: uppercase;
            margin-top: 15px;
        }

        h2{
            font-weight: bold;
            font-size: 36px;
            color: #fff;
            max-width: 500px;
            margin-top: 15px;
        }

        p{
            font-size: 20px;
            color: #fff;
            font-weight: 300;
            margin-top: 15px;
            max-width: 500px;
        }
    }

    .banner-right{
        width: 50%;
        animation-name: right;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;

        img{
            width: 100%;
        }
    }
}

@keyframes left{
    0%{
        transform: translateX(-100px);
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes right{
    0%{
        transform: translateX(100px);
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

/* FITA */

.fita{
    img{
        width: 100%;
    }
}

/* ESTATISTICAS */

.container-estatistica{
    position: relative;
}

.estatisticas{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    border: 2px solid #D89D00;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #181818;
    padding: 20px 40px;

    .single-estatistica{
        display: flex;
        align-items: center;
        justify-content: center;

        span{
            margin-left: 15px;
            color: #fff;
            font-size: 16px;
        }
    }

    i{
        width: 30px;
        height: 30px;
        border-radius: 5px;
        background-color: #FFB900;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
    }
}



/* RESULTADOS */


.resultados{
    padding: 80px 0 0 0;
    width: 100%;

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

    h2{
        font-weight: bold;
        color: #fff;
        font-size: 32px;
        max-width: 650px;
        line-height: 40px;
        text-align: center;
        text-transform: uppercase;
    }

    p{
        font-size: 18px;
        color: #fff;
        max-width: 700px;
        text-align: center;
        margin-top: 15px;
    }

    .wrapper-img{
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    img{
        width: 80%;
    }

    .single-resultado{
        position: absolute;
        background-color: #181818;
        border: 2px solid #FFB900;
        border-radius: 20px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

        i{
            width: 30px;
            height: 30px;
            border-radius: 5px;
            background-color: #FFB900;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }

        .single-resultado-right{
            margin-left: 20px;
            color: #fff;

            h4{
                font-size: 16px;
            }

            h5{
                font-size: 14px;
                font-weight: normal;
                margin-top: 10px;
                max-width: 200px;
            }
        }
    }
}

.top-left{
    top: 50px!important;
    left: 125px!important;
}

.top-right{
    right: 125px!important;
    top: 50px!important;
}

.mid-left{
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.mid-right{
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.low-left{
    bottom: 50px!important;
    left: 125px;
}

.low-right{
    bottom: 50px;
    right: 125px;
}

/* SOBRE */

.sobre{
    width: 100%;
    padding: 70px 0 30px 0;

    .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sobre-left{
        width: 50%;

        img{
            width: 100%;
        }
    }

    .sobre-right{
        width: 48%;

        h4{
            padding: 8px;
            border-radius: 20px;
            border: 1px solid #D89D00;
            width: auto;
            display: inline-block;
            width: fit-content;
            font-weight: normal;
            font-size: 14px;
            color: #fff;
            text-transform: uppercase;
            margin-top: 15px;
        }

        h2{
            font-size: 28px;
            color: #fff;
            margin-top: 15px;
        }

        p{
            color: #fff;
            font-size: 18px;
            margin-top: 15px;
        }
        
    }
}


/* REEMBOLSO */

.reembolso{
    width: 100%;
    padding: 70px 0;
    border-bottom: 1px solid #FFB900;

    .sobre-left{
        width: 45%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    img{
        max-width: 320px;
    }

    .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* KITS */

.kits{
    width: 100%;
    padding: 80px 0;
    background-image: url('./images/bg-kits.png');
    background-position: center;
    background-size: cover;

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

    h2{
        font-size: 32px;
        color: #fff;
        text-align: center;
    }

    p{
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
        text-align: center;
        max-width: 650px;
    }

    .wrapper-kits{
        margin-top: 70px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 50px;
    }

    .single-kit{
        background-color: #181818;
        border: 2px solid #FFB900;
        border-radius: 20px;
        padding: 0 15px 20px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        > img{
            position: relative;
            top: -25px;
            width: 85%;
        }

        .img-minimum{
            width: 50%!important;
        }

        .content-ul{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }

        h4{
            width: 100%;
            text-align: center;
            padding: 5px;
            border-radius: 30px;
            background-color: #D89D00;
            font-size: 15px;
            color: #fff;
        }

        .wrapper-price{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 15px;

            h2{
                font-size: 75px;
                color: #fff;
            }

            span{
                font-size: 25px;
                color:#fff;
                font-weight: bold;
                margin-left: 10px;
            }
        }

        .wrapper-ul{
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 15px;

            span{
                margin-left: 15px;
                color: #fff;
                font-size: 16px;
            }
    
            i{
                width: 25px;
                height: 25px;
                border-radius: 5px;
                background-color: #D89D00;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 25px;
                color: #fff;
                font-size: 18px;
            }
        }

        .wrapper-btn{
            margin-bottom: 15px;

            .btn{
                width: 100%;
                padding-left: 0;
                padding-right: 0;
                text-align: center;
                font-size: 18px;
            }

            img{
                width: 90%;
            }
        }

        h3{
            font-weight: bolder;
            font-size: 20px;
            margin-top: 10px;
            color: #fff;

            span{
                text-decoration: line-through;
            }
        }
    }
}

.depoimentos{
    padding: 50px 0 70px 0;
    width: 100%;

    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 1000px;
    }

    h2{
        font-size: 32px;
        color: #fff;
        text-align: center;
    }

    p{
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
        text-align: center;
        max-width: 650px;
    }

    .wrapper-depoimentos{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 30px;
        margin-top: 50px;
    }

    .single-depoimento{
        background-color: #181818;
        border: 2px solid #fff;
        border-radius: 20px;
        padding: 20px;

        .top-depoimento{
            display: flex;
            align-items: center;
            justify-content: left;
            padding-bottom: 15px;
            border-bottom: 1px solid #fff;

            .foto{
                width: 40px;
                height: 40px;
                background-color: #ccc;
                border: 3px solid #fff;
                border-radius: 100%;
                margin-right: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #111;
                font-weight: bold;
            }

            h5{
                font-size: 14px;
                color: #fff;
            }

            i{
                font-size: 13px;
                margin-top: 5px;
                color: #FFB900;
            }
        }

        p{
            margin-top: 20px;
            font-size: 13px;
            color: #fff;
            text-align: left;
        }
    }

    .wrapper-btn{
        margin-top: 25px;
    }
}

.duvidas{
    width: 100%;
    padding: 100px 0;

    .container{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .duvidas-left{
        width: 32%;
        background-color: #111;
        border: 2px solid #FFB900;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 15px;

        img{
            width: 90%;
        }

        h3{
            font-size: 28px;
            color: #fff;
            margin-top: 40px;
        }

        p{
            font-size: 16px;
            color: #fff;
            text-align: center;
            margin-top: 40px;
        }

        .btn{
            padding-left: 0;
            padding-right: 0;
            text-align: center;
            width: 100%;
            margin-top: 40px;
        }
    }

    .duvidas-right{
        width: 55%;

        h2{
            font-size: 32px;
            color: #fff;
            margin-bottom: 40px;
        }

        .single-duvida{
            width: 100%;
            border-bottom: 1px solid #fff;
            margin-top: 20px;
            padding-bottom: 20px;

            .top-single-duvida{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .low-single-duvida{
                margin-top: 10px;
                overflow: hidden;
                transition: height 0.3s ease;
                height: 0;
                transition: 0.5s;
            }

            p{
                font-size: 18px;
                color: #fff;
                margin-left: 10px;
            }

            i{
                color: #fff;
                font-size: 18px;
                margin-right: 20px;
            }
        }
    }
}

footer{
    width: 100%;
    padding: 15px 0;
    background-color: #A537B5;

    .container{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    p{
        font-size: 16px;
        color: #fff;
    }
}

.ingredientes{
    width: 100%;
    padding: 60px 0;

    .title{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
    }

    h2{
        font-size: 32px;
        color: #fff;
        text-align: center;
    }

    p{
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
        text-align: center;
        max-width: 650px;
    }

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

        h4{
            margin-top: 20px;
            color: #fff;
            font-size: 18px;
        }

        h5{
            color: #fff;
            font-size: 15px;
        }
    }

    .foto-ingrediente{
        width: 60%;
        aspect-ratio: 5/5;
        border-radius: 100%;
        background-color: #ccc;
        border: 5px solid #A537B5;
        background-position: center;
        background-size: cover;
    }

    .wrapper-btn{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 30px;

        .btn{
            width: fit-content;
        }
    }
}

@media screen and (max-width: 1000px){
    .kits{
        .wrapper-kits{
            grid-template-columns: 1fr 1fr;
            
            .single-kit{
                margin-top: 20px;
            }
        }
    }

    .duvidas{
        .container{
            flex-direction: column;
        }

        .duvidas-right{
            width: 90%;
            margin-top: 50px;

            h2{
                text-align: center;
            }
        }

        .duvidas-left{
            width: 80%;
        }
    }
}


@media screen and (max-width: 900px){
    .resultados{
        .wrapper-img{
            flex-direction: column;
        }

        .single-resultado{
            position: unset;
            border: 0;
            background-color: transparent;
        }

        .resultados img{
            width: 100%;
        }
    }

    .mid-left{
        transform: none;
    }

    .mid-right{
        transform: none;
    }
}


@media screen and (max-width: 750px){
    .banner{
        .container{
            flex-direction: column;
        }

        .banner-left{
            width: 100%;
            align-items: center;
            justify-content: center;

            p{
                text-align: center;
            }

            h2{
                text-align: center;
            }
        }

        .banner-right{
            margin-top: 30px;
            width: 90%;
        }
    }

    .sobre{
        .container{
            flex-direction: column-reverse;
        }

        .sobre-right{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            h2{
                text-align: center;
            }

            p{
                text-align: center;
            }
        }

        .sobre-left{
            width: 100%;
            margin-top: 70px;
        }
    }

    .reembolso .container{
        flex-direction: column!important;
    }

    .reembolso .sobre-left{
        width: 90%;
        margin-bottom: 30px;
        margin-top: 0;
    }

    .estatisticas{
        flex-direction: column;

        :nth-of-type(2){
            display: none;
        }

        :nth-of-type(3){
            display: none;
        }
    }

    .depoimentos{
        .wrapper-depoimentos{
            grid-template-columns: 1fr 1fr;
        }
    }
}

@media screen and (max-width: 650px){
    .wrapper-bg{
        background-image: url('./images/bg-mobile.png');
    }

    .kits{
        .wrapper-kits{
            grid-template-columns: 1fr;
        }
    }
}

@media screen and (max-width: 500px) {
    .depoimentos{
        .wrapper-depoimentos{
            grid-template-columns: 1fr;

            :nth-of-type(4), :nth-of-type(5), :nth-of-type(6){
                display: none;
            }
        }
    }
}

/* Animação */

[data-anime]{
    opacity: 0;
    transition: 1s;
}
  
[data-anime="left"]{
    transform: translateX(-100px);
}

[data-anime="right"]{
    transform: translateX(100px);
}

[data-anime="scale"]{
    transform: scale(0.5);
}

[data-anime].animation{
    opacity: 1;
    transform: translate(0,0) scale(1);
}