



#container_acrroche_titre_prjects{
  width: 100%;
  padding-top: 10%;
  position: relative;
  z-index: 2;

}




.imgs{
  width: 100%;
  height: 90%;
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
  transition: transform 1.5s ease;
}
.container_text{
  width: 100%;
  height: 100%;
  background-color: #e6e7e0;
  position: absolute;
  top:0;
  left:0;
  overflow: hidden;
}
.imgs_square{
  width: 30%;
  height:30%;
  transition: transform 1s ease,
   opacity 1s ease;
  transform: translateY(300%);
  position: absolute;
  right:5%;
  object-fit: cover;
  opacity: 0;
}

#container_titre_pro{
  width: 100%;
}

.ismarginproj{
  margin-top: 5%;
}
.item{
  width: 90%;
  display: flex;
  height: 90vh;
  margin-left: 5%;
  border-radius: 20px;
  padding: 5%;
  border: 1px solid rgb(235, 235, 235);
  background-color: rgba(219, 233, 219, 0.318);
}
.container_padd{
  width: 90%;
}
.img_rev{
  object-position: 0% 50%;
}
.in_item{
  width: 50%;
  height: 100%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.line_in {
  width: 100%;
  height:30%;
  display: flex;
  gap:1%;
  justify-content: center;
  align-items: center;
}
.line_in:not(:first-child) {
  margin-top: 3%;
}
.square{
  width: 45%;
  height: 100%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  justify-content: end;
  align-items: center;
}
.square2{
  width: 45%;
}
.last_text{
  width: 100%;
  padding: 2%;
  height: auto;

}
.container_btn{
  width: 100%;
  text-align: right;
}
.square_beg{
    justify-content: start!important;
}
.line_in_start {
  justify-content: start;
}
.med{
  width: 60%;
}
.little{
  width: 40%;
}




@media (max-width: 1280px) and (max-height:1024px){
  .item{
    height: 70vh;
    min-height: 530px;
  }


}


@media (max-width: 800px){
  .item{
    flex-direction: column;
    height: 120vh;
    row-gap: 5%;
  }
  .in_item{
    width: 100%;
    overflow: visible;
  }
  .line_in{
    justify-content: center;
  }
  .container_btn{
    position: relative;
    z-index: 2;
  }
  .imgs{
    border-radius: 20px;
  }
  .square{
    width: 48%;
  }
  #container_acrroche_titre_prjects{
    padding-top: 20%;
  }
  .square2{
    width: 45%;
  }
  .item{
    height: 120vh!important;
    min-height: 400px!important;
  }
  .last_text{
    margin-top: 5%;
  }
}

@media (max-width: 500px){
  #acrroche{
    margin-top: 80vh!important;
  }
}

