@media screen and (min-width: 320px) {
    .class-desktop-servicos {
        display: none;
    }
    .class-mobile-servicos {
        display: block;
    }

    .title-dev {
        font-size: 20px;
        font-weight: 500;
    }

    .title-mobile-servicos {
        margin-top: 20%;
        font-size: 40px;
        font-weight: 300;

    }

    .class-mobile-dev {
        margin-top: 3%;
        height: 170px;
        width: 100%;
        position: relative;
    }

    .class-mobile-dev h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-mobile-dev img:hover {
        opacity: 0.5;
    }

    .class-mobile-dev:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-mobile-dev:hover~class-dev img {
        opacity: 0.5;
    }

    .class-mobile-consultoria {
        margin-top: 3%;
        height: 170px;
        width: 100%;
        position: relative;
    }

    .class-mobile-consultoria h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-mobile-consultoria img:hover {
        opacity: 0.5;
    }

    .class-mobile-consultoria:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-mobile-consultoria:hover~class-dev img {
        opacity: 0.5;
    }

    .class-mobile-outsoursing {
        margin-top: 3%;
        height: 170px;
        width: 100%;
        position: relative;
    }

    .class-mobile-outsoursing h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-mobile-outsoursing img:hover {
        opacity: 0.5;
    }

    .class-mobile-outsoursing:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-mobile-outsoursing:hover~class-dev img {
        opacity: 0.5;
    }

}

@media screen and (min-width: 576px) {}

@media screen and (min-width: 768px) {
    .class-desktop-servicos {
        display: block;
    }
    .class-mobile-servicos {
        display: none;
    }

    .title-dev {
        font-size: 30px;
        font-weight: 500;
    }

    .title-servicos {
      
        font-size: 60px;
        font-weight: 300;

    }

    .class-dev {
        margin-top: 3%;
        height: 280px;
        width: 100%;
        position: relative;
    }

    .class-dev h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-dev img:hover {
        opacity: 0.5;
    }

    .class-dev:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-dev:hover~class-dev img {
        opacity: 0.5;
    }

    .class-consultoria {
        margin: 0 1.3% 0 0;
        margin-top: 1.3%;
        width: 65%;
        height: 280px;
    }

    .class-consultoria h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-consultoria img:hover {
        opacity: 0.5;
    }

    .class-consultoria:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-consultoria:hover~class-dev img {
        opacity: 0.5;
    }

    .class-outsoursing {
        margin-top: 1.3%;
        width: 40%;
        height: 280px;
    }

    .class-outsoursing h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-outsoursing img:hover {
        opacity: 0.5;
    }

    .class-outsoursing:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-outsoursing:hover~class-dev img {
        opacity: 0.5;
    }
}

@media screen and (min-width: 992px) {
    .class-desktop-servicos {
        display: block;
    }
    .class-mobile-servicos {
        display: none;
    }

    .title-dev {
        font-size: 30px;
        font-weight: 500;
    }

    .title-servicos {
      
        font-size: 60px;
        font-weight: 300;

    }

    .class-dev {
        margin-top: 3%;
        height: 280px;
        width: 100%;
        position: relative;
    }

    .class-dev h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-dev img:hover {
        opacity: 0.5;
    }

    .class-dev:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-dev:hover~class-dev img {
        opacity: 0.5;
    }

    .class-consultoria {
        margin: 0 1.3% 0 0;
        margin-top: 1.3%;
        width: 65%;
        height: 280px;
    }

    .class-consultoria h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-consultoria img:hover {
        opacity: 0.5;
    }

    .class-consultoria:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-consultoria:hover~class-dev img {
        opacity: 0.5;
    }

    .class-outsoursing {
        margin-top: 1.3%;
        width: 40%;
        height: 280px;
    }

    .class-outsoursing h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-outsoursing img:hover {
        opacity: 0.5;
    }

    .class-outsoursing:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-outsoursing:hover~class-dev img {
        opacity: 0.5;
    }
}

@media screen and (min-width: 1200px) {
    .class-desktop-servicos {
        display: block;
    }
    .class-mobile-servicos {
        display: none;
    }

    .title-dev {
        font-size: 40px;
        font-weight: 500;
    }

    .title-servicos {
      
        font-size: 60px;
        font-weight: 300;

    }

    .class-dev {
        margin-top: 3%;
        height: 230px;
        width: 100%;
        position: relative;
    }

    .class-dev h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-dev img:hover {
        opacity: 0.5;
    }

    .class-dev:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-dev:hover~class-dev img {
        opacity: 0.5;
    }

    .class-consultoria {
        margin: 0 1.3% 0 0;
        margin-top: 1.3%;
        width: 65%;
        height: 230px;
    }

    .class-consultoria h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-consultoria img:hover {
        opacity: 0.5;
    }

    .class-consultoria:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-consultoria:hover~class-dev img {
        opacity: 0.5;
    }

    .class-outsoursing {
        margin-top: 1.3%;
        width: 40%;
        height: 230px;
    }

    .class-outsoursing h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-outsoursing img:hover {
        opacity: 0.5;
    }

    .class-outsoursing:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-outsoursing:hover~class-dev img {
        opacity: 0.5;
    }



}

@media screen and (min-width: 1364px) {
    .class-desktop-servicos {
        display: block;
    }
    .class-mobile-servicos {
        display: none;
    }

    .title-servicos {
        
        font-size: 80px;
        font-weight: 300;

    }

    .class-dev {
        margin-top: 3%;
        height: 260px;
        width: 100%;
        position: relative;
    }

    .class-dev h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-dev img:hover {
        opacity: 0.5;
    }

    .class-dev:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-dev:hover~class-dev img {
        opacity: 0.5;
    }

    .class-consultoria {
        margin: 0 1.3% 0 0;
        margin-top: 1.3%;
        width: 65%;
        height: 260px;
    }

    .class-consultoria h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-consultoria img:hover {
        opacity: 0.5;
    }

    .class-consultoria:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-consultoria:hover~class-dev img {
        opacity: 0.5;
    }

    .class-outsoursing {
        margin-top: 1.3%;
        width: 40%;
        height: 260px;
    }

    .class-outsoursing h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-outsoursing img:hover {
        opacity: 0.5;
    }

    .class-outsoursing:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-outsoursing:hover~class-dev img {
        opacity: 0.5;
    }


    .title-dev {
        font-size: 40px;
        font-weight: 500;
    }
}

@media screen and (min-width: 1600px) {
    .class-desktop-servicos {
        display: block;
    }

    .class-mobile-servicos {
        display: none;
    }

    .title-servicos {
  
        font-size: 80px;
        font-weight: 300;

    }

    .class-dev {
        margin-top: 3%;
        height: 380px;
        width: 100%;
        position: relative;
    }

    .class-dev h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-dev img:hover {
        opacity: 0.5;
    }

    .class-dev:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-dev:hover~class-dev img {
        opacity: 0.5;
    }

    .class-consultoria {
        margin: 0 1.3% 0 0;
        margin-top: 1.3%;
        width: 65%;
        height: 380px;
    }

    .class-consultoria h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-consultoria img:hover {
        opacity: 0.5;
    }

    .class-consultoria:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-consultoria:hover~class-dev img {
        opacity: 0.5;
    }

    .class-outsoursing {
        margin-top: 1.3%;
        width: 40%;
        height: 380px;
    }

    .class-outsoursing h1 {
        color: #fff;
        transition: all 0.3s ease-in-out;
        position: absolute;
    }

    .class-outsoursing img:hover {
        opacity: 0.5;
    }

    .class-outsoursing:hover h1 {
        color: #000;
        text-decoration: none;
    }

    .class-outsoursing:hover~class-dev img {
        opacity: 0.5;
    }


    .title-dev {
        font-size: 60px;
        font-weight: 500;
    }
}