@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    /* -------------cores---------------- */
    --cor-principal: #1E1E1E;
    --cor-secundaria: #7F5B37;
    --gradiente-btn: linear-gradient(45deg, #5D4330, #E0B678);
    --gradiente-btn-2: linear-gradient(45deg, #f5c277, #E0B678);
    --cor-terciaria: #E0B678;
    --cor-quartenaria: #9A6D4C;
    --cinza-claro: #8d8d8d;

    --cinza:#424242;
    /* ---------------fonts-------------- */
    --montserrart:"Montserrat", sans-serif;
    --poppins:  "Poppins", sans-serif;

}
/* ----------BARRA DE ROLAGEM---------------- */

 body::-webkit-scrollbar {
    width: 5px;               
  }
  
  body::-webkit-scrollbar-track {
    background:#282828;      
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: white;   
    border-radius: 20px;      
   
  } 

  object {
    display:none
    }
   body {
    overflow-x: hidden;
} 

html, body{
    overflow: visible;
}

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

body{
    
    background-color: var(--cor-principal);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
header{
    padding-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: var(--poppins);
    font-weight: 200;
    font-size: .90rem;
    white-space: nowrap
}
/* nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: .50rem;

} */
#menu {
    width: 90%;
    max-width: 930px;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    gap: 1rem;
  }
  
  /* #menu a {
    display: block;
    padding: 0.5rem;
  } */
  
  #btn-mobile {
    display: none;
  }

.logo_techlelis{
    width: 150px;
}
.link-header:hover{
    color: var(--cor-terciaria);
    transition: 1s;
}
ul{
    display: flex;
    gap: 4rem;
}
.btn{
    display: flex;
    align-items: center;
    border: solid .50px white;
    padding: 10px 25px;
    border-radius: 30px;
    justify-content: center;
    gap: .70rem;
}
.btn:hover{
    transform: translateY(-10px);
    border: #E0B678 solid .50px;
    transition: 1s;
}
.WhatsApp{
    width: 1.50rem;
}
a{color: white;}

.inicio{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 500px;
    background-image: url(img/grad-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    gap: 2rem;
   
   
}

.inicio h1{
    text-align: center;
    font-size: 40px;
    line-height: 2.30rem;
    font-family: var(--montserrart);
    font-weight: 600 ;
}
.inicio p{
    font-family: var(--poppins);
    font-weight: 300;
    text-align: center;
}
.perder-vendas{
    color: var();
    font-weight: 500;
    text-decoration: underline;
}
.posicionamento{
    color: var(--cor-terciaria);
    font-weight: 500;
    text-decoration: underline;
}

.btn-gradient{
    display: flex;
    align-items: center;
    background: var(--gradiente-btn);
    padding: 10px 25px;
    border-radius: 30px;
    justify-content: center;
    gap: .70rem;
    position: relative;
}
.btn-gradient::after{
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--gradiente-btn-2);
    left: 0;
    top: 0;
    border-radius: 10px;
}
.btn-gradient::before{
    content: "";
    background: var(--gradiente-btn);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    filter: blur(8px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    opacity: 0;
}

.btn-gradient:hover::before{
    opacity: 1;
}

.btn-black{
    display: flex;
    align-items: center;
    background: var(--cinza);
    padding: 10px 25px;
    border-radius: 30px;
    justify-content: center;
    gap: .70rem;
}
.btn-black:hover{
    transform: translateY(-10px);
    border: #E0B678 solid .50px;
    transition: 1s;
    transform: scaleY(-25px);
    transition: 1s;
}


 .slider{
    width: 100%;
    height: var(--height);
    background-color: white;
    transform: rotate(-1deg);
    color: var(--cor-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000,
        transparent
    );
}



.list{
    display: flex;
    width: 100%;
    gap: 2rem;
    white-space: nowrap;
    font-size: 1.50rem;
    font-weight: 600 ;
     
   
   
    
}

.list{
    align-items: center;
    justify-content: center;
    animation: scrolling 10s linear infinite;
}
@keyframes scrolling{
    from {
        transform: translateX(50%);
    }
    to{
        transform: translateX(-30%);
    }

}


.itemr:hover{
    animation-play-state: paused;
}  

.nossa_equipe{
    /* padding: 90px 90px; */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    height: 550px;
    
}
.container-equipe{
    width: 90%;
    max-width: 930px;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.img-gloria, .img-hosana, .img-joseane{
    width: 120px;
}

.gloria, .hosana, .joseane{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .20rem;
}

.container-integrantes{
    display: flex;

    flex-direction: column;
    gap: 3rem;

   
}
.titulo-integrantes{
    font-size: 2rem;
    font-family: var(--montserrart);

}
.integrantes{
    display: flex;
    justify-content: start;
    gap: 3rem;

    align-items: start;
}

.nome{
    font-size: 1rem;
    font-weight: 600;
}

.profissao{
    font-size: 13px;
    text-align: center;
    color: #BABABA;
}

.conteudo-equipe{
    width: 300px;
}

.conteudo-equipe-tittle{
    font-weight: 300;
    font-size: 2.10rem;

}

.conteudo-equipe-p{
    font-family: var(--poppins);
    font-size: .80rem;
    font-weight: 300;
}

.sessao-acreditar{
    display: flex;
    justify-content: center;
    align-items: center;
    
    background: var(--cor-quartenaria);
    width: 100%;
    padding: 30px 0 90px 0;
    height: 400px;
}
.container-acreditar{
    gap: 8rem;
    width: 90%;
    max-width: 930px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .container-acreditar h2{
    
} */


.sessao-acreditar h2 {
    font-size: 1.80rem;
    font-weight: 400;
}

.link-contato{
    display: flex;
    font-weight: 600;
    text-decoration: underline;
    gap: .50rem;
}
.link-portfolio{
    display: flex;
    font-weight: 600;
    text-decoration: underline;
    gap: .50rem;
}



.seta ,.seta-baixo{
    height: 1rem;
}


.sessao-acreditar-text{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portfolio{
    margin-top: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    
    height: 900px;
    
    /* padding: 150px 200px; */
    gap: 2rem;
    
}
.container-portfolio-tittle{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -90px;
    width: 100%;
    width: 100%;
}

.portfolio-tittle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;

    padding: 30px 60px;
    height: 200px;
    width: 90%;
    max-width: 1000px;
    
    background-image: url(img/bg-portfolio.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 105%;
    border-radius: 30px;
}

.portfolio-tittle h2{
    font-size: 2rem;
}
.portfolio-tittle p{
    font-size: 1rem;
}

.img-portfolio{
    /* width: 90%;
    height: 450px; */
    width: 100%;
    max-width: 450px;
    height: 100%;
    max-width: 450px;

    border-radius: 20px;
    position: relative;
    padding: 10px;
    cursor: pointer;
    overflow: hidden;
}
/* .card-image{
    height: 450px;
    width: 450px;
    
} */

.card-image{
    width: 100%;
    height: 100%;
}
.img-portfolio .card-image{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit:cover;
    left: 0;
    top: 0;
    transition: .50s;
}
.img-portfolio:hover .card-image{
    scale: 1.2;
}

.container-port-1{
    width: 90%;
    max-width: 930px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1000px;
    
    gap: 1rem;
}
.empresa{
    color: var(--cinza-claro);
    font-size: .90rem;
}
.card{
    height: 100%;
    width: 90%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.descricao{
    width: 300px;
}
.descricao-tittle{
    font-size: 1.20rem;
}

/* --------------PAGE PORTFOLIO------------------ */
.fotos-portfolio{
    padding: 20px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
   
}
.img-page-portfolio{
    border-radius: 40px;
    width: 85%;
    height: 100%;
}
/* ------------------PAGE POSTAGEM--------------------- */
.postagem-portfolio{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.img-postagem{
    width: 90%;
    height: 100%;
}

/* -------------------PAGE B&C----------------------------- */
.bec-portfolio{
    margin-top: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;

}
.img-bec{
    width: 90%;
    height: 100%;
    border-radius: 50px;
}
.conteudo-bec{
    margin-top: 45px;
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    justify-content: center;
    align-items: center;

}
.btn-bec{
    width: 30%;
}
.title-bec{
    font-family: var(--montserrart);
    font-size: 2.50rem;
    font-weight: 600;
}
.p-bec{
    font-family: var(--poppins);
    font-size: .90rem;
    font-weight: 300;
}