body{
    margin: 0px;
}

.m-header{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;

}

.logotipo {
    background-color: rgb(39, 52, 71);
    width: 30%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.menu {
    width: 70%;
    height: 100px;
    position: relative;
}

.m-up{
    height: 60%;
    background-image: linear-gradient(to bottom, white,  #297750);
}

.m-menu{
    height: 40%;
    width: 100%;
    display: inline-block;
    background-color: #297750;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: white;     
}
.m-menu ul li:hover{
    text-decoration: underline;
}      

.m-menu ul li:hover > ul{
    display: grid;
}

.m-menu ul ul{
   display: none;
}

.m-menu ul li{
        width: 25%;
        background-color: #297750;
        font-size: 15px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        display: block;
        float: left;
        text-align: center;
    }

    .m-serv{
        display: inline-block;
        justify-content:center;
        margin-top: 5px;
        padding: 0;

    }


/* pseudo elemento*/
.menu::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(39, 52, 71);
    transform: skewX(-20deg);
    transform-origin: top left ;
}

a{
    color: white;
}

a:link {
    text-decoration:none;
    }
    a:visited {
    text-decoration:none;
    }
    a:hover {
    text-decoration:none;
    }

.rodape{
    background-color: #297750;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family:Arial, Helvetica, sans-serif;
    width: 100%;
}


.image-top{
    margin-top: 100px;
    background-image: url('../images/central.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 56%;
    position:relative;


}

.image-somos{
    background-image: url('../images/somos.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 56%;
    position: relative;
}

.image-hidrall{
    background-image: url('../images/hidrall.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 56%;
    position: relative;
}

.image-motivo{
    background-image: url('../images/motivo.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 56%;
    position: relative;
}

.image-contato{
    margin-top: 100px;
    background-image: url('../images/contato.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;
    width: 100wh;
    padding-top: 13%;
    display:flex;
    justify-content: center;
    text-align: center;
    font-weight: 900;
}

.image-contato a{
    color:#026007;
    font-size: 25px;
}

.image-contato a:hover{
    text-decoration: underline;
}

.endereco a:hover{
    text-decoration: none;
}
.email{
    width: 33%;
}

.redes{
    width: 33%;
}

.endereco{
    width: 33%;
}


 .equipamento{
    margin-top: 100px;
    padding: 20px;
    color:#0b843e;
    font-family:Arial, Helvetica, sans-serif;
    display: flex;
    font-weight: bold;
    font-size: 25px;
 }

.eng-top{
    margin-top: 100px;
    width: 100vw;
    height: 110vh;
    background-image: url('../images/engenharia.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;

}


.ref-img1{
    margin-top: 100px;
    background-image: url('../images/reforma1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;
    width: 100wh;

}

.ref-img2{
    background-image: url('../images/reforma2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;

}

.ref-img3{
    background-image: url('../images/reforma3.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;

}

.ref-img4{
    background-image: url('../images/reforma4.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;

}

.ref-img5{
    background-image: url('../images/reforma5.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;

}

.image-prod{
    margin-top: 10px;
    margin-left: 8px;
    width: 31.1%;
    border: 10px solid #297750;

}

.info-prod{
    margin-top: 10px;
    margin-left: 12px;
    display: inline-block;
    width: 31.1%;
    height: 50px;
    padding: 8px ;
}

.botao{
    border: solid 1px #297750;
    border-radius: 20px;
    color: white;
    background-color: #297750;
    transition: background-color 0.5s ease, color 0.5s ease, transform 0.5s ease;
}
.botao:hover{
    background-color: #4ebe86;
    color: white;
    transform: scale(1.2)
}


.image-prod#prod1{
    background-image:url('../images/prod1.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod2{
    background-image:url('../images/prod2.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod3{
    background-image:url('../images/prod3.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod4{
    background-image:url('../images/prod4.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod5{
    background-image:url('../images/prod5.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
    
}

.image-prod#prod6{
    background-image:url('../images/prod6.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod7{
    background-image:url('../images/prod7.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod8{
    background-image:url('../images/prod8.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod9{
    background-image:url('../images/prod9.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod10{
    background-image:url('../images/prod10.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod11{
    background-image:url('../images/prod11.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod12{
    background-image:url('../images/prod12.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod13{
    background-image:url('../images/prod13.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#prod14{
    background-image:url('../images/prod14.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind1{
    background-image:url('../images/guind1.png');
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;

}

.image-prod#guind2{
    background-image:url('../images/guind2.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind3{
    background-image:url('../images/guind3.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind4{
    background-image:url('../images/guind4.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind5{
    background-image:url('../images/guind5.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind6{
    background-image:url('../images/guind6.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind7{
    background-image:url('../images/guind7.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind8{
    background-image:url('../images/guind8.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind9{
    background-image:url('../images/guind9.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind10{
    background-image:url('../images/guind10.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind11{
    background-image:url('../images/guind11.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#guind12{
    background-image:url('../images/guind12.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}


.image-prod#eng1{
    background-image:url('../images/eng1.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng2{
    background-image:url('../images/eng2.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng3{
    background-image:url('../images/eng3.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng4{
    background-image:url('../images/eng4.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng5{
    background-image:url('../images/eng5.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng6{
    background-image:url('../images/eng6.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng7{
    background-image:url('../images/eng7.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng8{
    background-image:url('../images/eng8.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng9{
    background-image:url('../images/eng9.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng10{
    background-image:url('../images/eng10.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng11{
    background-image:url('../images/eng11.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng12{
    background-image:url('../images/eng12.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}

.image-prod#eng13{
    background-image:url('../images/eng13.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 600px;
}