@media screen and (max-width: 1300px) {
    .solucao-interno .content{
        display: inline-block;
        
    }

    .solucao-interno .content .text{
        width: 80%;
        margin: 0 auto;
        padding: 2rem 0;
    }

    .solucao-interno .image-solucao{
        width: 100%;
        margin: 0 auto;
        text-align: right;
    }
    .solucao-interno .image-solucao img{

        width: 600px;
    }
}

@media screen and (max-width: 1122px) {
    .nav-bar {
        display: none;
    }

    .cta {
        display: none;
    }

    .main-nav {
        display: block;
    }
    .open-main-nav {
        display: block;
    }

    .sobre-interno .container {
        max-width: none;
        width: 100%;
    }

    .sobre-interno .container .text {
        width: 100%;
        background-color: #00000090;
        padding: 1rem 2rem;
    }

    .sobre-interno .container .text h1,
    .sobre-interno .container .text p,
    .sobre-interno .container .text .button-video button .video-text {
        color: var(--cor-branco);
    }

    .sobre-interno {
        height: calc(100vh - 100px);
        padding: 0;
    }

    .sobre-interno .container {
        position: relative;
        height: 100%;
    }

    .sobre-interno .container .row {
        position: absolute;
        bottom: 0;
    }

    .solution-interno .container .row {
        flex-direction: column;
    }
    .solution-interno .container .title {
        max-width: none;
    }
    .solution-interno .container .holder-solution .box-solucao {
        margin: 0;
    }

    .mais-servicos .tabs-servico .tablinks {
        width: 180px;
        height: 180px;
        font-size: 1.6rem;
    }

    .mais-servicos .tabs-servico #design {
        left: 59%;
        top: 12%;
    }

    .mais-servicos .tabs-servico #crescimento {
        left: 19%;
        top: 7%;
    }

    .mais-servicos .tabs-servico #customer {
        left: 50%;
        bottom: 5%;
    }

    .mais-servicos .tabs-servico #pesquisa {
        left: 10%;
        bottom: 20%;
    }

    .mais-servicos .tabcontent h3 {
        font-size: 2rem;
    }

    .mais-servicos .tabcontent ul li{
        font-size: 1.4rem;
    }

    .solucoes-dipe .container .row .box-solucoes{
        width: 48%;
        max-width: none;
        margin-bottom: 2rem;
    }
    
    .solucoes-dipe .row{
        flex-wrap: wrap;
    }

    .solucoes .list-solutions .box-solution {
        flex: 0 0 49%;
    }
}

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

    .sobre .row{
        flex-direction: column;
    }

    .sobre .foto-fluid{
        width: 100%;
    }
    

    .sobre .text{
        width: 100%;
        padding: 5rem 4rem;
    }

    .swiper.mySwiperBanner {
        height: 100vh;
    }

    .mySwiperBanner .swiper-slide .text {
        width: 100%;

        left: 60px;
    }

    .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        display: none;
    }

    .sobre .container .row {
        flex-direction: column;
    }

    .sobre .container .foto {
        width: 100%;
        height: 400px;
    }

    .sobre .container .text {
        width: 100%;
    }

    .solucoes .list-solutions {
        align-items: start;
    }
    .conteudo .content .row {
        flex-wrap: wrap;
    }

    .conteudo .content .box-conteudo {
        width: 100%;
        max-width: none;
    }

    .contato .row {
        flex-direction: column-reverse;
    }

    .contato .formulario {
        width: 100%;
    }

    .contato .infos-contato {
        width: 100%;
    }

    .footer .container .row {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .footer .container .links-rapidos {
        margin: 2rem 0;
    }

    .footer .container .logo {
        margin: 0 auto;
        width: 100%;
        max-width: none;
    }

    .footer .container .newsletter {
        max-width: none;
    }


    .mais-servicos .tabs-servico .button-destaque{
        font-size: 2rem;
        width: 180px;
        height: 180px;
    }


    .mais-servicos .tabs-servico #design {
        left: 55%;
        top: 15%;
    }

    .mais-servicos .tabs-servico #crescimento {
        left: 19%;
        top: 12%;
    }

    .mais-servicos .tabs-servico #customer {
        left: 50%;
        bottom: 10%;
    }

    .mais-servicos .tabs-servico #pesquisa {
        left: 13%;
        bottom: 20%;
    }

    .pesquisa-mercado .container .row {
        flex-direction: column;
    }

    .pesquisa-mercado .container .foto{
        width: 100%;
    }

    .pesquisa-mercado .container .text{
        width: 100%;
        margin: 1rem 0;
    }

    .tecnicas .container .row{
        flex-direction: column;
        margin: 2rem 0;
    }

    .tecnicas .container .row .foto{
        order: 1;
    }

    .tecnicas .container .row .icon{
        padding: 5rem 0;
        order: 2;
    }

    .tecnicas .container .row .text{
        order: 3;
    }

    .contato-section .container .row {
        flex-direction: column;
    }   

    .contato-section .formulario{
        width: 100%;
    }

    .contato-section .dados-form{
        width: 100%;
    }

    .conteudos-interno .single-conteudo{
        flex: 0 0 100%;
    }

    .conteudo-post .container{
        flex-direction: column;
    }

    .conteudo-post aside{
        width: 100%;
    }

    .conteudo-post article .foto{
        height: auto;
    }

    .experiencia .bg-image .relative{
        width: 80%;
        bottom: -100px;
    }

    .profissionais{
        margin-top: 100px;
    }
}

@media screen and (max-width: 766px) {
    .mySwiperBanner .swiper-slide .text {
        left: 20px;
    }
    .mySwiperBanner .swiper-slide .text h1,
    .mySwiperBanner .swiper-slide .text h1 .color {
        font-size: 3.2rem;
    }

    .sobre .container .box .holder h3 {
        font-size: 2.6rem;
    }

    .sobre .container .text .normal-text {
        height: auto;
        padding: 2rem 0;
    }

    .numeros .container .row {
        flex-wrap: wrap;
    }

    .numeros .container .numero-box {
        width: 100%;

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

        margin: 1rem 0;

        text-align: center;
    }

    .solucoes .list-solutions .box-solution {
        flex: 0 0 100%;
    }

    .tecnicas .container .row .image{
        width: 100%;
    }

    .mais-servicos .tabs-servico{
        place-items: initial;
        height: auto;
    }
    .mais-servicos .tabs-servico .tablinks{
        position: relative;

        top: 0 !important;
        left: 0 !important;
    }

    .mais-servicos .tablinks .tabcontent{
        left: 110% !important;
        top: 50% !important;
        width: fit-content;
        transform: translate(-50%, -50%);
    }

    .solution-interno .container .holder-solution .box-solucao{
        padding: 4rem 2rem;
    }

    .experiencia .bg-image .relative{
        width: 100%;
        bottom: -200px;
    }

    .profissionais{
        margin-top: 250px;
    }

    .solucoes-dipe .container .row .box-solucoes{
        width: 98%;
        max-width: none;
        margin-bottom: 2rem;
    }

    .solucoes .buttons-solution {
        flex-direction: column;
    }

    .solucoes .buttons-solution a{
        margin: 1rem 0;
        width: 100%;
        text-align: center;
    }

    .solucoes .buttons-solution .solicite{
        margin-right: 0;
    }
}

@media screen and (max-width: 635px) {
    .solucao-interno .image-solucao{
        width: 100%;
        height: fit-content;
        display: block;
    }
    .solucao-interno .image-solucao img{
        position: relative;
        width: 100%;
    }
}

@media screen and (max-width: 550px) {
    .solucao-interno .ul{
        flex-direction: column;
    }

    .solucao-interno .ul ul{
        width: 100%;
    }


    .case-interno .container .text .row{
        flex-direction: column;
    }

    .case-interno .container .text .row img{
        margin: 2rem 0;
    }

}

@media screen and (max-width: 425px) {
    .conteudo .title .row {
        flex-direction: column;
    }

    .chamada-orcamento .container {
        flex-direction: column;
    }

    .chamada-orcamento h2 {
        padding-bottom: 1rem;
    }
    
}