@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');


/*  TABLETS (horizontal) - NOTEBOOKS */
@media screen and (min-width: 1024px) and (max-width: 1920px) {
    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins";
        text-decoration: none;
        list-style: none;
        scroll-behavior: smooth;
        transition: all .1s ease;
    }    
    body{
        background: rgb(0,0,0);
        background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 100%);
        margin: auto;
        padding: 0;    
    }
    :root{
        --cinza: #4A4A4A;
        --laranja: #FFC400;
        --verde: #29A71A;
        --preto: #000000;
        --branco: #FFFFFF;  
        --fontam6: clamp(1.6em, 1.5em + 3vw, 6rem);
        --fontam5: clamp(1.5em, 1.1em + 2.3vw, 5rem);
        --fontam4: clamp(1.3em, 1em + 2vw, 4rem);
        --fontam3: clamp(1.1em, 1em + 1.5vw, 2rem);
        --fontam2: clamp(1.05em, 1em + 1vw, 1.5rem);
        --fontam1: clamp(1em, 1em + 1vw, 1rem);
    }    
    /*  Fim do Body  */
    /*  *************************************************** */
    /*  Inicio do Main / Header  */
    header{
        background: rgba(17, 17, 17, 0);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        width: 100%;
        height: 80px;
        margin: auto;
        padding: 0 10%;
        /*  FIXANDO O HEADER  */
        z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
    }
    header .logo {background: rgba(255, 0, 0, 0);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 30%;
        height: 100%;
    }
    header .logo .logo-img {background: rgba(255, 153, 1, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 50%;
    }
    header .logo .logo-img a img{
        width: 60%;
    }    
    header .logo-txt{
        display: none;
    }
    header nav .btn{
        display: none;
    }
    header .btn {
        display: none;
    }
    /*header nav .menu-diferenciais {
        display: none;
    }*/
    header nav {background: rgba(0, 0, 255, 0);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 90%;
        padding: 0px;
    }
    header nav a {        
        margin: 1px;
        padding: 0 10px;
        font-size: var(--fontam1);
        color: var(--branco);        
    }
    header nav a:hover{
        color: var(--laranja);
        border-bottom: #FFD401 solid 2px;
        transition: all .45s ease;
    }
    header .button{
        background: var(--verde);
        padding: 7px 20px;
        border: 2px solid var(--laranja);
        border-radius: 10px;
        font-size: var(--fontam1);
        font-weight: 500;
        color: var(--branco);
    }
    /*EFEITO STICKY - Trasição  */
    header.sticky{
        height: 80px;
        background: var(--preto);
        box-shadow: 0px 5px 5px 0px #00000093;
        border-bottom: var(--laranja) solid 5px;
        transition: all .2s ease;
    }
    /*  Fim do Header/Nav  */
    /*  *************************************************** */
    /*  Inicio do Main  */
    /*  Inicio do Section - Home  */
    main .home{background: rgba(255, 0, 0, 0);
        /*background: url(../img/bg_1.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;*/
        display: flex;    
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        margin: auto;
        padding: 80px 0;
    }
    main .home .container {background: #ffd50100;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 600px;
        margin: 0 10%;
    }
    main .home .container article{background: rgba(0, 128, 0, 0);
        width: 65%;
        z-index: 100;
    }
    main .home .container article h1{
        font-size: var(--fontam6);
        line-height: 1;
        font-weight: 300;
        color: var(--branco);
    }
    main .home .container article h1 span{
        font-size: var(--fontam5);
        line-height: 1;
        color: var(--laranja);
    }
    main .home .container article h2{
        font-size: var(--fontam3);
        font-weight: 200;
        color: var(--branco);
    }
    main .home .container article h3{
        font-size: var(--fontam2);
        font-weight: 200;
        color: var(--branco);
    }
    main .home .container article .botoes{background-color: rgba(0, 0, 0, 0);
        margin: 0px 0;
        padding: 00px 0;
    }
    main .home .container article .botoes .btn-wa {background-color: rgba(144, 144, 144, 0);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 80px;
    }
    main .home .container article .botoes .btn-wa a{
        background: var(--verde);
        padding: 10px 80px;
        border: 2px solid var(--branco);
        border-radius: 5px;
        font-size: var(--fontam2);
        font-weight: 500;
        color: var(--branco);
    }
    main .home .container article .botoes .btn-wa a:hover{
        background: #10a100;
    }
    main .home .container article .botoes .btn-phone {background-color: rgba(144, 144, 144, 0);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 80px;
    }
    main .home .container article .botoes .btn-phone a{
        background: var(--laranja);
        padding: 10px 50px;
        border: 2px solid var(--branco);
        border-radius: 5px;
        font-size: var(--fontam2);
        font-weight: 500;
        color: var(--preto);
    }
    main .home .container article .botoes .btn-phone a:hover{
        background: var(--cinza);
        color: var(--branco);
    }
    main .home .container aside{background: #10a10000;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 500px;
    }
    main .home .container aside img{
        width: 130%;
    }
    /*  Fim do Home  */
    /*  *************************************************** */
    /*  Inicio do Home2  */
    main .home2 {background: #ffc40000;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    main .home2 .box{background: rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 700px;
        height: 400px;
        padding: 30px;
        text-align: center;
        border-radius: 10px;
        box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.516);
    }
    main .home2 h1 {background: rgba(255, 0, 0, 0);
        width: 90%;
        font-size: 3rem;
        text-align: center;
    }
    main .home2 h1 span {
        color: var(--laranja);
    }
    main .home2 p {background: #10a10000;
        padding: 0px;
        font-size: 1.2rem;
        text-align: center;
        margin-bottom: 20px;
    }    
    main .home2 a{
        padding: 1px 30px;
        color: rgb(0, 0, 0);
        border-radius: 5px;border: #000000 solid 2px;
        background: rgba(0, 128, 0, 0);
        cursor: pointer;
    }
    main .home2 a:hover{
        background: #000000;
        color: white;
    }
    /*  Fim do Home2  */
    /*  *************************************************** */
    /*  Inicio do Soluções  */
    main .solucoes {background: #28a71a00;
        height: 800px;
        padding: 80px 10% 0 10%;
        text-align: center;
    }
    main .solucoes h1 {
        font-size: var(--fontam4);        
    }
    main .solucoes h1 span {
        color: var(--laranja);
    }
    main .solucoes .container {background: #ffffff00;
        width: 100%;
        height: 100vh;
        margin: auto;
    }
    main .solucoes .container .row-one {background: #fb000000;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: row;
        width:100%;
        height: 100%;
        margin-top: 10px;
        margin: auto;
        padding: 0px;
    }
    main .solucoes .container .row-one .box {background: rgba(0, 0, 0, 0.441);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        max-width: 400px;
        width: 33%;
        height: 600px;
        margin: 10px;
        padding: 0px;
        border-radius: 10px;
        border: var(--laranja) solid 2px;
        box-shadow: #000000 5px 5px 10px;
    }
    main .solucoes .container .row-one .box:hover {background: rgb(0, 0, 0);
        transform: translateY(-8px);
    }
    main .solucoes .container .row-one .box .txt {background: #ffffff00;
        width: 95%;
        height: 80%;
        margin: 10px 0 0 0;
        padding: 10px;
    }
    main .solucoes .container .row-one .box i {background: rgba(255, 255, 0, 0);
        margin: 20px;
        padding: 30px;
        font-size: 90px;
        color: var(--branco);

    }
    main .solucoes .container .row-one .box h2 {background: rgba(0, 255, 89, 0);
        margin: 0 20px;
        padding: 0px;
        font-size: 30px;
        line-height: 1;
        color: var(--laranja);
    }
    main .solucoes .container .row-one .box p {background: rgba(8, 0, 255, 0);
        margin: 10px 0 0 0;
        padding: 0px;
        font-size: 19px;
        line-height: 1;
        color: var(--branco);
    }
    main .solucoes .container .row-one .box .btn {background: rgba(255, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 95%;
        height: 100px;
        margin: 10px;

    }
    main .solucoes .container .row-one .box .btn a {background: rgb(255, 187, 0);
        padding: 10px 50px;
        font-size: 21px;
        line-height: 1;
        color: var(--branco);
        border-radius: 10px;
        border: #ffffff solid 1px;        
    }
    main .solucoes .container .row-one .box .btn a:hover {background: rgb(97, 97, 97);
        color: var(--branco);
        border-radius: 10px;
        border: #ffcc00 solid 2px;
    }    
    /*  Fim da Sessão Soluções  */
    /*  *************************************************** */
    /*  Inicio da Sessão Diferenciais  */
    main .diferenciais {background: #a1000000;
        height: 1300px;
        padding: 80px 10% 0 10%;
        text-align: center;
    }
    main .diferenciais .titulo {background:#77777700;
        margin: 0 10px;
        padding: 20px 0;
    }
    main .diferenciais .container {background: rgba(102, 51, 153, 0);
        max-width: 1500px;
        height: 90%;
        margin: auto;
    }
    main .diferenciais .titulo h1{
        font-size: var(--fontam4);
    }
    main .diferenciais .titulo h1 span{
        color: var(--laranja);
    }
    main .diferenciais .titulo p{
        font-size: var(--fontam1);
    }
    main .diferenciais .container .box {background: rgba(0, 0, 0, 0.503);
        width: 30%;
        height: 95%;
        max-width: 400px;
        margin: 5px;
        padding: 20px;
        border-radius: 10px;
        border: var(--laranja) solid 2px;
        transition: all .5s ease-in-out, height 0ms;
    }
    main .diferenciais .container .box:hover {background: #000000;
        transform: translateY(-8px);
    }
    main .diferenciais .container .txt { background: rgba(0, 0, 255, 0);
        height: 80%;
    }
    main .diferenciais .container .txt i {
        margin-top: 30px;
        font-size: var(--fontam6);
        color: var(--branco);
    }
    main .diferenciais .container .txt h2 {
        margin: 20px 0;
        font-size: var(--fontam2);
        color: var(--laranja);
    }
    main .diferenciais .container .txt p {
        font-size: var(--fontam1);
        color: var(--branco);
    }    
    main .diferenciais .container .btn{background: rgba(255, 255, 255, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 0px 0;
        height: 20%;
    }
    main .diferenciais .container .btn a{background: var(--laranja);
        padding: 10px 50px;
        font-size: 21px;
        color: var(--branco);
        border-radius: 5px;
        border:var(--branco) solid 1px;        
    }
    main .diferenciais .container .btn a:hover{
        background: var(--cinza);
        border: var(--laranja) solid 3px;
    }
    main .diferenciais .container .row-one {background: rgba(255, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;   
        height: 500px;     
    }
    main .diferenciais .container .row-two {background: rgba(0, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;   
        height: 500px;     
    }
    /*  Fim da Sessão Diferenciais  */
    /*  *************************************************** */
    /*  Inicio da Sessão Trabalhos  */
    main .trabalhos {background: #28a71a00;
        height: 100vh;
        padding: 80px 0 0 0;
        text-align: center;
    }
    main .trabalhos-titulo{ background: #ff000000;
        width: 100%;
        margin: auto;
        padding: 20px;
        color: var(--cinza);
    }
    main .trabalhos-titulo h1{
        font-size: var(--fontam4);
        color: var(--cinza);
    }
    main .trabalhos-titulo span{
        color: var(--laranja);
    }
    main .trabalhos .container-galeria{ background: rgba(34, 255, 0, 0);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1vw;
        padding: 0 10%;
        width: 100%;
        height: 500px;
        margin: auto;
    }
    main .trabalhos .container-galeria .img-galeria{
        width: auto;
        max-width: 300px;
        height: 350px;
        border: 3px solid var(--laranja );
        box-shadow: 5px 5px 5px #00000078;
        border-radius: 10px;
        flex-grow: 2;
        transition: transform .2s linear;
    }
    main .trabalhos .container-galeria .img-galeria:hover{
        transform: scale(1.1);
    }
    main .trabalhos .container-galeria .img-galeria img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }    
    /*  Fim da Sessão Trabalhos  */
    /*  *************************************************** */
    /*  Inicio da Sessão Sobre  */
    main .sobre {background: #ffffff00;
        height: 70vh;
        padding: 80px 10% 0 10%;
        text-align: center;
    }
    main .sobre .container{background: rgba(255, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row-reverse;
        height: 100%;
        max-width: 1340px;
        margin: auto;
    }
    main .sobre .container article{background: rgba(0, 255, 4, 0);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
        width: 50%;
        height: 90%;
        text-align: right;
        padding: 20px;
    }
    main .sobre .container article h1{
        font-size: var(--fontam4);
        text-align: left;
        line-height: 1;
        color: var(--preto); 
        text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.357); 
        margin-bottom: 20px ;  
    }
    main .sobre .container article h2{
        font-size: var(--fontam3);
        line-height: 1;
        color: var(--laranja);
        text-shadow: 2px 5px 3px rgba(0, 0, 0, 0.207);   
    }
    main .sobre .container article p{
        font-size: var(--fontam2);
        line-height: 1.5;
        width: 100%;
        margin: 0px 0;
    }
    main .sobre .container article a{
        background: green;
        border-radius: 7px;
        font-size: var(--fontam1);
        color: rgb(255, 255, 255);
        padding: 10px 70px;
        margin-top: 10px;
    }
    main .sobre .container aside{background: #10a10000;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 90%;
    }
    main .sobre .container aside img{
        width: 110%;
    }
    /*  Fim da Sessão Sobre  */
    /*  *************************************************** */
    /*  Inicio da Sessão Contatos  */
    main .contatos{  background:#10a10000;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 80px 0 0 0;
        margin: auto;
    }
    main .contatos .contatos-txt{background: rgba(255, 0, 0, 0);
        width: 70%;
        height: 40%;
        max-width: 1340px;
        margin: auto;
        padding: 20px;
        text-align: center;
    }
    main .contatos .contatos-txt h1{
        font-size: var(--fontam4);
        color: var(--branco);
    }
    main .contatos .contatos-txt span{
        color: var(--laranja);
    }
    main .contatos .contatos-txt p{
        font-size: var(--fontam2);
        line-height: 1;
        color: var(--branco);
    }
    main .contatos .container{background: rgba(102, 51, 153, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 70%;
        height: 60%;
        max-width: 1340px;
        margin: auto;
        padding: 20px;
        text-align: center;
        color: var(--amarelo);
    }
    main .contatos .container h1{
        font-size: var(--fontam4);
        color: var(--branco);
    }
    main .contatos .container p{
        font-size: var(--fontam2);
        line-height: 1.3;
        color: var(--branco);
    }
    main .contatos .container .btn-wa{
        margin-top: 50px;
    }
    main .contatos .btn-wa a{ 
        padding: 10px 70px;
        background: var(--verde);
        font-size: var(--fontam3);
        color: var(--branco);
        border: 2px solid var(--branco);
        border-radius: 7px;
    }
    main .contatos .btn-wa a:hover{        
        background: #33d521;       
    }
    /*  Fim da Sessão Contatos  */
    /*  *************************************************** */
    /*  Inicio do Footer  */
    footer {background: #28a71a00;
        height: 100vh;
        padding: 80px 0 0 0;
        text-align: center;
    }
    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: #00000000;
        width: 100%;
        height: 350px;
        font-weight: 200;
        color: aliceblue;
        text-align: center;
        padding: 30px 100px;
    }
    footer img{background: rgba(255, 255, 0, 0);
        width: 300px;
        margin: 20px;
    }
    footer .menu-footer a{
        font-size: 1rem;
        padding: 5px;
        font-weight: 200;
        color: rgb(255, 251, 0);
    }
    footer .menu-footer a:hover{
        font-weight: 300;
        color: rgb(255, 255, 255);
    }
    footer .rodape a{
        font-size: 1rem;
        font-weight: 200;
        color: rgb(255, 251, 0);
    }
    footer .rodape a:hover{
        font-size: 1rem;
        font-weight: 200;
        color: rgb(255, 255, 255);
    }
}