/* breakpoints */
@media (min-width: 940px) and (max-width: 1100px) {
    html {
        font-size: 94%;
    }

    .title-section-2 h1,
    .title-section-2 h3 {
        font-size: 34px;
    }

    .logo-header {
        width: 210px;
    }

    .text-section-2 {
        font-size: 13px;
        margin: 40px 10px 0 10px;
    }

    .work-flow-icons img {
        width: 125px;
    }

    .text-span-work-flow {
        font-size: 13px;
    }

    .separator-fluxo {
        margin: 95px 0;
    }
}

@media (min-width: 835px) and (max-width: 939px) {
    html {
        font-size: 90%;
    }

    .text-section-2 {
        font-size: 13px;
        margin: 40px 10px 0 10px;
    }

    .title-section-2 h1,
    .title-section-2 h3 {
        font-size: 30px;
    }

    .logo-header {
        width: 195px;
    }

    .products-fake-btn,
    .cases-fake-btn {
        min-height: 40px;
        margin-bottom: 40px;
        padding: 8px 30px;
    }

    /* Section 5 */
    .work-flow-icons img {
        width: 100px;
    }

    .text-span-work-flow {
        font-size: 10px;
    }

    .dots-1 img, .dots-2 img {
        width: 130px;
    }


    .separator-fluxo {
        margin: 85px 0;
    }
}

@media (min-width: 620px) and (max-width: 834px) {
    html {
        font-size: 86%;
    }

    h1,
    h2,
    h3 {
        font-size: 30%;
    }

    .bt,
    header {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .bt {
        margin: 10px auto;
    }

    .navbar-toggler {
        margin: 0 20px;
    }

    .btn-collapse {
        display: block;
    }

    .logo-header {
        width: 180px;
    }

    .image-section-2,
    .dots,
    .img-element,
    .el-sec6-1,
    .el-sec6-2,
    .task-el-1,
    .task-el-2 {
        display: none;
    }

    .section-1 {
        background-position: left;
        padding: 80px 0 180px 10%;
    }

    .text-section-1 {
        width: 50%;
        text-align: left;
    }

    .text-section-1 h1.text-white {
        font-size: 30px;
        text-align: left;
    }

    /* Section 2 */
    h1.text-white {
        font-size: 32px;
        text-align: center;
    }

    .title-section-2 h1,
    .title-section-2 h3 {
        font-size: 28px;
    }

    .content-section-2 {
        justify-content: center;
        text-align: center;
        padding-bottom: 30px;
    }

    .text-section-2 {
        font-size: 14.5px;
        flex-direction: column;
        width: 80%;
    }

    /* Section 3 */
    .section-3 {
        display: block;
    }

    /* Section 5 */
    .topic-icons-work-flow {
        padding:20px;
    }

    .work-flow-icons {
        padding: 0;
    }

    .text-span-work-flow {
        font-size: 15px;
    }

    .separator-fluxo {
        display:none;
    }

    /* Section 4 */
    .products-fake-btn,
    .cases-fake-btn {
        min-height: 40px;
        margin-bottom: 40px;
        padding: 10px 30px;
    }

    .products-title {
        padding-top: 25px;
    }

    /* Section 7 */
    .line-1-clients-logos,
    .line-2-clients-logos {
        justify-content: center;
        flex-wrap: wrap;
    }

    .line-1-clients-logos .client-logo {
        margin: 20px 40px;
        width: 180px;
        height: 80px;
    }
}

@media (min-width: 460px) and (max-width: 619px) {
    html {
        font-size: 83%;
    }

    .bt,
    header {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .bt {
        margin: 10px auto;
    }

    .navbar-toggler {
        margin: 0 20px;
    }

    .btn-collapse {
        display: block;
    }

    .logo-header {
        width: 170px;
    }

    .image-section-2,
    .dots,
    .img-element,
    .el-sec6-1,
    .el-sec6-2,
    .task-el-1,
    .task-el-2 {
        display: none;
    }

    /* Section 1 */
    .section-1 {
        background-position: left;
        justify-content: flex-start;
        padding: 80px 0 180px 10%;
    }

    .text-section-1 {
        width: 60%;
        text-align: center;
    }

    /* Section 2 */
    .title-section-2 h1,
    .title-section-2 h3 {
        font-size: 26px;
    }

    .content-section-2 {
        justify-content: center;
        text-align: center;
        padding-bottom: 30px;
    }

    .text-section-2 {
        font-size: 14.5px;
        flex-direction: column;
        width: 100%;
    }

    /* Section 3 */
    .section-3-icons {
        display: block;
        margin-top: 0;
    }

    .section-3-icons-inner {
        padding: 15px;
    }

    /* Section 4 */
    .products-fake-btn,
    .cases-fake-btn {
        min-height: 40px;
        margin-bottom: 40px;
        padding: 10px 30px;
    }

    .products-title {
        padding-top: 25px;
    }

    /* Section 5 */
    .task-text span,
    .quitaweb-text {
        width: 80%;
    }

    .work-flow-icons {
        flex-direction: column;
        padding: 0;
        align-items: center;
    }

    .separator-fluxo {
        height: 20px;
        width: 2px;
        background-color: #cfcfcf;
        margin: 10px 0;
    }

    .quita-logo img,
    .confirma-logo img {
        width: 300px;
    }

    /* Section 6 */
    .qrcode img {
        width: 220px;
    }

    /* Section 7 */
    .line-1-clients-logos,
    .line-2-clients-logos {
        justify-content: center;
        flex-wrap: wrap;
    }

    .line-1-clients-logos .client-logo {
        margin: 20px 40px;
        width: 170px;
        height: 55px;
    }

    /* Footer */
    .text-footer {
        text-align: center;
    }
}

@media (min-width: 310px) and (max-width: 459px) {
    html {
        font-size: 79%;
    }

    h1,
    h2,
    h3 {
        font-size: 16px;
    }

    .bt,
    header {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .bt {
        margin: 10px auto;
    }

    .navbar-toggler {
        margin: 0 20px;
    }

    .btn-collapse {
        display: block;
    }

    .logo-header {
        width: 160px;
    }

    .image-section-2,
    .dots,
    .img-element,
    .el-sec6-1,
    .el-sec6-2,
    .task-el-1,
    .task-el-2 {
        display: none;
    }

    .navbar {
        padding: 20px;
    }

    /* Section 1 */
    .section-1 {
        background-position: left;
        justify-content: center;
        padding: 80px 0 180px 0;
    }

    .text-section-1 {
        width: 80%;
        text-align: center;
    }

    .text-section-1 span.text-white {
        font-size: 16px;
    }

    /* Section 2 */
    h1.text-white {
        font-size: 28px;
        text-align: center;
    }

    .title-section-2 h1,
    .title-section-2 h3 {
        font-size: 24px;
    }

    .text-section-2 {
        font-size: 12px;
        width: 100%;
    }

    .content-section-2 {
        justify-content: center;
        text-align: center;
    }

    /* Section 3 */
    .section-3-icons {
        display: block;
        margin-top: 0;
    }

    .section-3-icons-inner {
        padding: 15px;
    }

    /* Section 4 */
    .products-fake-btn,
    .cases-fake-btn {
        min-height: 30px;
        margin-bottom: 40px;
        padding: 10px 30px;
    }

    .products-title {
        padding-top: 25px;
    }

    .text-section-4 {
        max-width: 100%;
        padding: 15px;
    }

    .products-text {
        font-size: 18px;
        margin: 40px;
    }

    /* Section 5 */

    .quita-logo img,
    .confirma-logo img {
        width: 250px;
    }

    .task-text span,
    .quitaweb-text,
    .confirma-text {
        width: 80%;
    }

    .work-flow-icons {
        flex-direction: column;
        padding: 0 0 40px 0px;
        align-items: center;
    }

    .separator-fluxo {
        height: 20px;
        width: 2px;
        background-color: #cfcfcf;
        margin: 10px 0;
    }


    /* Section 6 */
    .qrcode img {
        width: 200px;
    }

    /* Section 7 */
    .line-1-clients-logos,
    .line-2-clients-logos {
        justify-content: center;
        flex-wrap: nowrap;
    }

    .line-1-clients-logos .client-logo {
        margin: 20px 40px;
        width: 165px;
        height: 50px;
    }

    .clients-logos {
        position: relative;
        overflow: hidden;

        flex-wrap: nowrap;
        width: auto;
    }

    .animation-div {
        top: 0px;
        left: 0px;
        overflow: hidden;
        white-space: nowrap;
        animation: bdBestCarousel 10s linear infinite;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
    }

    /* Footer */
    .text-footer {
        text-align: center;
    }
}