@media screen and (max-width: 768px) {
    body {
        & .hero{
            height: 100svh;
            & img{
                content: url('assets/mobile.webp');
                height: 75%;
                width: 100%;
                align-self: center;
            }
        }
        & .o-que-e{
            & a{
                width: 100%;
                font-size: 1.5em;
                padding: 0.5em 1em;
                margin: 0.5em;
            }
        }
        & .creator{
            height: 100svh;
            & .description{
                height: 100svh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                background-color: rgba(255, 255, 255, 0.6);
                align-items: center;
                text-align: center;

                & p{
                    text-shadow: 1px 1px 1px white;
                }
            }
        }

        & .para-quem{
            height: 100%;

            & p{
                font-size: 1.2em;
                padding: 0.5em 1em;
                margin: 0.5em;
                width: 90%;
                height: auto;
                line-height: 2em;
            }
            & span{
                padding: 0.2em;
                /* margin-bottom: 0.3em; */
                border-radius: 50%;
                color: var(--vermelho2);
            }
        }

        & .como{
            & h4{
                font-size: 1.8em;
                padding: 0.5em 1em;
                margin: 0.5em;
                width: 90%;
                height: auto;
                letter-spacing: 0.07em;
                font-weight: 300;
            }
            & p{
                font-size: 1.1em;
                padding: 0.5em 1em;
                margin: 0.5em;
                width: 90%;
                height: auto;
                letter-spacing: 0.07em;
                font-weight: 100;
                line-height: 2em;
            }
        }

        & .encontrar{
            height: 100%;

            & p{
                font-size: 1.2em;
                padding: 0.5em 1em;
                margin: 0.5em;
                width: 90%;
                height: auto;
                line-height: 2em;
            }
            & span{
                padding: 0.2em;
                /* margin-bottom: 0.3em; */
                border-radius: 50%;
                color: var(--vermelho2);
            }
            a {
                width: 100%;
                font-size: 1.5em;
                padding: 0.5em 1em;
                margin: 0.5em;
                text-align: center;
            }
        }

        & .receber{
            
            & a{
                width: 100%;
                font-size: 1.5em;
                padding: 0.5em 1em;
                margin: 0.5em;
                text-align: center;
            }
        }

        & .para{
            & .card{
                width: 100%;
                height: auto;
                padding: 0.5em 1em;
                margin: 0.5em;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

            }
            & .desc{
                width: 100%;
                padding: 0.5em 1em;
                margin: 0.5em;
                text-align: center;
            }

            & a{
                width: 100%;
                font-size: 1.5em;
                padding: 0.5em 1em;
                margin: 0.5em;
                text-align: center;
            }

        }

        & .depoimentos{
            

            & .video{
                width: 100%;
                height: auto;
                margin-bottom: 1em;
            }
        }

        & .onde{

            & .local{
                width: 100%;
                height: auto;
                display: flex;
                padding: 0.6em;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: #c78f29;
            }

            & p{
                font-size: 1.5em;
                /* padding: 0.5em 1em; */
                /* margin: 0.5em; */
                & a{
                    background-color: transparent;
                }
            }
        }
        & .cta{
            & p{
                font-size: 1.5em;
                padding: 0.5em 1em;
                margin: 0.5em;
                width: 80%;
            }
            & a{
                width: 100%;
                font-size: 1.5em;
                padding: 0.5em 1em;
                margin: 0.5em;

                &:hover{
                    background-color: transparent;
                }
            }
        }
        & .footer{
            & img{
                content: url('assets/footer-mobile.webp');
                width: 100%;
                height: auto;
            }
        }
    }
}