:root {
    --grey: #dedede;
    --blue: #003366;
    --yellow: #FFD700;
    --greystrong: #1A1A1A;
}

@media (max-width: 1980px) {
    .sec4 {
        .esquerda {
            h2 {
                font-size: 2.3rem;
            }
        }

        .direita {
            h3 {
                font-size: 1rem;
            }
        }
    }
}

@media (max-width: 1650px) {
    .sec4 {
        width: 70%;

        .direita {
            h3 {
                font-size: 12px
            }
        }
    }

    .sec5 {
        .contato-wrapper {
            width: 100%;
        }
    }
}

@media screen and (max-width: 1400px) {
    .sec4 {
        width: 80%;
    }
}

@media (max-width: 1350px) {
    .logo {
        padding: 12px 5rem;
    }

    .sec1 .title {
        h1 {
            font-size: 3rem;
        }
    }

    .sec2 {
        padding: 0px 3rem;

        .content {
            width: 100%;

            .servi h4 {
                font-size: 15px !important;
            }
        }
    }

    .sec3 {
        padding: 0px 3rem;
    }
}

@media screen and (max-width:1190px) {
    .sec5 {
        .contato-wrapper {
            .content {
                h2 {
                    font-size: 3rem;
                }
            }
        }
    }
}

@media screen and (max-width: 1100px) {
    .logo {
        padding: 12px 1rem;
    }

    .sec2 {
        .heroSec2 {
            .content {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }

    .sec4 {
        width: 100%;
    }

    .sec5 {
        .contato-wrapper {
            padding: 10px 40px 5px 40px;
        }
    }
}

@media screen and (max-width: 950px) {
    .logo {
        padding: 12px 0rem;

        .nav {
            ul {
                a {
                    font-size: 12px;
                }
            }
        }


    }

    .sec2 {
        padding: 15px 1rem;
    }

    .sec3 {
        padding: 0px 1rem;
    }

    .sec4 {
        .esquerda {
            h2 {
                font-size: 2rem;
            }

            .img {
                width: 200px;
            }
        }
    }

    .sec5 {
        .contato-wrapper {
            .content {
                h2 {
                    font-size: 4rem;
                }
            }

            .links {
                a {
                    font-size: 12px;
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .logo {
        padding: 12px 0rem;

        .nav {
            ul {
                gap: 25px;
            }
        }
    }

    .sec1 {
        .heroStatus {
            .status {
                font-size: 1rem;
            }
        }
    }

    .sec4 {
        display: flex;
        flex-direction: column;

        .esquerda {
            h2 {
                font-size: 3rem;
            }

            img {
                margin: 0;
            }
        }

        .direita {
            h3 {
                border: none;
            }
        }
    }

    .sec5 {
        .contato-wrapper {
            padding: 10px 15px 5px 15px;

            .content {
                h2 {
                    font-size: 1.5rem
                }
            }

            .links {
                a {
                    font-size: 10px;
                }
            }
        }
    }
}

@media screen and (max-width: 780px) {
    .logo {
        img {
            width: 4rem;
        }

    }

    .sec1 {
        .title {
            h1 {
                font-size: 2rem;
            }


            p {
                font-size: 1rem;
            }
        }
    }

    .sec2 {
        .heroSec2 {
            .content {
                .servi {
                    img {
                        width: 30px;
                    }

                    h4 {
                        font-size: 12px;    
                    }

                    p {
                        font-size: 12px;
                    }
                }
            }
        }
    }

    .sec4 {
        .esquerda {
            img {
                margin: 0;
            }
        }

        .direita {
            h3 {
                padding: 15px 50px;
            }
        }
    }
}

@media screen and (max-width: 660px) {
    .logo {
        .nav {
            #menu {
                a {
                    font-size: 10px;
                }

            }
        }
    }

    .sec2 {
        .heroSec2 {
            .content {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    }

    .sec5 {
        padding: 10px 7px 5px 7px;

        .contato-wrapper {
            flex-direction: column;
            gap: 15px;
        }
    }
}

/* MENU HAMBURGUER AQUI */

@media screen and (max-width:600px) {
    .logo {
        padding: 12px 2rem;

        .btnMenu {
            display: block;
            background-color: transparent;
            border: none;
            color: #F1f1f1;
            font-size: 22px;
            position: absolute;
            right: 2rem;
            font-size: 32px;
            z-index: 1001;
        }

        #menu {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            position: fixed;
            width: 100%;
            top: 0;
            right: 0;
            background-color: var(--greystrong);
            height: 0;
            z-index: 1000;
            transition: .7s;
            visibility: hidden;
            overflow: hidden;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #menu li a {
            font-size: 20px;
            padding: 1.5rem 0;
            margin: 0;
            display: block;
            text-align: center;
            width: 100%;
        }

        .nav.active #menu {
            height: 100vh;
            visibility: visible;

            li { 
                a {
                    font-size: 18px;
                }
            }
        }
    }

    .sec1 {
        .heroStatus {
            .status {
                gap: 20px;
                font-size: 10px;
            }
        }
    }

    .sec3 {
        .imageTrabalho {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

@media screen and (max-width:450px) {
    .sec2 {
        .orc {
            a {
                font-size: 10px;
            }
        }
    }

    .sec4 {
        .direita {
            h3 {
                font-size: 10px;
            }
        }
    }

    .sec5 {
        .links {
            gap: 5px;

            a {
                font-size: 8px;
            }
        }

        .footer {
            p {
                text-align: center;
                font-size: 10px;
            }
        }
    }
}

@media screen and (max-width: 400px) {
    .sec5 {
        .links {
            flex-direction: column;
            gap: 5px;

            a {
                font-size: 8px;
            }
        }
    }
}