@media(max-width: 574px) {

    html,
    body {
        overflow-x: hidden;
    }

    .title-topo {
        flex-direction: column;
        text-align: center;
        text-wrap: wrap;
    }

    .line-mobile {

        width: 100%;
    }

    .box-btn {
        flex-direction: column;
        gap: 10px;
        margin: 0 0 50px 0;
        text-align: center;
    }

    header {
        background-image: url('../img/contabilidade-mobile-header.webp');
        height: 1000px;

    }

    .container-principal {
        width: 95%;
    }

    .conteudo-principal {
        align-items: center;
        justify-content: end;
        flex-direction: column;
        text-align: justify;
        margin: 0 auto;
        gap: 20px;
        width: 100%;
        height: 100%;
    }

    .img-logo-costaelima {
        object-fit: fill;
        width: 150px;
        height: 150px;
        margin: 40px 0 25px 0;
    }


    .conteudo-principal .h3-titulo {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }


    .conteudo-principal p {
        width: 90%;
        text-align: center;
    }

    .btn-acao-servicos,
    .btn-acao {
        justify-content: center;
        text-align: center;
    }



    /* CONFIGURAÇÕES SERVIÇOS*/
    .container-servicos {
        background-image: url('../img/contabilidade-mobile-servicos.webp');
        width: 100%;
        height: 3650px;
    }

    .conteudo-servicos {
        width: 95%;
        height: 100%;
        margin: 0 auto;
        display: flex;
    }


    .box-list-card {
        justify-content: start;
        width: 100%;
        height: 100%;
    }

    .list-card-serv {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .card-serv {
        object-fit: fill;
        width: 100%;
        height: 100%;

    }


    /* CONFIGURAÇÕES BENEFICIOS*/


    .container-beneficios {
        background-image: url('../img/contabilidade-mobile-beneficios.webp');
        background-position: center center;
        height: 1100px;
        background-size: cover;
    }



    /* CONFIGURAÇÕES DEPOIMENTOS*/

    .container-depoimentos {
        background-size: cover;
        width: 100%;
        height: 1650px;
    }

    /* CONFIGURAÇÕES EMCARTES*/


    .container-encarte {
        background-image: url('../img/bg-contador-encarte.webp');
        background-size: cover;
        width: 100%;
        height: 1500px;
    }

    .counter-up .content {
        flex-direction: column;
        width: 100%;
        height: 100%;

    }

    .content .box {
        width: 300px;
    }

    .counter-up {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    /* CONFIGURAÇÕES SOBRE*/
    .container-sobre {
        background-image: url('../img/contabilidade-mobile-sobre.webp');
        background-size: cover;
        height: 2700px;
        width: 100%;
        align-items: start;
        justify-content: center;
    }

    .conteudo-sobre {
        width: 100%;
    }

    .box-sobre {
        width: 95% !important;
        height: 25%;
    }

    .conteudo-sobre .box-btn {
        flex-direction: column;
        gap: 15px;
        width: 95%;

    }

    .item-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    /* CONFIGURAÇÕES CONTADOR*/

    .container-contador {
        background-image: url('../img/contabilidade-mobile-troca.webp');
        width: 100%;
        height: 1100px;
    }

    .troca-contador {
        width: 95%;
        height: 100%;
        align-items: center;
        justify-content: start;
        padding: 30px 0 0 0;

    }

    .box-titulo-contador {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        color: var(--branco);
    }

    .troca-contador .box-titulo-contador p {

        width: 100%;
    }

    .troca-contador p {
        text-align: center;
        width: 95%;
    }

    .troca-contador .box-btn .btn-acao {
        margin: 0 auto;
    }

    /* CONFIGURAÇÕES FEEDBACK*/
    .container-feedback {
        background-image: url('../img/contabilidade-mobile-feedback.webp');
        width: 100%;
        height: 2200px;
    }

    .feedback {
        width: 95%;
        height: 100%;
        flex-direction: column;
    }

    .feedback .box-titulo-feedback {
        width: 90%;
    }

    .feedback .list-feed {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* CONFIGURAÇÕES CHAMADA*/
    .container-chamada {
        background-image: url('../img/contabilidade-mobile-chamada.webp');
        height: 500px;
    }

    .container-chamada .box-btn .btn-acao {
        margin: 0 auto;
    }

    /* CONFIGURAÇÕES CONTATO*/

    .conteudo-footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 95%;
        gap: 15px;
    }

    .box-conteudo div {
        width: 95%;
    }

    .box-conteudo div h1 {
        text-align: center;
    }



    iframe {
        width: 100%;
    }

    .container-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .container-conteudo {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .box-conteudo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 95%;
        height: 100%;

    }

    .box-conteudo .img-logo-costaelima {
        width: 100%;
        margin: 0 auto;
    }

    .box-conteudo .list-contato {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 85%;
        text-align: center;
    }

    .box-conteudo .list-contato .box-btn .btn-acao {
        margin: 0 auto;
        padding: 10px 30px;
    }

    .box-conteudo .list-contato li i {
        font-size: 2rem;
        margin: 0 15px 0 0;
        color: var(--verde-claro);

    }

    .link-instagram {
        color: var(--branco);
    }

    .box-conteudo div h1 {
        font-size: 2rem;
        font-weight: 400;
    }

    .box-conteudo div h1 b {
        color: var(--verde-claro);
    }

    .box-conteudo .img-logo-costaelima {
        width: 100%;
        margin: 0 auto;
    }

    /* CONFIGURAÇÕES RODAPÉ*/
    .rodape {
        flex-direction: column;
        width: 95%;
    }



}

@media (min-width: 820px) and (max-width: 1180px) {


    html,
    body {
        overflow-x: hidden;
    }

    .title-topo {
        flex-direction: column;
        text-align: center;
        text-wrap: wrap;
    }

    .line-mobile {

        width: 100%;
    }

    .box-btn {
        flex-direction: column;
        gap: 10px;
        margin: 0 0 50px 0;
        text-align: center;
    }

    header {
        background-image: url('../img/Tablet-header.webp');
        background-position: center center;
        height: 1500px !important;
        background-size: cover;

    }

    .conteudo-principal {
        align-items: center;
        justify-content: end;
        flex-direction: column;
        text-align: justify;
        margin: 0 auto;
        gap: 0px;
        width: 100%;
        height: 100%;
    }

    .img-logo-costaelima {
        object-fit: fill;
        width: 150px;
        height: 150px;
        margin: 40px 0 25px 0;
    }

    .conteudo-principal .h3-titulo {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }


    .conteudo-principal p {
        width: 90%;
        text-align: center;
    }

    .btn-acao-servicos,
    .btn-acao {
        justify-content: center;
        text-align: center;
    }



    /* CONFIGURAÇÕES SERVIÇOS*/
    .container-servicos {

        background-image: url('../img/tablet-servicos.webp');
        width: 100%;
        height: 3000px;
        justify-content: start;
        align-items: center;

    }

    .conteudo-servicos {
        width: 95%;
        height: 100%;
        margin: 0 auto;
    }


    .box-list-card {
        display: flex;
        flex-direction: column;
        justify-content: start;
        width: 100%;
        height: 50%;
    }

    .list-card-serv {
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;

        width: 100%;
        gap: 10px;
    }

    .card-serv {
        object-fit: fill;
        width: 300px;
        height: 220px;

    }


    /* CONFIGURAÇÕES BENEFICIOS*/


    .container-beneficios {
        background-image: url('../img/tablet-beneficios.webp');
        background-position: center center;
        height: 2150px;
        background-size: cover;
    }



    /* CONFIGURAÇÕES DEPOIMENTOS*/

    .container-depoimentos {
        background-size: cover;
        width: 100%;
        height: 1650px;
    }

    /* CONFIGURAÇÕES EMCARTES*/


    .container-encarte {
        background-image: url('../img/bg-contador-encarte.webp');
        background-size: cover;
        width: 100%;
        height: 1500px;
    }

    .counter-up .content {
        flex-direction: column;
        width: 100%;
        height: 100%;

    }

    .content .box {
        width: 300px;
    }

    .counter-up {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    /* CONFIGURAÇÕES SOBRE*/
    .container-sobre {
        background-image: url('../img/tablet-sobre.webp');
        background-size: cover;
        height: 3500px;
        width: 100%;
    }

    .conteudo-sobre {
        width: 100%;
        height: 85% !important;
        justify-content: center !important;
        margin: 0 auto !important;

    }

    .box-sobre {
        align-items: start;
        justify-content: start;
        width: 95%;
        height: 25%;
    }

    .conteudo-sobre .box-btn {
        flex-direction: column;
        gap: 15px;
        width: 95%;

    }

    .item-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    /* CONFIGURAÇÕES CONTADOR*/

    .container-contador {
        background-image: url('../img/tablet-troca.webp');
        width: 100%;
        height: 1500px;
    }

    .troca-contador {
        width: 95%;
        height: 100%;
        align-items: center;
        justify-content: start;
        padding: 30px 0 0 0;

    }

    .box-titulo-contador {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        color: var(--branco);
    }

    .troca-contador .box-titulo-contador p {

        width: 100%;
    }

    .troca-contador p {
        text-align: center;
        width: 95%;
    }

    .troca-contador .box-btn .btn-acao {
        margin: 0 auto;
    }

    /* CONFIGURAÇÕES FEEDBACK*/
    .container-feedback {
        background-image: url('../img/tablet-feed.webp');
        background-position: right right;
        background-size: cover;
        width: 100%;
        height: 2900px;
    }

    .feedback {
        width: 95%;
        height: 100%;
        flex-direction: column;
    }

    .feedback .box-titulo-feedback {
        width: 90%;
    }

    .feedback .list-feed {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* CONFIGURAÇÕES CHAMADA*/
    .container-chamada {
        background-image: url('../img/contabilidade-mobile-chamada.webp');
        height: 800px;
    }

    .container-chamada .box-btn .btn-acao {
        margin: 0 auto;
    }

    /* CONFIGURAÇÕES CONTATO*/

    .conteudo-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 95%;
        gap: 15px;
    }

    .box-conteudo div {
        width: 95%;
        flex-direction: column;
    }

    .box-conteudo div h1 {
        text-align: center;
        width: 100%;
    }

    iframe {
        width: 100%;
    }

    .container-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .container-conteudo {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .box-conteudo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 95%;
        height: 100%;

    }

    .box-conteudo .img-logo-costaelima {
        width: 100%;
        margin: 0 auto;
    }

    .box-conteudo .list-contato {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 85%;
        text-align: center;
    }

    .box-conteudo .list-contato .box-btn .btn-acao {
        margin: 0 auto;
        padding: 10px 30px;
    }

    .box-conteudo .list-contato li i {
        font-size: 2rem;
        margin: 0 15px 0 0;
        color: var(--verde-claro);

    }

    .link-instagram {
        color: var(--branco);
    }

    .box-conteudo div h1 {
        font-size: 2rem;
        font-weight: 400;
    }

    .box-conteudo div h1 b {
        color: var(--verde-claro);
    }

    /* CONFIGURAÇÕES RODAPÉ*/
    .rodape {
        flex-direction: column;
        width: 95%;
    }





}

@media (min-width: 1370px) {


    header {


        background-size: cover;
        background-position: center;
        width: 100%;
        height: 700px;
    }

    .container-servicos {

        background-image: url('../img/contabilidade-servicos.webp');
        object-fit: cover;
        width: 100%;
        height: 1300px;
    }

    .container-beneficios {

        height: 800px;
        width: 100%;
    }

    .container-depoimentos {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 1200px;
    }

    .container-sobre {
        background-size: cover;
        background-position: center;
        width: 100%;
    }

    .container-feedback {
        background-image: url('../img/bg-feedbacks.webp');
        width: 100%;
        height: 900px;
        color: var(--branco);
        font-weight: 400;
        margin: 100px 0;
    }


}

@media (min-width: 1181px) and (max-width: 1199.98px) {
    header {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 600px;
    }


    .container-servicos {
        width: 100%;
    }

}

/*
@media (min-width: 768px) and (max-width: 991.98px) {
    header {
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 700px;
    }

    .conteudo-principal {
        align-items: center;
        justify-content: end;
        flex-direction: column;
        text-align: justify;
        margin: 0 auto;
        gap: 0px;
        width: 100%;
        height: 100%;
    }

    .img-logo-costaelima {
        object-fit: fill;
        width: 150px;
        height: 150px;
        margin: 80px 0 0px 0;
    }

    .conteudo-principal .h3-titulo {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }


    .conteudo-principal p {
        width: 90%;
        margin: 50px auto 0 auto;
        text-align: center;
        line-height: 130%;
        font-weight: 300;
    }


    .title-topo {
        padding: 10px 0;
        width: 100%;
    }

    .title-topo p {
        width: 95%;
        text-align: center;
        margin: auto;
    }

    .title-topo i {
        margin: 0 10px;
    }

    /* CONFIGURAÇÕES SERVIÇOS
    .container-servicos {
        width: 100%;
    }

    .conteudo-servicos {
        width: 95%;
        height: 100%;
        margin: auto;
    }

    .box-list-card {
        gap: 30px;
        width: 100%;
        height: 90%;
    }

    .list-card-serv {
        flex-wrap: wrap;
        width: 100%;
        gap: 10px;
    }

    .card-serv {
        border: .5px solid var(--background-one);
        border-radius: 15px;
        padding: 15px 10px;
        width: 300px;
        height: 300px;
        gap: 10px;
    }





    /* CONFIGURAÇÕES DEPOIMENTOS

    .container-depoimentos {
        background-image: url('../img/bg-tablet-depoimentos.png');
        background-size: contain;
        width: 100%;
        height: 2500px;
    }




    /* CONFIGURAÇÕES SOBRE
    .container-sobre {
        background-size: cover;

        align-items: start;
        justify-content: center;
    }

    .conteudo-sobre {
        justify-content: start;
        align-items: center;
        width: 95%;
        height: 95%;
        margin: 0;
    }


    .box-sobre {
        justify-content: center;
        width: 100%;
        height: 50%;
    }

    /* CONFIGURAÇÕES RODAPE

    .conteudo-footer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .container-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .link-instagram {
        color: var(--cor-dourado-Oceano);
        font-size: 1.5rem;
    }

    .link-instagram:hover {
        border: .5px solid var(--cor-dourado-Oceano);
    }
   .box-conteudo .img-logo-costaelima {
        width: 100%;
        margin: 0 auto;
    }
    .box-conteudo div {
        display: flex;
        align-items: center;
        gap: 80px;
        width: 100%;
        color: #FFF;

    }

    iframe {
        width: 450px;
        height: 450px;
    }

    .rodape {
        flex-direction: column;
        width: 100%;
        padding: 15px 0;
    }


}


@media (min-width: 1800px) {
    .container-beneficios {
        height: 800px;
        object-fit: cover;
    }

    .container-encarte {
        width: 100%;
        height: 400px;
    }

    .counter-up .content {
        width: 1100px;

    }

    .container-conteudo {
        display: flex;
        width: 50%;
        height: 100% !important;
    }

    .box-conteudo {
        display: flex;
        flex-direction: column;
        align-items: start;
        width: 100%;
        height: 100%;

    }
}*/