@media screen and (max-width: 1023px) {

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    a.btn-contact.display-none {
        display: none;
    }

    a.btn-start.display-none {
        display: none;
    }

    /* SEÇÃO 1 HERO */

    .hero_container-btn .btn-how-it-works.display-none {
        display: none;
    }

    section.hero {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
        align-content: center;
    }

    div.hero_container-content {
        align-items: center;
        align-content: center;
        gap: 30px;
        width: 100%;
        text-align: center;
    }

    div.hero_container-img {
        width: 320px;
    }

    /* SEÇÃO 2 CLIENTES */
    section.clients {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    div.clients_container {
        gap: 40px;
        justify-content: space-around;
    }

    /* SEÇÃO 3 FEATURES */

    div.features_container {
        flex-wrap: wrap;
        gap: 20px;
    }

    div.features_content {
        width: 100%;
    }

    /* SEÇÃO 4 METRICS */

    div.metrics_container {
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 20px;
    }

    div.metrics_content {
        width: 300px;
    }

    /* SEÇÃO 5 UI KIT */

    section.uikit {
        flex-wrap: wrap;
        justify-content: center;
    }

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

    /* SEÇÃO 7 PLANS */

    div.plans_container-content {
        width: 100%;
    }

    /* SEÇÃO 9 LANDING PAGE UI KIT */

    div.page-ui-kit_container-bg {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 40px;
        text-align: center;
    }

    .page-ui-kit_container {
        padding: 0;
        align-items: center;
    }

    /* SEÇÃO 10 CONTACT */
    .contact_container {
        gap: 40px;
    }

    .contact_container-contacts {
        flex-wrap: wrap;
    }

    .contact_links-container {
        gap: 40px;
    }

    .contact_container-contacts {
        gap: 40px;
    }

    .contact_links-container {
        width: 100%;
    }

    .form_container {
        width: 100%;
    }

}

/* RESPONSIVIDADE PARA TABLETS */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    section.max-width {
        padding: 100px 12px;
    }

    .title-sections {
        font-size: 2.8rem;
    }

    .features {
        gap: 40px;
    }

    /* SEÇÃO 5 UI KIT */

    .uikit_container-img {
        width: 60%;
    }

    /* SEÇÃO 10 CONTACT */
    .contact_container {
        padding: 40px;
    }
}

/* RESPONSIVIDADE PARA SMARTPHONES */

@media screen and (max-width: 637px) {
    section.max-width {
        padding: 60px 12px;
    }

    .mobile {
        display: block;
    }

    nav.header_menu {
        justify-content: center;
    }

    .header_menu-links.display-none {
        display: none;
    }

    header {
        padding: 0 12px;
    }

    /* SEÇÃO 1 HERO INICIO */

    div.hero_container-content {
        gap: 20px;
    }

    div.hero_container-content h1 {
        font-size: 3.4rem;
        line-height: 52px;
    }

    /* SEÇÃO 3 FEATURES */

    .features {
        gap: 30px;
    }

    /* SEÇÃO 5 UI KIT */

    .uikit_container-img {
        width: 90%;
    }

    /* SECÃO 10 CONTACT */

    .contact_container {
        padding: 22px;
    }

    /* SEÇÃO FOOTER */

    .footer_container {
        justify-content: center;
    }
}