@import url('https://fonts.googleapis.com/css2?family=Jura:wght@700&family=Kanit:wght@300;400&family=Poppins:ital,wght@0,400;0,500;0,700;1,600&family=Ubuntu:wght@400;500;700&display=swap');

*{
    margin:  0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

:root{
    --main-color: #0F3057;
    --first-color: #08132f;
    --second-color: #E7E7DE;
    --main-font:'Jura', sans-serif;
}

body{
    background-color: var(--main-color);
    color: var(--site-color);
}



.max-width{
    max-width: 1300px;
    padding:  0 10px;
    margin: auto;
}


/*INICIO MENU ------------------------------------------------------------------------------------------------------------------------------------- */

.navbar .logo img{
    max-width: 200px;
}

.navbar{
    position: flex;
    width: 100%;
    z-index: 999;
    padding: 20px 0;
    font-family: 'Jura', sans-serif;
    background-color: var(--main-color);
    background: none;
    margin-top: 15px;
}

.navbar .max-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .menu li{
    list-style: none;
    display: inline-block;
    font-family: var(--main-font);
    padding: 0px 30px;
}

.navbar .menu li a{
    display: block;
    color:#fff;
    font-size: 18px;
    font-weight: 400;
    margin-left: 25px;
}

.navbar .menu li a:hover{
    color: var(--second-color);
    font-size: 18.4;
}

.menu-btn{
    color:#fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}



section{
    padding: 50px 0;
} 



/*----------------------------------------------------------------------------INICIO TOPO ---------------------------------*/
.top{
    color:#fff;
    display: flex;
    /*background: url("../images/globo.png") no-repeat;*/
    background: linear-gradient(to bottom, var(--main-color) 20%, rgba(255,255,255,0)), url("../images/globo.png") no-repeat ;
    height: 800px;
    min-height: 500px;
    margin-left: -20px;
    margin-top: -150px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 300;
    font-size: 36.1017px;
    line-height: 54px;
    text-align: center;
    letter-spacing: 0.2em;
    text-shadow: 0px 5.29676px 5.29676px rgba(0, 0, 0, 0.25);
}

.top-sobre{
    color:#fff;
    display: flex;
    align-items: center;
    /*background: url("../images/globo.png") no-repeat;*/
    background: linear-gradient(to bottom, var(--main-color) 20%, rgba(255,255,255,0)), url("../images/predio.png") no-repeat ;
    height: 350px;
    margin-left: -20px;
    margin-top: -150px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Kanit';
    font-style: bold;
    font-weight: 300;
    font-size: 36.1017px;
    line-height: 54px;
    letter-spacing: 0.2em;
    text-shadow: 0px 5.29676px 5.29676px rgba(0, 0, 0, 0.25);
}

.top-orcamento{
    color:#fff;
    display: flex;
    align-items: center;
    /*background: url("../images/globo.png") no-repeat;*/
    background: linear-gradient(to bottom, var(--main-color) 10%, rgba(255,255,255,0)), url("../images/mao.png") no-repeat ;
    height: 350px;
    margin-left: -20px;
    margin-top: -150px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Kanit';
    font-style: bold;
    font-weight: 300;
    font-size: 36.1017px;
    line-height: 54px;
    letter-spacing: 0.2em;
    text-shadow: 0px 5.29676px 5.29676px rgba(0, 0, 0, 0.25);
}


.top-content{
    margin-top: 200px;
}

.top-sobre .top-content{
    margin-top: 50px;
}

.top-orcamento .top-content{
    margin-top: 50px;
}
.top .max-width{
    width: 100%;
    display: center;
    text-align: center;  
}

.top .top-content .text-1{
    font-size: 35px;
}


.top .top-content a{
    display: inline-block;
    background: none;
    color: var(--site-color);
    font-size: 20px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 300;
    border-radius: 6px;   
    transition: all 0.4s ease;
}

.top .top-content a .mouse{
    display: inline-block;
    background: none;
    color: var(--site-color);
    font-size: 20px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 300;
    border-radius: 6px;   
    transition: all 0.4s ease;
    align-items: baseline;
}

.top-content{
    margin-top: 200px;
}



.top-sobre .max-width{
    width: 100%;
    display: center;
    text-align: center;  
}

.top-sobre .top-content .text-1{
    font-size: 35px;
}

.top-orcamento .max-width{
    width: 100%;
    display: center;
    text-align: center;  
}

.top-orcamento .top-content .text-1{
    font-size: 35px;
}

.top-sobre .top-content a{
    display: inline-block;
    background: none;
    color: var(--site-color);
    font-size: 20px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 300;
    border-radius: 6px;   
    transition: all 0.4s ease;
}

.top-sobre .top-content a .mouse{
    display: inline-block;
    background: none;
    color: var(--site-color);
    font-size: 20px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 300;
    border-radius: 6px;   
    transition: all 0.4s ease;
    align-items: baseline;
}

/* ------------------------------------------------------------INICIO SERVIÇOS ---------------------------------------------*/

.servicos{
    color: var(--main-color);
    background-color: var(--second-color);
    font-family: var(--main-font);
    margin: 0px 2px;
    height: 500px;
}

.servicos .title{
    text-align: center;
    margin: 10px 0;
    font-weight: 400;
    font-size: 30px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.servicos p{
    text-align: center;
    margin-bottom: 70px;
    font-size: 20px;
}

.pai-servicos img{
    max-width: 400px;
}

.servicos-sobre{
    color: var(--main-color);
    background-color: var(--second-color);
    font-family: var(--main-font);
    margin: 0px 2px;
    height: 780px;
}

.servicos-sobre .title{
    text-align: center;
    margin: 10px 0;
    font-weight: 400;
    font-size: 40px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.servicos-sobre .solicite{
    text-align: center;
    margin: 450px;
    font-weight: 400;
    font-size: 25px;
    margin-bottom: 50px;
    margin-top: 50px;
    background-color: var(--main-color);
    color: var(--second-color);
}

.servicos-sobre p{
    text-align: center;
    margin-bottom: 70px;
    font-size: 20px;
}

.pai-servicos-sobre img{
    max-width: 400px;
}

.pai-servicos{
    flex-direction: row;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pai-servicos-sobre{
    flex-direction: row;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

/*----------------------------------------SOBRE / HISTÓRIA----------------------------------------*/

.historia p{
    text-align: left;
    margin-bottom: 70px;
    font-size: 20px;
}


/* INICIO SOLUÇÕES -----------------------------------------------------------------------------------------------------------------------*/

.solucoes{
    color: var(--second-color);
    background-color: var(--main-color);
    font-family: var(--main-font);
    margin: 0px 2px;
    
}

.missao{
    color: var(--second-color);
    background-color: var(--main-color);
    font-family: var(--main-font);
    margin: 0px 2px;
    
}

.solucoes .title{
    text-align: center;
    margin: 10px 0;
    font-weight: 400;
    font-size: 35px;
    margin-bottom: 50px;
    margin-top: 150px;
}

.missao .title{
    text-align: center;
    margin: 10px 0;
    font-weight: 400;
    font-size: 35px;
    margin-bottom: 50px;
    margin-top: 150px;
}

.solucoes .serv-content .serv1{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;     
}

.missao .serv-content .serv1{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;     
}

.solucoes .serv-content .serv1 .card:hover{
    background: var(--second-color);
    color: var(--main-color);
}

.missao .serv-content .serv1 .card:hover{
    background:#6a7081;

}

.solucoes .serv-content .serv1 .card{
    width: calc(25% - 10px);
    text-align: center;
    padding: 50px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.missao .serv-content .serv1 .card{
    width: calc(25% - 10px);
    text-align: center;
    padding: 50px;
    border-radius: 6px;
    transition: all 0.6s ease;
}


.solucoes .serv-content .serv1 .card i{
    font-size: 75px;
    margin-top: 20px;
}

.solucoes .serv-content .serv1 .card .box{
    transition: all 0.3s ease;
}

.solucoes .serv-content .serv1 .card:hover .box{
    transform: scale(1.05);
}


.missao .serv-content .serv1 .card i{
    font-size: 75px;
    margin-top: 20px;
}

.missao .serv-content .serv1 .card .box{
    transition: all 0.3s ease;
}

.missao .serv-content .serv1 .card:hover .box{
    transform: scale(1.05);
}


/* ------------------------------------------------------------------------------INICIO CONTATO --------------------------------*/
.pai-form{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.pai-form-orcamento{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

.formulario-contato{
    background-color: var(--second-color);
    color: black;

}

    .formulario-contato .texto-formulario{
        font-family: 'jura', 'sans-serif';
        width: 50%;
        margin-left: 10px;
        margin-right: 30px;
    }

.formulario-contato-orcamento .texto-formulario{
    font-family: 'jura', 'sans-serif';
    margin-left: 10px;
}

.formulario-contato-orcamento{
    background-color: var(--second-color);
    color: var(--main-color);

}

.formulario{
    display: flex;  
    justify-content: space-between;
    flex-wrap: wrap;
    width: 50%;
}

.formulario-contato .formulario .txt-padrao{
    font-family: 'jura', 'sans-serif';
    border: solid 1,5px;
    height: 30px;
    font-size: 12px;
    width: 49%;
    padding: 2px;
    margin: 5px 0;
}

.formulario-contato .formulario .txt-mensagem{
    font-family: 'jura', 'sans-serif';
    height: 80px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 100%;
    padding: 2px;
    margin-top: 5px;
}

.formulario-contato .formulario .botao-enviar{
    font-family: 'jura', 'sans-serif';
    color: var(--second-color);
    background: var(--main-color);
    border: solid 1,5px; 
    border: 1px solid #E7E7DE;
    padding: 2px;
    width: 28%;
    margin: 10px 1px;
}


/*==================================**************************************==FORMULÁRIO ORÇAMENTO==========================*/

.formulario-contato-orcamento{
    display: flex;
    align-items: center;   
    justify-content: space-around;
}

.formulario-orcamento{
    display: flex;
    align-items: center;  
    align-content: center; 
    justify-content: space-around;
}

.formulario-contato-orcamento .formulario-orcamento .txt-orcamento{
    font-family: 'jura', 'sans-serif';
    border: solid 1,5px;
    height: 35px;
    font-size: 12px;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .txt-precisa{
    font-family: 'jura', 'sans-serif';
    height: 35px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 624px;
    padding: 10px;
    margin: 10px;

}

.formulario-contato-orcamento .formulario-orcamento .txt-descricao{
    font-family: 'jura', 'sans-serif';
    height: 80px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 624px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .botao-enviar-orcamento{
    font-family: 'jura', 'sans-serif';
    color: var(--second-color);
    background: var(--main-color);
    padding: 5px;
    border: solid 1,5px; 
    border: 1px solid #E7E7DE;
    float: right;
    margin-right: 8px;
}


/*=============================================================================================================================*/


/* --------------------------------------------------------------------------------INICIO RODAPÉ ------------------------  */

footer{
    background: #fff;
    padding: 25PX;
    color: var(--main-color);
    text-align: center;
    font-family: var(--main-font);
    font-size: 18px;
    border-top: 3px solid var(--main-color);
}


footer img{
max-width: 200px;
}

footer .menu-rodape h3{    
    list-style: none;
    font-family: var(--main-font);
    text-align: left;
    font-style: bold;
    font-weight: 900;
    font-size: 23px;
}


footer .menu-rodape li{
    
    list-style: none;
    font-family: var(--main-font);
    text-align: left;
    margin-bottom: 1px;
}

footer .menu-rodape li a{
    color: var(--main-color);
    font-size: 16px;
}

footer .menu-rodape li a:hover{
    color: var(--second-color);
    font-size: 18.4;
    background-color: var(--main-color);
}

footer .localizacao{
    text-align: left;
}

footer .contato-rodape{
    text-align: left;
}

.pai-rodape{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.texto-rodape{
    margin-top: 50px;
    text-align: left;    
}




/* ----------------------------------------------------------------------------- RESPONSIVIDADE DO SITE----------------------------------------------------------------------*/

@media (max-width: 947px) {
    .menu-btn{
        display: block;
        z-index: 999;
        margin-right: 20px;
    }
    #menu-icon.active::before{
        content: "\f00d";
    }

    .top .top-content .text-1{
    font-size: 25px;
    }

    .top .top-content a{
        font-size: 15px;
    }

    footer img{
        max-width: 150px;
    }    



    .servicos .historia p{
        font-size: 15px;
        text-align: center;
    }

    .navbar .menu {
        background-color: var(--main-color);
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
        font-family: var(--main-font);
    }
    #menu-site.active{
        left: 0;
    }
    .navbar .menu li{
        display: block;
    }

    .missao .serv-content .serv1 .card{
        width: 100%;
    }
    
    .navbar .menu li a {
        display: inline-block;
        margin: 13px 0;
        font-size: 25px;
    }

    .solucoes .serv-content .serv1 .card{
        width: calc(100% -10px);
        margin-bottom: 15px;
    }

    .missao .serv-content .serv1 .card{
        width: calc(100% -10px);
        margin-bottom: 15px;
    }
    .top-content{
        margin-top: 200px;    
        margin-bottom: 200px; 
        padding: 50px;
    }
}

@media (max-width: 800px){
    .pai-rodape{
    flex-direction: column;
    align-items: left;
    }

    .pai-form{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: left;
        align-content: left;
    }

    .pai-form .texto-formulario{
        margin: 0;
        margin-bottom: 10px;
        font-size: 15px;
    }


   .formulario-contato-orcamento{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
   }

    .formulario{
        display: flex;
        align-items: center;   
    }


    .formulario-contato .formulario .txt-padrao{
        font-family: 'jura', 'sans-serif';
        border: solid 1,5px;
        height: 30px;
        font-size: 12px;
        width: 100%;
        padding: 2px;
        margin: 3px;
    }
    
    .formulario-contato .formulario .txt-mensagem{
        font-family: 'jura', 'sans-serif';
        height: 80px;
        border: solid 1,5px; 
        font-size: 12px;
        width: 100%;
        padding: 2px;
        margin: 3px;
    }
    
    .formulario-contato .formulario .botao-enviar{
        font-family: 'jura', 'sans-serif';
        color: var(--second-color);
        background: var(--main-color);
        border: solid 1,5px; 
        border: 1px solid #E7E7DE;
        padding: 2px;
        width: 100%;
        margin: 10px 1px;
    }
        .pai-servicos-sobre img{
            max-width: 300px;
        }

        .formulario-contato-orcamento .formulario-orcamento .txt-orcamento{
    font-family: 'jura', 'sans-serif';
    border: solid 1,5px;
    height: 35px;
    font-size: 12px;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .txt-email{
    font-family: 'jura', 'sans-serif';
    border: solid 1,5px;
    height: 30px;
    font-size: 12px;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .txt-telefone{
    font-family: 'jura', 'sans-serif';
    border: solid 1,5px;
    height: 30px;
    font-size: 12px;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .txt-cidade{
    font-family: 'jura', 'sans-serif';
    border: solid 1,5px;
    height: 30px;
    font-size: 12px;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .txt-empresa{
    font-family: 'jura', 'sans-serif';
    border: solid 1,5px;
    height: 30px;
    font-size: 12px;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .txt-site{
    font-family: 'jura', 'sans-serif';
    height: 30px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .txt-como{
    font-family: 'jura', 'sans-serif';
    height: 30px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .txt-estimativa{
    font-family: 'jura', 'sans-serif';
    height: 30px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .txt-precisa{
    font-family: 'jura', 'sans-serif';
    height: 30px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 624px;
    padding: 10px;
    margin: 10px;

}

.formulario-contato-orcamento .formulario-orcamento .txt-descricao{
    font-family: 'jura', 'sans-serif';
    height: 80px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 624px;
    padding: 10px;
    margin: 10px;
}

.formulario-contato-orcamento .formulario-orcamento .botao-enviar-orcamento{
    font-family: 'jura', 'sans-serif';
    color: var(--second-color);
    background: var(--main-color);
    padding: 5px;
    border: solid 1,5px; 
    border: 1px solid #E7E7DE;
    float: right;
    margin-right: 8px;
}

/*==================================**************************************==FORMULÁRIO ORÇAMENTO==========================*/

.formulario-contato-orcamento{
    display: flex;
    align-items: center;   
    justify-content: space-around;
    flex-direction: column;
}

.formulario-contato-orcamento .formulario-orcamento .txt-orcamento{
    font-family: 'jura', 'sans-serif';
    border: solid 1,5px;
    height: 35px;
    font-size: 12px;
    width: 100%;
    padding: 10px;
    margin: 5px;
    color: black;
}

.formulario-contato-orcamento .formulario-orcamento .txt-precisa{
    font-family: 'jura', 'sans-serif';
    height: 30px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 100%;
    padding: 10px;
    margin: 5px;

}

.formulario-contato-orcamento .formulario-orcamento .txt-descricao{
    font-family: 'jura', 'sans-serif';
    height: 80px;
    border: solid 1,5px; 
    font-size: 12px;
    width: 100%;
    padding: 10px;
    margin: 5px;
}

.formulario-contato-orcamento .formulario-orcamento .botao-enviar-orcamento{
    font-family: 'jura', 'sans-serif';
    color: var(--second-color);
    background: var(--main-color);
    padding: 5px;
    border: solid 1,5px; 
    border: 1px solid #E7E7DE;
    float: left;
    margin: 10px;
}

footer > div > div{
    margin-bottom: 30px;
}


/*=============================================================================================================================*/
}



@media (max-width: 690px){
    .solucoes .serv-content .serv1 .card{
        width: 100%;
    }

    .navbar .logo img{
        max-width: 150px;
    }
    .missao .serv-content .serv1 .card{
        width: 100%;
    }

    .top-content{
        margin-top: 50px;    
        margin-bottom: 50px;    
    }


  section{
        padding: 20px 0;        
    }
}

@media (max-width: 370px){
    .top-content{
        margin-top: 100px;
    }
}


@media (max-width: 1300px) {
    .servicos{
        color: var(--main-color);
        background-color: var(--second-color);
        font-family: var(--main-font);
        margin: 0px 2px;
        height:auto;
    }

    .servicos-sobre .solicite{
        text-align: center;
        margin: 50px;
        font-weight: 400;
        font-size: 25px;
        margin-bottom: 50px;
        margin-top: 50px;
        background-color: var(--main-color);
        color: var(--second-color);
    }

    .servicos-sobre{
        color: var(--main-color);
        background-color: var(--second-color);
        font-family: var(--main-font);
        margin: 0px 2px;
        height:auto;
    }
    
    .servicos .title{
        text-align: center;
        margin: 10px 0;
        font-weight: 400;
        font-size: 30px;
        margin-bottom: 50px;
        margin-top: 50px;
    }
    
    .servicos p{
        text-align: center;
        margin-bottom: 70px;
        font-size: 20px;
    }
    
    .pai-servicos img{
        width: 100%;
        margin-bottom: 10px;
    }
    
    .pai-servicos{
        flex-direction: column;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .pai-servicos-sobre{
        flex-direction: column;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
    }
}