@media (max-width: 1440px) {
    html {
        font-size: 62.5%;
    }

    .logo {
        margin: 3rem 0 0 4rem;
        width: 18rem;
    }

    .hero {
        padding: 3rem 4rem 2rem;
        gap: 4rem;
    }

    .title {
        font-size: 3.2rem;
    }

    .footer {
        padding-right: 4rem;
    }
}

@media (max-width: 965px) {
    html {
        font-size: 62.5%;
    }

    body {
        background-image: url("../images/bg-mobile.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top center;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .logo {
        margin: 2rem 0 0 2rem;
        width: 14rem;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        padding: 3rem 3rem 4rem;
        gap: 5rem;
    }

    .mockup {
        width: 100%;
        max-width: 42rem;
    }

    .text {
        max-width: 100%;
        align-items: center;
    }

    .title {
        font-size: 2.4rem;
        line-height: 1.3;
    }

    .description {
        max-width: 95%;
        font-size: 1.6rem;
        padding: 0;
        margin: 2rem 0 2.5rem;
    }

    .btn {
        min-width: 22rem;
        padding: 1.4rem 3rem;
    }

    .footer {
        justify-content: center;
        padding-right: 0;
        padding-bottom: 3rem;
    }

    .fab.fa-facebook-f,
    .fab.fa-twitter,
    .fab.fa-instagram {
        width: 4rem;
        height: 4rem;
        font-size: 1.6rem;
    }
}