@media (min-width: 1400px) {}

@media (min-width: 1200px) {

    /*  GLOBAL   */
    .padding-global {
        padding: 0px 5%;
    }

    /*DEV        */
    #beneficios-dev .grid-item .imagens img {
        position: absolute;
        width: 100%;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
    }

}

@media (max-width: 992px) {

    /*  GLOBAL   */
    .padding-global {
        padding: 0px 5%;
    }

    /*  MKT         */
    .grid-vantagens {
        display: flex;
        margin: 0 auto;
    }

    #beneficios-mkt .grid-item:first-child .img-hover {
        width: 30%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:first-child:hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(5%, 10%, 100px);
    }

    #beneficios-mkt .grid-item:first-child:hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 600%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(2) .img-hover {
        width: 50%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(2):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, 5%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(2):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(2%, 600%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(3) .img-hover {
        width: 40%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(3):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(-10%, 0%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(3):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 600%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(4) .img-hover {
        width: 60%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(4):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -10%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(4):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(2%, 400%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(5) .img-hover {
        width: 20%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(5):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, 0%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(5):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 500%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(6) .img-hover {
        width: 30%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(6):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -8%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(6):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(5%, 1200%, 250px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(7) .img-hover {
        width: 50%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(7):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -20%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(7):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 250%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(8) .img-hover {
        width: 40%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(8):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -20%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(8):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 300%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(9) .img-hover {
        width: 40%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(9):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -20%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(9):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 300%, 250px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(10) .img-hover {
        width: 80%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(10):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -30%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(10):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 50%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    /*  DEV         */
    #beneficios-dev .grid-item .imagens img {
        position: absolute;
        width: 60%;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
    }

    #beneficios-dev .grid-item:first-child .imagens img,
    #beneficios-dev .grid-item:last-child .imagens img {
        position: absolute;
        width: 100%;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
    }

    #beneficios-dev .grid-item:nth-child(9) .imagens img {
        position: absolute;
        width: 35%;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
    }

    #beneficios-dev .grid-item:nth-child(3) .imagens img {
        position: absolute;
        width: 25%;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {

    /*  HERO       */
    .servicos-hero {
        font-size: 1.5rem;
    }

    /*  MKT         */
    .grid-vantagens {
        grid-template-columns: repeat(1, 1fr);
    }

    #beneficios-mkt .grid-item:first-child .img-hover {
        width: 30%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:first-child:hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(5%, 10%, 100px);
    }

    #beneficios-mkt .grid-item:first-child:hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 300%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(2) .img-hover {
        width: 50%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(2):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, 5%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(2):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(2%, 300%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(3) .img-hover {
        width: 40%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(3):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(-10%, 0%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(3):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 600%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(4) .img-hover {
        width: 60%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(4):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -10%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(4):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(2%, 100%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(5) .img-hover {
        width: 20%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(5):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, 0%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(5):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 500%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(6) .img-hover {
        width: 30%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(6):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -8%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(6):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(5%, 700%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(7) .img-hover {
        width: 50%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(7):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -20%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(7):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 250%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(8) .img-hover {
        width: 40%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(8):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -20%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(8):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 300%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(9) .img-hover {
        width: 40%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(9):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -20%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(9):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 300%, 250px);
        transition: all 0.5s;
        opacity: 1;
    }

    #beneficios-mkt .grid-item:nth-child(10) .img-hover {
        width: 80%;
        transition: all 0.5s;
        position: absolute;
        bottom: 0;
        transform-style: preserve-3d;
        opacity: 0;
        z-index: 1;
    }

    #beneficios-mkt .grid-item:nth-child(10):hover .img-hover {
        opacity: 1;
        transform: rotateX(-10deg) translate3d(0%, -30%, 100px);
    }

    #beneficios-mkt .grid-item:nth-child(10):hover h5:nth-child(3) {
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
        transform: rotateX(-10deg) translate3d(0%, 50%, 150px);
        transition: all 0.5s;
        opacity: 1;
    }
}

@media (max-width: 576px) {

    /*  HERO      */
    .servicos-hero {
        font-size: 1.25rem;
    }

    /*  ABOUT    */
    #about {
        margin: 5% 5%;
    }

    #about hr {
        width: 80%;
        margin: 0 auto;
    }

    /*  COUNTER     */
    #counter {
        margin: 0 5%;
        margin-top: -9rem;
    }

    /*  SREVIÇOS    */
    .service-number {
        padding-right: 2rem;
    }

    /*  DEV         */
    #beneficios-dev .grid-item:nth-child(9) .imagens img {
        position: absolute;
        width: 50%;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
    }

    #beneficios-dev .grid-item:nth-child(3) .imagens img {
        position: absolute;
        width: 30%;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
    }

    /*  PRINCIPIOS     */
    #principios {
        margin: 0 5%;
    }
}