: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;

}

@media (max-width: 900px){
/* --------------------MENU MOBILE---------------------- */
    .logo_techlelis{
        width: 7rem;
        margin-bottom: -.50rem;
    }
    #menu {
      display: block;
      position: absolute;
      width: 100%;
      top: 70px;
      right: 0px;
      background: var(--cor-principal);
      transition: 0.6s;
      z-index: 1000;
      height: 0px;
      visibility: hidden;
      overflow-y: hidden;
    }
    #menu .btn{
      display: hidden;
    }
    #nav.active #menu {
      height: calc(100vh - 70px);
      position: absolute;
      visibility: visible;
      overflow-y: auto;
      background-color: #1E1E1E;
    }

    .btn{
      display: none;
    }
    li{
        margin-top: 1rem;
    }
    #menu a {
      padding: 1rem 0;
      margin: 1rem 3rem;
     
    }
    #btn-mobile {
      display: flex;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border: none;
      background: none;
      cursor: pointer;
      gap: 0.5rem;
    }
    #hamburger {
      border-top: 2px solid white;
      width: 20px;
    }

    
    #hamburger::after,
    #hamburger::before {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      /* background: currentColor; */
      background: white;
      margin-top: 5px;
      transition: 0.3s;
      position: relative;
    }
    #nav.active #hamburger {
      border-top-color: transparent;
    }
    #nav.active #hamburger::before {
      transform: rotate(135deg);
    }
    #nav.active #hamburger::after {
      transform: rotate(-135deg);
      top: -7px;

}

/* ---------------------SESSÃO 1-------------------------- */
.nossa_equipe{
    margin-top: 100px;
    height: auto;
    padding-bottom: 3rem;
    justify-content: center;
    align-items: center;
}
.container-equipe{
    padding-left: 0;
  
    flex-direction: column;
    gap: 2rem;
    width: 90%;
    max-width: 700px;
    
}
/* ----------------------IMAGENS----------------------- */
.integrantes{
  gap: 0;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.gloria, .hosana, .joseane{
  width: 25%;

}
.img-gloria, .img-hosana, .img-joseane{
  width: 100%;
}

/* -----------------------TEXTOS--------------------------- */

.conteudo-equipe-tittle{
  width: 500px;
}
.conteudo-equipe-p{
  width: 400px;
  
}
.conteudo-equipe{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* -----------------SESSÃO 2 (ACREDITAR)---------------------- */
.sessao-acreditar{
  gap: 0;
}

}

 @media (max-width: 834px) {
  .container-equipe{
    padding-left: 60px 0 60px;

  }
   .sessao-acreditar{
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 20%;
   }
}

@media(max-width: 640px){
  .container-port-1{
    flex-direction: column;
  }
  .portfolio{
    height: 2000px;
    margin-top: 30px;
  }
  .container-acreditar{
    flex-direction: column;
    gap: 20px;
    align-items: start;
  }
  .conteudo-bec 
  .btn-gradient{
    width: 100%;
  }

}

 @media (max-width: 520px){

  .btn-gradient{
    width: 200px;
  }
  .inicio{
    background-size: 95%;
}
  .inicio h1{
    font-size: 2rem;
    line-height: 2rem;
  }
  .conteudo-equipe-tittle{
    width: auto;
  }

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


.list{
  font-size: 1rem;
  font-weight: 700;
}

.card{
  width: 95%;
}
.container-port-1{
  width: 100%;
}
  
  
}

@media (max-width: 460px){
  .paragrafoinicio{
    font-size: .90rem;
  }
  .inicio h1{
    font-size: 1.80rem;
  }
  .portfolio-tittle{
    gap: 1rem;
  }
}

@media (max-width: 435px){
  .conteudo-equipe-p{
    width: 330px;
  }
  
} 

@media (max-width: 405px){

  .paragrafoinicio{
    width: 85%;
    max-width: 400ch;
    overflow: hidden;
    /* text-overflow: ellipsis;
    white-space: nowrap; */
  }

  .inicio h1{
    width: 95%;
    line-height: 1.80rem;
  }

  .container-portfolio-tittle{
   height: 200px;
  }

  .portfolio-tittle{
    padding: 20px;
    height: 100%;
  }

  .sessao-acreditar{
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 20%;
   }
}

@media (max-width: 395px){
  .nome{
    font-size: .80rem;
    white-space: nowrap;
  }
  .integrantes{
    align-items: start;
  }


}