@media (max-width: 900px) {

            .conteudo h1 {
                font-size: 43px;
            }

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

            .slide img {
                height: 400px;
            }

        }


        @media (max-width: 650px) {

            /* 
       HEADER
     */

            header {
                position: relative;
                width: 100%;
                padding: 12px 15px;
                flex-direction: column;
                gap: 10px;
            }

            .logo-area {
                gap: 8px;
                width: 100%;
                justify-content: center;
            }

            .logo {
                width: 48px;
                height: 48px;
            }

            .logo-area h2 {
                font-size: 17px;
                line-height: 1.2;
                text-align: left;
            }

            nav {
                width: 100%;
                gap: 18px;
                justify-content: center;
            }

            nav a {
                font-size: 13px;
            }


            /* 
       HERO
     */

            .hero {
                min-height: auto;
                height: auto;
                display: flex;
                flex-direction: column;
            }

            .banner {
                position: relative;
                width: 100%;
                height: 180px;
                object-fit: cover;
                object-position: center;
                transform: none;
                margin: 0;
            }

            .overlay {
                display: none;
            }

            .conteudo {
                position: relative;
                width: 100%;
                max-width: none;
                padding: 35px 20px 40px;

                background:
                    linear-gradient(135deg,
                        #111 0%,
                        #242424 60%,
                        #7a3d15 140%);
            }

            .conteudo h1 {
                font-size: clamp(25px, 7vw, 30px);
                line-height: 1.18;
                margin-bottom: 18px;
            }

            .conteudo p {
                font-size: 15px;
                line-height: 1.5;
                margin-bottom: 25px;
            }

            .btn {
                width: 100%;
                padding: 15px 20px;
                font-size: 15px;
            }


            /* 
       INFORMAÇÕES
     */

            .info {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                padding: 35px 12px;
            }

            .info div {
                min-width: 0;
            }

            .info h3 {
                font-size: 20px;
                line-height: 1.2;
            }

            .info p {
                font-size: 12px;
                line-height: 1.4;
                margin-top: 7px;
            }


            /* 
       SEÇÕES
     */

            section:not(.hero) {
                padding: 55px 5%;
            }

            h2 {
                font-size: 28px;
                line-height: 1.2;
            }

            .subtitulo {
                font-size: 14px;
                line-height: 1.5;
                margin-bottom: 30px;
            }


            /* 
       SERVIÇOS
     */

            .cards {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .card {
                padding: 25px 20px;
            }


            /* 
       PROJETOS
     */

            .slide img {
                height: 280px;
            }

            .legenda {
                padding: 18px;
                font-size: 14px;
                line-height: 1.4;
            }

            .seta {
                width: 38px;
                height: 38px;
                font-size: 21px;
            }

            .esquerda {
                left: 8px;
            }

            .direita {
                right: 8px;
            }


            /* 
       BENEFÍCIOS
     */

            .beneficios {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .beneficio {
                padding: 18px 20px;
            }


            /* 
       CLIENTES
     */

            .clientes {
                padding: 45px 0;
            }

            .clientes h2 {
                font-size: 25px;
                padding: 0 20px;
            }

            .clientes>p {
                font-size: 14px;
                padding: 0 25px;
                line-height: 1.5;
            }

            .logos {
                gap: 35px;
                animation-duration: 20s;
            }

            .logos img {
                width: 120px;
                height: 70px;
            }


            /* 
       CONTATO
     */

            .contato {
                padding: 35px 20px;
                border-radius: 12px;
            }

            .contato h2 {
                font-size: 27px;
            }

            .contato p {
                font-size: 14px;
                line-height: 1.5;
            }


            /* 
       WHATSAPP
     */

            .whats {
                width: 55px;
                height: 55px;
                right: 15px;
                bottom: 15px;
                font-size: 24px;
            }


            /* 
       FOOTER
     */

            footer {
                padding: 30px 15px;
            }

            footer p {
                font-size: 13px;
                line-height: 1.5;
            }
        }