.containerEntrevue {
  width: 50%;
  height: 100%;
  margin-top: 155px;
  margin-left: 500px;
}
/***************************** section title***************************/
.title_entrevue {
  width: 100%;
  font-size: 80px;
  display: flex;
  justify-content: center;
}

#title_e {
  text-align: center;
}
.title_entrevue h6 {
  width: 110%;
  height: 80px;
  transform-style: preserve-3d;
  transform: perspective(2000px);
  box-shadow: inset 300px 0 50px rgba(248, 248, 248, 0.932),
    0 20px 20px rgba(136, 134, 134, 0.5);
  transition: 1s;
  margin-top: 250px;
  border-radius: 65%;
}

/***************************** section title***************************/
/************************************tipes d'entrevue *******************/
.cont_entrevue {
  max-width: 1000px;
  margin: 100px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 200px;
}
.cont_entrevue li {
  margin-top: 25px;
  margin-left: 25px;
}
.card {
  position: relative;
  margin: 20px 0;
  width: 300px;
  height: 400px;
  background: #fff;
  background: rgb(9, 79, 121);
  background: linear-gradient(
    0deg,
    rgba(9, 79, 121, 0.927608543417367) 0%,
    rgba(119, 195, 207, 1) 74%,
    rgba(255, 255, 255, 1) 100%
  );
  transform-style: preserve-3d;
  transform: perspective(2000px);
  box-shadow: inset 300px 0 50px rgba(0, 0, 0, 0.5),
    0 20px 20px rgba(0, 0, 0, 0.5);
  transition: 1s;
}
.card:hover {
  z-index: 10000;
  transform: perspective(2000px) rotate(-10deg);
  box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5),
    0 10px 100px rgba(0, 0, 0, 0.5);
}

.card .Box {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  box-sizing: border-box;
  position: relative;
  transform-origin: left;
  z-index: 1;
  transition: 1s cubic-bezier(0.15, 1.7, 0.84, 0.58);
  background: #111;
}
.card .Box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card:hover .Box {
  transform: rotateY(-135deg);
}
.card .details {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 20px;
  z-index: -1;
}

/************************************question d'entrevue *******************/

.question {
  height: 800px;
  /* background-color: yellow; */
  display: flex;
  justify-content: center;
  margin-top: 200px;
  margin-left: 80px;
  margin-right: 80px;
}
.question iframe {
  width: 98%;
  height: 750px;
  margin-top: 35px;
  transform: perspective(3000px);
  box-shadow: inset 200px 0 80px rgba(0, 0, 0, 0.5),
    0 20px 20px rgba(0, 0, 0, 0.5);
  transition: 1s;
}
#title_que {
  text-align: center;
}


/**********************************section questions*****************************/
.title_question {
  font-size: 80px;
  margin-top: 250px;
}
.title_question > #title_ques {
  text-align: center;
}
#title_ques h1 {
  font-size: 19px;
}
/**********************************section questions*****************************/
/**********************************question d'entrevue*************************/
.cont_tipes {
  /* background-color: red; */
  width: 100%;
  height: 7 00px;
  display: flex;
  flex-direction: row;
  margin-top: 340px;
  padding: 50px;
}
#tipes1 h3 {
  margin-top: 30px;
  text-align: center;
}
#tipes1 h4 {
  margin-top: 10px;
  text-align: center;
}
#tipes1 p {
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
}
#tipes2 h3 {
  margin-top: 30px;
  text-align: center;
}
#tipes2 h4 {
  margin-top: 10px;
  text-align: center;
}
#tipes2 p {
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
}
.cont_tipes > #tipes1 {
  width: 50%;
  text-align: justify;
  /* border: 3px solid; */
  transform-style: preserve-3d;
  transform: perspective(2000px);
  box-shadow: inset 300px 0 50px 
  rgba(248, 248, 248, 0.932),
    0 20px 20px rgba(136, 134, 134, 0.5);
  transition: 1s;
}
.cont_tipes > #tipes2 {
  width: 50%;
  text-align: justify;
  /* border: 3px solid; */
  transform-style: preserve-3d;
  transform: perspective(2000px);
  box-shadow: inset 300px 0 50px 
  rgba(248, 248, 248, 0.932),
    0 20px 20px rgba(136, 134, 134, 0.5);
  transition: 1s;
}

#img_entr {
  margin-top: 20px;
  width: 100%;
  height: 500px;
}


/* **********************************responsive********** */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
and (orientation : portrait) {
  .title_entrevue {
    width: 100%;
  }
  #title_e h6 {
    width: 100%;
    text-align: center;
    font-size: 30px;
    margin-top: 170px;
  }
  /* .question_entre{
    width: 100%;
  } */
  .cont_tipes {
    width: 100%;
    padding: 10px;
    justify-content: center;
    margin-top: 55px;
  }
  .cont_tipes h3 {
    font-size: 35px;
    text-align: center;
    margin-top: 10px;
  }
  .cont_tipes h4 {
    font-size: 35px;
    text-align: center;
    margin-top: 10px;
  }
  .cont_tipes p {
    font-size: 18px;
    text-align: justify;
    margin-top: 10px;
  }
  .cont_tipes > #tipes1 {
    margin-top: 25px;
    padding: 30px;
    display: none;
  }
  .cont_tipes > #tipes2{
  width: 95%;
  } 

  #img_entr {
    max-width: 100%;
      height: auto;
      margin-top: 30px;
  }
  
  .question_cont{
    width: 100%;
    padding: 10px;
  }
  .question{
    margin: 0;
    height: 250px;
    margin-top: 85px;
  }
  .question iframe{
    height: 200px;
  }
  #footer {
    margin-top: 60px;
  }
}
/* @media (min-width: 481px) and (max-width: 767px) {
  //CSS
} */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .title_entrevue {
    width: 100%;
  }
  #title_e h6 {
    width: 100%;
    text-align: center;
    font-size: 30px;
    margin-top: 170px;
  }
  /* .question_entre{
    width: 100%;
  } */
  .cont_tipes {
    width: 100%;
    padding: 10px;
    justify-content: center;
    margin-top: 55px;
  }
  .cont_tipes h3 {
    font-size: 35px;
    text-align: center;
    margin-top: 10px;
  }
  .cont_tipes h4 {
    font-size: 35px;
    text-align: center;
    margin-top: 10px;
  }
  .cont_tipes p {
    font-size: 18px;
    text-align: justify;
    margin-top: 10px;
  }
  #tipes1 {
    margin-top: 25px;
    padding: 30px;
    display: none;
  }
  .cont_tipes > #tipes2{
  width: 95%;
  } 

  #img_entr {
    display: none;
  }
  .question_cont{
    width: 100%;
    padding: 10px;
  }
  .question{
    margin: 0;
    height: 250px;
    margin-top: 85px;
  }
  .question iframe{
    height: 200px;
  }
  #footer {
    margin-top: 60px;
  }
}