/* 
    ---------------------------------------------
    Created and updated by
    Fernanda "Wolf Krauser" Behrend
    fernanda.behrend1203@gmail.com

    CSS last modified: 10/08/2022
    ---------------------------------------------
*/

@import url("../css/reset.css");
@import url("../css/themecolors.css");
@import url("../css/mobile.css");
@import url("../js/jsmodal/modals.css");
@import url("https://lovatel.com.br/plugins/plugins.css");
/* fade-in pages */
body{	
    animation: fadein 1s; /* Padrão */
    -webkit-animation: fadein 1s; /* Webkit */
    -moz-animation: fadein 1s; /* Firefox */
    -ms-animation: fadein 1s; /* IE */
}
@keyframes fadein {
    from { opacity: 0.4; }
    to { opacity: 1; } /* Padrão */
}
@-moz-keyframes fadein {
    from { opacity: 0.4; }
    to { opacity: 1; } /* Firefox */
}
@-webkit-keyframes fadein {
    from { opacity: 0.4; }
    to { opacity: 1; } /* Webkit */
}
@-ms-keyframes fadein {
    from { opacity: 0.4; }
    to { opacity: 1; } /* IE */
}

/* ANIMAÇÕES DO SITE */
@media screen and (min-width:850px){
    [data-anime]{
        opacity:0;
        transition:.3s;
        -moz-transition:.3s;
        -webkit-transition:.3s;
        z-index:3;
    }
    [data-anime="aleft"]{
        transform:translate3d(-50px, 0,0);
        -webkit-transform:translate3d(-50px, 0,0);
        -moz-transform:translate3d(-50px, 0,0);
    }
    [data-anime="aright"]{
        transform:translate3d(50px, 0,0);
        -moz-transform:translate3d(50px, 0,0);
        -webkit-transform:translate3d(50px, 0,0);
    }
    [data-anime="abottom"]{
        transform:translate3d(0,-50px,0);
        -moz-transform:translate3d(0,-50px,0);
        -webkit-transform:translate3d(0,-50px,0);
    }
    [data-anime="atop"]{
        transform:translate3d(0,50px,0);
        -moz-transform:translate3d(0,50px,0);
        -webkit-transform:translate3d(0,50px,0);
    }
    [data-anime].animate{
        opacity:1;
        transform:translate3d(0px,0px,0px);
        -moz-transform:translate3d(0px,0px,0px);
        -webkit-transform:translate3d(0px,0px,0px);
    }
}

body{
    overflow-x: hidden;
}

.social-box{
    width: fit-content;
    width: -moz-fit-content;
}
.social-box a{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin: 0px 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}
.social-box i{
    font-size:11px;
    color: #d88329;
}
.social-box a:hover{
    transform: scale(1.1);
}


/* HEADER */
header{
    background: transparent;
    padding: 20px 20px 5px 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;

    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}

header .main{
    padding-bottom: 20px;
    z-index: 505;
    position: relative;
}

header .main::after{
    content: "";
    position: absolute;
    margin-bottom: 20px;
    left: 0;
    bottom: 0;

    width: calc(100% - 190px);
    height: 1px;

    background: #000;
}

.logoH{
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;
}
.logoH img{
    width: 100%;
    height: 100%;

    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}

.dl-menu{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    position: relative;
    z-index:2;
}

.btnWhatsapp{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:10px 15px;
    margin-top: 50px;
    border:1px solid #000;
    border-radius:10px;
    text-decoration:none;
    color:#000;
    font-weight:400;
    font-size:15px;
    line-height:1.1;
    min-width:180px;
    transition:0.3s;
}

.btnWhatsapp:hover{
    transform:translateY(-2px);
}

.iconWhatsapp{
    width:42px;
    height:42px;

    border-radius:50%;
    background:#000;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#ff8c00;
    font-size:22px;
}
#menu .dl-menu > li{
    position:relative;
    margin-right: 5px;
}
#menu .dl-menu > li:last-child{
    margin-right: 0;
}
#menu .dl-menu > li > a{
    border-radius:5px;
    padding: 10px 20px;
    font-size: 15px;
    color: #000;
    text-transform: uppercase;
}

.socialH{
    margin-left: 100px;
}

#homePage #menu li.ativo a,
#homePage #menu li:hover a{
    color: #000;
}

/* Header scroll */
header.scroll{
    background: #fff;
    position: fixed;
    padding: 20px 20px;

    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;

    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
header.scroll .main{
    padding-bottom: 20px;
}


/* Banner */
.banner{
    background: #d88329;
    padding: 100px 0 60px 0;
    display: flex;
    flex-direction: column;
}

.banner video{
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    margin: 0 auto 40px auto;
}

.banner .main{
    padding: 0 20px 0 20px;
    max-width: 1500px;
}
.banner p{
    font-size: 20px;
    line-height: 29px;
    max-width: 455px;
    margin: 0 auto 0 0;
}


/* Projetos home */
.projetosHome{
    padding-top: 100px;
}

.mainPadding .main{
    padding-left: 200px;
}

.verTodos{
    width: fit-content;
    width: -moz-fit-content;
    color: #000;
    font-size: 15px;
    text-transform: uppercase;
}

.verTodos div{
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;
    margin-left: 10px;
}
.verTodos div img{
    width: 100%;
    height: 100%;
}

.gridProjetosHome{
    width: 100%;
    grid-gap: 90px;
    padding-top: 90px;
    margin-top: 90px;
    border-top: 1px solid #000;
}

.itemProjetos{
    position: relative;
}
.itemProjetos div{
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    overflow: hidden;
    margin-bottom: 20px;
}
.itemProjetos div img{
    width: 100%;
    height: 100%;
    /* height: 385px;
    object-fit: cover;
    object-position: center; */

    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}
.itemProjetos:hover div img{
    transform: scale(1.1);
}
.itemProjetos h3{
    width: 100%;
    padding-right: 50px;
    font-size: 26px;
    line-height: 30px;
    background: url('../img/setaProdutos.svg') no-repeat center right;
    background-size: contain;
}


/* Depoimentos */
.gridDepoimentos{
    width: 100%;
    grid-gap: 90px;
    padding-top: 90px;
    margin-top: 90px;
    border-top: 1px solid #000;
}

.itemDepoimento{
    width: 100%;
}

.fotoDepoimento{
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;
    margin-right: 80px;
    align-self: flex-start;
}
.fotoDepoimento img{
    width: 143px;
    height: 143px;
    min-width: 143px;
    min-height: 143px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.textoDepoimento h4{
    font-size: 30px;
    line-height: 35px;
}
.textoDepoimento span{
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 25px;
    margin-top: 5px;
}
.textoDepoimento p{
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
}

.textoDepoimento .classificacao{
    width: fit-content;
    width: -moz-fit-content;
    margin: 40px auto 0 0;
}
.textoDepoimento .classificacao div{
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;
    margin-right: 5px;
}
.textoDepoimento .classificacao div:last-child{
    margin-right: 0;
}
.textoDepoimento .classificacao div img{
    width: 100%;
    height: 100%;
}


/* Cases Detalhes */
.casesDet .rightText p{
    text-align: justify;
}

.gridGaleria{
    margin-top: 80px;
    grid-gap: 40px;
}
.gridGaleria a{
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    overflow: hidden;
}
.gridGaleria a img{
    width: 100%;
    height: 416px;
    object-fit: cover;
    object-position: center;
    
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}
.gridGaleria a:hover img{
    transform: scale(1.1);
}
.gridGaleria a iframe{
    width: 100%;
    height: 416px;
}


/* Footer */
footer{
    background: #d88329;
    padding: 60px 20px;
}

.iniciarProjeto{
    margin: 0 0 0 auto;
    margin-bottom: 50px;
}
.iniciarProjeto div{
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;
    margin-left: 30px;
    align-self: flex-start;
    margin-top: 10px;
}
.iniciarProjeto div img{
    width: 100%;
    height: 100%;
}

.contentFooter{
    padding-top: 50px;
    border-top: 1px solid #000;
}

.infoFooter{
    width: fit-content;
    width: -moz-fit-content;
}

.leftFooter{
    width: fit-content;
    width: -moz-fit-content;
    margin-right: 100px;
}
.leftFooter ul{
    width: fit-content;
    width: -moz-fit-content;
    display: flex;
    flex-direction: column;
}
.leftFooter ul li{
    width: fit-content;
    width: -moz-fit-content;
    margin-bottom: 10px;
}
.leftFooter ul li:last-child{
    margin-bottom: 0;
}
.leftFooter ul li a{
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    text-transform: uppercase;
    color: #000;
    padding: 0;
    letter-spacing: 1px;
}

.rightFooter{
    width: fit-content;
    width: -moz-fit-content;
}
.rightFooter p,
.rightFooter a{
    margin-bottom: 0;
    color: #000;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.socialF{
    margin: 15px auto 30px 0;
}
.socialF .social-box a{
    width: 37px;
    height: 37px;
}
.socialF .social-box a i{
    font-size: 18px;
}

.btnOrcamento{
    position: fixed;
    z-index: 450;
    bottom: 40px;
    right: 20px;
    background: #000 url('../img/setaOrcamento.svg') no-repeat center right 20px;
    padding: 20px;
    color: #fff;
    max-width: 368px;
    width: 100%;
    font-size: 20px;
}


/* Sobre */
.leftTitle{
    width: 40%;
    height: fit-content;
    height: -moz-fit-content;
}

.rightText{
    width: 55%;
    height: fit-content;
    height: -moz-fit-content;
}
.rightText h2{
    max-width: 575px;
    margin-bottom: 60px;
}
.rightText h3{
    font-size: 90px;
    line-height: 90px;
    margin-bottom: 40px;
}
.rightText p{
    font-size: 20px;
    line-height: 27px;
    max-width: 742px;
}

.fotoEquipeGrande{
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    margin-top: 50px;
    overflow: hidden;
}
.fotoEquipeGrande img{
    width: 100%;
    height: 100%;

    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}
.fotoEquipeGrande:hover img{
    transform: scale(1.1);
}

.itemEquipe{
    width: 100%;
}
.itemEquipe h6{
    margin-top: 10px;
    letter-spacing: 0.006em;
    margin-bottom: 5px;
}
.itemEquipe span{
    font-size: 15px;
    line-height: 15px;
    letter-spacing: 0.006em;
}
.imgEquipe{
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    overflow: hidden;
}
.imgEquipe img{
    width: 100%;
    height: 100%;

    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}
.itemEquipe:hover .imgEquipe img{
    transform: scale(1.1);
}


/* Como Fazemos */
.itemSanfona{
    border-top: 1px solid #000;
}
.itemSanfona:last-child{
    border-bottom: 1px solid #000;
}

.rightText h4{
    max-width: 720px;
    margin-bottom: 0;
}

.titleSanfona{
    cursor: pointer;
    padding: 25px 45px 25px 0;
    background: url('../img/arrowDown.svg') no-repeat center right;
}
.itemSanfona.ativo .titleSanfona{
    background: url('../img/arrowUp.svg') no-repeat center right;
}

.conteudoSanfona{
    padding: 10px 0 30px 0;

    display: none;
}
.sliderSanfona{
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    margin-bottom: 30px;
}
.sliderSanfona .swiper-pagination{
    opacity: 0;
}
.conteudoSanfona p{
    font-size: 20px;
    line-height: 27px;
}


/* Cases */
.cases{
    padding: 60px 20px 120px 20px;
}

.gridProjetos{
    width: 100%;
    grid-gap: 90px;
    margin-top: 40px;
}


/* Contato */
.contato .leftTitle h2{
    font-size: 30px;
    line-height: 35px;
    max-width: 350px;
    margin-top: 40px;
}
.contato .linkContato a{
    color: #000;
}

#form_contact{
    width: 100%;
    height:available;
    height:fit-content;
}
#form_contact .e_input{
    padding: 20px 0;
    font-size: 20px;
    color: #000;
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
}
#form_contact .msg{
    width: 100%;
    min-height: 66px;
    padding: 20px 0;
    font-size: 20px;
    color: #000;
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
}
#form_contact textarea{
    overflow: hidden;
}
#form_contact .button{
    cursor: pointer;
    margin-top: 40px;
    max-width: 410px;
    width: 100%;
    padding: 20px 60px 20px 20px;
    color: #000;
    font-weight: 400;
    background: #fff url('../img/setaEnviar.svg') no-repeat center right 20px;
    border: 1px solid #000;
    font-size: 20px;
    border-radius: 0;
}
::-webkit-input-placeholder {
    color: #000;
} 
:-moz-placeholder { /* Firefox 18- */
    color: #000;  
} 
::-moz-placeholder {  /* Firefox 19+ */
    color: #000;  
} 
:-ms-input-placeholder {  
    color: #000;  
}

/* Box de contato */
.swal2-content{
    font-family: 'neue_montreal',sans-serif;
}