@media (max-width: 1109px) {
    .principal {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 90px 15px;    
    }

    .principal .texto {
        text-align: center;
    }

    .principal .texto h1 {
        font-size: 35px;
        line-height: 40px;
        text-align: center;
    }


    .principal-img {
        background-color: red;
    }
    
    .principal-img img {
        position: absolute;
        max-width: 400px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }


    .quem-somos .imagem img {
        width: 420px;
    }

    .processos-box .passos {
        width: 30%;
    }

    .processos-box .passos img {
        width: 30%;
    }

    .processos-box .passos h2 {
        font-size: 25px;
    }

    .processos-box .passos span {
        font-size: 19px;
    }

    .swiper-container {  
        width: 100%;
        margin: 0 auto;
    }

    .negocio-internet {
        text-align: center;
        padding: 80px 10px;
    }

    .negocio-internet-box .texto span {
        font-size: 18px;
    
    }

    .negocio-internet-box .texto h2 {
        font-size: 25px;
        line-height: 40px;
    }


    .negocio-internet-box .texto #p1 {
        font-size: 20px;
    }


    .solucoes-empresas .texto h2 {
        font-size: 35px;
        line-height: 40px;
        
    }


    .servicos .titulo-servico h3 {
        font-size: 32px;
    }


    .servicos .titulo-servico h2 {
        font-size: 30px;
        top: -45px;
    }


    .servicos .titulo-servico-box .servico-box {
        width: 30%;
    }


    .portfolio .meu-portfolio h3 {
        font-size: 80px;
    }


    .portfolio .meu-portfolio h2 {
        font-size: 30px;
    }

    .portfolio .meu-portfolio span {
        top: -70px;
    }


    .swiper-slide span {
        font-size: 18px;
    }

    .swiper-slide p {
        font-size: 16px;
    }

    .rodape-superior img {
        width: 190px;
    }
}


@media (max-width: 985px) {
    /* header {
        left: 50%;
        transform: translateX(-50%);
    } */


    .menu-hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0px;
        right: -100%;
        height: 100%;
        width: 200px;
        background: #333;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: right 0.3s ease-in-out;
    }

    .nav-menu.open {
        right: 0;
    }

    .nav-menu ul {
        flex-direction: column;
    }

    .nav-menu ul li {
        margin: 20px 0;
    }

    .rede-sociais {
        display: flex;
        gap: 30px;
        margin: 0 auto;
    }


    .rede-sociais ul {
        display: none;
        align-items: center;
        gap: 3px;

    }



    .principal {
        display: flex;    
        flex-direction: column;  
    }

    .btn{
        font-size: 8px;       
        padding: 9px 20px;
        width: 90%;
    }


    .principal .imagem {
        position: relative;
        top: 40px;
    }

    .quem-somos {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        padding: 100px 0; 
        text-align: center;
    }

    .quem-somos .texto {
        width: 78%;
    }

    .quem-somos .imagem {
        margin-top: -10px;
    }

    
    .quem-somos .imagem img {
        width: 450px;
    }


    .quem-somos .imagem .imagem-fundo {
        left: -85%;
        font-size: 150px;    
    }


    .negocio-internet-box .img {
        text-align: center;
    }


    .negocio-internet-box {
        display: flex;
        flex-direction: column;
    }


    .img .imagem-fundo {
        position: absolute;
        top: -40%;
        left: 50%;
        font-size: 30px;
    }


    .negocio-internet-box .img {
        position: relative;
        top: 40px;
    }


    .solucoes-empresas-box {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        padding: 0;
    }

    .solucoes-empresas-box img {
        position: relative;
        top: 80px;
        width: 280px;
    }

    .solucoes-empresas .texto {
        text-align: center;
    }


    .solucoes-empresas .img .imagem-fundo {
   font-size: 200px;
    }

    .img .imagem-fundo {
        font-size: 65px;
    }

    .imagem-fundo {
        left: 5%;    
    }

    .preco {
        padding: 100px 0;
        text-align: center;
    }

    .preco-box {
        width: 100%;
    }

    .preco-box img {
        width: 105px;
    }

    .preco-box h2, .preco-box h3 {
        font-size: 15px;
    }

    .pacotes-box {    
       margin-top: 40px;
    }

    .preco-box {
        border-radius: 10px;
        padding: 35px 0 0;
        display: flex;
        flex-direction: column;
    }

    .preco-box h2 {
        position: relative;
        top: -10px;
    }
    
    .preco-box h3 {
        position: relative;
        top: -20px;
    }

    .preco-pacotes {
        margin-top: -15px;
    }

    .faq {
        padding: 20px;
    }

    .portfolio .portfolio-container {
        display: flex;
        flex-wrap: wrap;
    }

    .portfolio {
        padding: 100px 20px;
    }

    .rodape {
        padding: 40px 20px;
        background-color: red;
    }

    .rodape-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .rodape-info {
        width: 95%;
        text-align: center;
    }

    .rodape-info img {
        width: 120px;   
    }

    .rodape-info p {
        text-align: center;
    }

    .rodape-contato {
        width: 100%;
    }

    .rodape-localizacao {
        width: 100%;
    }
    
    .rodape-localizacao iframe {
        width: 100%;
    }

    .copyright {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        gap: 30px;
    }

}

@media (max-width: 868px) {
    .processos-box, .servicos .titulo-servico-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .processos .passos, .servicos .titulo-servico-box .servico-box {
        width: 100%;
    }
}


@media (max-width: 768px) {
    .menu-hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0px;
        right: -100%;
        height: 100%;
        width: 200px;
        background: #333;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: right 0.3s ease-in-out;
    }

    .nav-menu img {
        width: 120px;
        display: block;
    }

    .nav-menu i {
        font-size: 30px;
    }

    .nav-menu.open {
        right: 0;
    }

    .nav-menu ul {
        flex-direction: column;
        text-align: center;
    }

    .nav-menu ul li {
        margin: 20px 0;
    }


    .imagem-fundo {
        position: absolute;
        top: 120px;
        left: 25%;
        font-size: 120px;    
    }


    .quem-somos .imagem .imagem-fundo {
        position: absolute;
        top: -20%;
        left: -55%;
        font-size: 120px;
    }

    .solucoes-empresas .img .imagem-fundo {
        left: -5%;
        font-size: 120px;
    }

    .img .imagem-fundo {
        position: absolute;
        top: -20%;
        left: -20%;
    }   

    .swiper-container {  
        padding: 60px 45px;
    }
    
    header {
        padding: 0px 0;
    }

    header .btn {
        display: none;
    }
    

    header .logo {
        position: relative;
        left: 20%;
    }

    .negocio-internet-box .img img {
        width: 100%;
    }
    
}

@media (max-width: 491px) {
    .logo a img {
        position: relative;
        width: 90px;
        right: 17px;
    }

    .main {
        padding: 0;
    }
    
    .principal {
        display: flex;
        position: relative;
        top: -50px;
        padding: 0;
        align-content: center;
        justify-content: center;  
    }

    .principal .texto {
        text-align: center;
        margin-top: 100px;
        padding: 0 15px;
    }
    
    .principal .texto h1 {
        font-size: 22px;
        line-height: 40px;
        font-weight: bold;
        text-align: center;
    }


    .principal .texto h1 .span {
        font-size: 30px;
    }



    .animated {
        width: 250px;
        margin: 0 auto;
        position: relative;
        top: 10px;
        margin-bottom: 40px;
    }

    .quem-somos {
        text-align: center;
        padding: 100px 0px; 
    }

    .quem-somos .texto {
        width: 90%;
    }

    .quem-somos .imagem img {
        width: 100%;
        height: 200px;
    }

    
    .processos .passos {
        padding: 10px;
    }


    .imagem-fundo {
        position: absolute;
        top: 200px;
    }

    .quem-somos .imagem .imagem-fundo {
        font-size: 80px;
    }


    .negocio-internet-box {
        text-align: center;
    }

    .solucoes-empresas .texto h2 {
        font-size: 30px;
    }

    .img .imagem-fundo {
        left: 20%;
    }
    
    .solucoes-empresas {
        padding: 80px 10px;
        text-align: center;
    }


.servicos .titulo-servico-box .servico-box {
    width: 350px;
   }

   .servicos {
    padding: 80px 20px;
   }

    .servicos .titulo-servico h2 {
        font-size: 55px;
        margin: 0 auto;
        line-height: 1em;
    }

    .servicos .titulo-servico h3 {
        top: -25px;
        line-height: 35px;
    }



    .portfolio .meu-portfolio h2 {
        position: relative;
        top: -25px;
        font-size: 70px;
        left: -1px;
    }


    .portfolio .meu-portfolio h3 {
        font-size: 30px;
        line-height: 30px;   
    }

    .portfolio .meu-portfolio span {
        top: -40px;
    }


    .swiper-slide {
        border: 5px solid #895338;
        padding: 20px;
        height: 150px;
      }


    .swiper-slide img {
        border-radius: 0rem;
      }

      .swiper-slide span {
        padding: 6px;    
        font-size: 14px;
        font-family: "Poppins", Sans-serif;
      }

      .swiper-slide p {
        color: white;
        font-size: 12px;
      }

 
        .rodape {
            padding: 30px;
        }

        .rodape-superior img {
            width: 120px;
        }

        .copytight, .rodape-info {
            font-size: 12px;
        }

        .whatsapp img {
            width: 30px;
}

}