#container_titre_contact{
  position: relative;
  padding-left: 5%;
  padding-top: 8%;
  height:700px;
}
#titre_contact{
  margin-top: -3%;
}

#sous_titre_contact{
  margin-top: -3%;
}
#side_contact{
  position: absolute;
  right: -5%;
  top:40%;
}
#side_contact div{
  letter-spacing: 8px;
}
#side_contact div span{
  opacity: 0;
  transition: opacity 0.5s ease;
}
#side_contact div{
  height:180px;
}
.titre_background{
  position: absolute;
  opacity: 0.1;
}
#back1{
  top:0%;
  left: 10%;
  opacity: 0;
}
.back_appear {
  animation: back_appear 1.5s ease forwards;
}
@keyframes back_appear {
  from {
    opacity: 0;
    transform: translateX(-10%);
  }
  to{
    transform: translateX(0%);
    opacity: 0.2;
  }
}
.back_appear_left {
  animation: back_appear_left 1s ease forwards;
}
@keyframes back_appear_left {
  from {
    opacity: 0;
    transform: translateX(10%);
  }
  to{
    transform: translateX(0%);
    opacity: 0.2;
  }
}




#back2{
  top:42%;
  left: 5%;
  opacity: 0.15;
}
#back3{
  top:72%;
  left: 5%;
}
#titre_under{
  width: 60%;
}
#div_form{
  width: 100%;
  height:670px;
  position: relative;
}
#img_conact{
  position: fixed;
  width: auto;
  height:100%;
  right:0;
  top:0;
  opacity: 0.2;
  z-index: 0;
}



input,
textarea {
  resize: none;
}
.info{
  position: relative;
  width: 100%;
  display: flex;
  gap:10px;
  align-items: center;
}
.circles{
  width: 1vw;
  height:1vw;
  aspect-ratio: 1;
  background-color: white;
  border-radius: 50%;
}
.info{
  position: absolute;
  width: fit-content;
}
#info0{
  bottom: 13.5%;
}
#info1{
  bottom: 8%;
}

#form_container{
  width: 100%;
  height:600px;
  position: relative;
  z-index: 5;
}
#form{
  width: 100%;
  padding-left: 5%;
}
#titre_email{
  margin-top: 2%;
}
#email{
  margin-top: 0.5%;
  padding: 0.2% 0% 0% 0.5%;
  width: 40%;
  height:40px;
  font-size: clamp(23px, 1.8vw, 35px);
  background-color: rgb(248, 248, 218);
  border: none;
}
#input_flex{
  display: flex;
  gap:10px;
  justify-content: start;
  align-items: center;
}
#icone{
  width: 25px;
  height:auto;
  opacity: 0;
  margin-top: 0.5%;
}
#message{
  width: 60%;
  height:300px;
  border: none;
  font-size: clamp(23px, 1.8vw, 35px);
  padding: 0.2% 0% 0% 0.5%;
  color:black;
  background-color: rgb(248, 248, 218);
  margin-top: 0.5%;
}
#container_btn{
  width: 60%;
}
#btn_avis{
  justify-content: end;
  float: right;
  border: none;
  padding-right: 0;
}

#titre_form span{
  opacity: 0;
  transition: opacity 0.5s ease;
}

#titre_email span{
  opacity: 0;
  transition: opacity 0.5s ease;
}
#titre_msg{
  margin-top: 1%;
}
#titre_msg span{
  opacity: 0;
  transition: opacity 0.5s ease;
}
#sep{
  height:10vh;
}





@media (max-width: 1366px){

  #email{
    width: 40%;
    height:30px;
    font-size: clamp(23px, 1.8vw, 35px);
  }
  #icone{
    width: 20px;
  }
}
@media (max-width: 1280px){
  #sep{
    height:5vh;
  }

}

@media (max-width: 1152px){
  #message{
    width: 65%;
  }
  #email{
    width: 45%;
  }
  #container_btn{
    width: 65%;
  }
}

@media (max-width: 800px){
  #email{
    height:25px;
  }
  #message{
    width: 70%;
    height:250px;
  }
  #container_btn{
    width: 70%;
  }
  #sep{
    height: 0vh;
  }
  #form_container{
    height: 500px;
  }
  #back3{
    top:65%;
  }
  #container_titre_contact{
    height:550px;
  }
  #side_contact div{
    height:100px;
    font-size: 140px;
  }
}


@media (max-width: 750px){
  #email{
    width: 65%;
  }
  #message{
    width: 80%;
  }
}

@media (max-width: 670px){
  #message{
    width: 80%;
  }
  #container_btn{
    width: 80%;
  }
  #form_container{
    margin-top: 10%;
  }
}


@media (max-width: 550px){
  #email{
    width: 80%;
    height:30px;
  }
  #message{
    width: 95%;
  }
  #container_btn{
    width: 95%;
  }
  #titre_under{
    width: 80%;
    position: relative;
    z-index: 5;
  }
  #side_contact div span{
    opacity: 0.3!important;
  }
  #sep{
    height:8vh;
  }
  #titre_contact{
    width: 100%;
    word-wrap: break-word;
  }
  #titre_form{
    word-wrap: break-word;
  }
}