*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}

body{
  background-color: #ffffff;
  color:black;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
  height:100%;
  font-size: 1.1vw;
  font-size: clamp(1.3vw, 1.1vw, 4vw);
  font-family: acumin-variable,Helvetica,Arial,sans-serif!important;
}

.to_oppa{
  opacity: 1;
}
.to_oppa_0{
  opacity: 0;
}

a{
  text-decoration: none;
  color:white;
}

image:focus,
image:active {
  outline: none;
  box-shadow: none;
  background-color: transparent;
}
#hello {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

.menu-toggle {
  width: 40px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  position: fixed;
  top:5%;
  right:3%;
}
#menu{
  width: 80%;
  height:auto;
}






#nav_appear{
  width: 0%;
  height:0%;
  background-color: #141414;
  position: fixed;
  top:5%;
  right: 8%;
  z-index: 100;
  text-align: center;
  overflow: hidden;
  padding-top: 1%;
  transition: height 1s ease,
  width 0.5s ease;
  

}
#menu_nav{
  margin-top: 13%;
}
.is_first{
  margin-top: 10%;
}

.menu_on{
  animation: menu_on 1s ease-out forwards;
}
@keyframes menu_on {
  0%{
    width: 0%;
    height: 0%;
  }
  50% {
    width: 15%;
    height: 3vh;
  }
  60% {
    width: 15%;
    height: 3vh;
  }
  100%{
    width: 15%;
    height: 50vh;
  }
}
.menu_off{
  animation: menu_off 1s ease-out forwards;
}
@keyframes menu_off {
  0%{
    width: 15%;
    height: 50vh;
  }
  50% {
    width: 15%;
    height: 0vh;
  }
  55% {
    width: 15%;
    height: 0vh;
  }
  100%{
    width: 0%;
    height: 0vh;
  }
}



.el_nav{
  cursor: pointer;
}

#masthead{
  position: relative;
  width: 100%;
}
#area_mast{
  position: absolute;
  top:0;
  left:0;
  height:50%;
  width: 100%;
  border: 1px solid black;
}
.margin_top_nav{
  margin-top: 3%;
}
#first_name{
  letter-spacing: 6px;
  width: fit-content;
  border-bottom: 1px solid rgba(255, 255, 255, 0.295);
}
.name_mast{
  letter-spacing: 7px;
  display: block;
  font-weight: bold;
  unicode-bidi: isolate;
}
.img_mast{
  display: block;
  position: relative;
  object-fit: contain;
  transform: scaleX(-1);
}

.section1_text{
  width: 100%;
  text-align: center;
  padding: 2%;
  padding-bottom: 8%;
  padding-top: 7%;
  position: relative;
}
.underline{
  width: fit-content;
  border-bottom: 1px solid rgba(0, 0, 0, 0.219);
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  animation: reflowFix 0.01s;
}
@keyframes reflowFix {
  from { opacity: 1; }
  to { opacity: 0.99; }
}
.under_white{
  border-bottom: 1px solid rgb(255, 255, 255)!important;
}



.section1_text #container{
  width: 80%;
  display: flex;
  gap:2%;
  margin: auto;
  margin-top: 2%;
  position: relative;
  z-index: 5;
}

.section1_text #container .text{
  width: 50%;
  text-align: justify;
  position: relative;
  z-index: 5;
}
#text_r{
  margin-left: 8%;
  width: 42%!important;
  background-color: white;
}
#text_l{
  padding-right: 8%;
}
#section2{
  width: 100%;
  position: relative;
}
#text_section2{
  position: absolute;
  top:21%;
  left:5%;
}
.justi{
  text-align: justify;
}
  

#sous_txt2{
  width: 100%;;
  display: flex;
  justify-content: start;
  align-items: center;
  gap:2%;
  margin-top: 2%;
}
#line0{
  width: 3%;
  height:1px;
  background-color: rgb(255, 255, 255);
}
#line{
  width: 6%;
  height:1px;
  background-color: rgb(255, 255, 255);
}





#section2_img{
  filter: brightness(0.8);
  min-height: 100%;
}
.is_white_op{
  color: rgb(255, 255, 255);
}

#bottom_data{
  position: absolute;
  bottom: 8%;
  left:5%;
  display: flex;
  gap:3%;
  width: 100%;
}
.container_data{
  text-align: center;
  width: fit-content;
}
#text_img2{
  position: absolute;
  width: 30%;
  right:3%;
  bottom:8%;
}
#titre_img2{
  letter-spacing: 2px;
}



#section3{
  width: 100%;
  padding-top: 7%;
  padding-bottom: 5%;
  position: relative;
}
#section3 .text_section{
  width: 60%;
  margin: auto;
  position: relative;
}
#sous_titre{
  width: 100%;
  text-align: center;
}
#container{
  width: 75%;
  margin-left: 12.5%;
  display: flex;
  margin-top: 1%;
}
#container .section{
  width: 50%;
  padding: 1%;
}
#text1{
  width: 90%;
  text-align: justify;
  margin-left: 5%;
}

#img2{
  width: 90%;
  margin-top: 3%;
  margin-left: 5%;
}
#img_cont1{
  width: 90%;
  height:70vh;
  margin-left: 5%;
  margin-top: 3%;
}
#img_cont2{
  width: 90%;
  height:81vh;
  margin-left: 5%;
}

#section4{
  width: 100%;
  position: relative;
  margin-top: 4%;
}
#img4{
  width: 100%;
  height:100%;
  min-height: 100%;
  filter: brightness(0.75);
}

#text_parcours{
  width: 65%;
  margin: auto;
  margin-top: 3%;
}

#section4 #img_1{
  position:absolute;
  width: 40%;
  top:15%;
  z-index: 1;
  left:8%;
}

#bottom_data_s4{
  position:absolute;
  bottom: 5%;
  right:10%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap:3%;
  width: fit-content;
  justify-content: end;
  align-items: end;
  width: 30%;
}
.iem_s4{
  display: flex;
  gap:5%;
  width: fit-content;
  justify-content: start;
  flex-wrap: wrap;
}
#name_in{
  width: 100%;
  align-self: flex-end;
  padding-bottom: 2%;
  display: flex;
  align-items: center;
  gap:3%;
}
#line1{
  width: 5%;
  height:1px;
  background-color: white;
}

#section5{
  width: 100%;
  position: relative;
  height:100%;
  overflow: hidden;
}
.abs_img{
  position: absolute;
  top:0;
  left:0;
}
#container_titre5{
  position: absolute;
  width: 100%;
  height:100%;
  z-index: 2;
  top: 15%;
  left: 8%;
}
#titre_5{
  text-align: left;
  width: fit-content;
}
#enum5{
  z-index: 1;
  color:rgba(255, 255, 255, 0.26);
  position: relative;
  line-height: 1;
  transform: translateY(-20%);
}

#section5_text{
  display: flex;
  width: 60%;
  gap:1%;
  position: absolute;
  top:5%;
  left:20%;
}
#text_l5{
  width: 50%;
  padding: 1%;
  border-right: 1px solid rgba(255, 255, 255, 0.548);
  padding-top: 10%;
}
#text_r5{
  width: 45%;
}
#sous_text5{
  position: absolute;
  width: 29%;
  top:40%;
  left:20.5%;
}







#footer{
  width: 100%;
  position: absolute;
  bottom: 5%;
  display: flex;
}

#left_footer{
  width: 33.33%;
  padding-left: 5%;
}
#center{
  width: 33.33%;
}
#right_footer{
  width: 33.33%;
}









ul {
  list-style-type:decimal;     /* ou circle, square, none */
  padding-left: 1.5rem;
  margin: 0;
  margin-top: 2%;
}

ul li {
  margin-bottom: 0.5rem;
  width: 100%;
  text-align: left;
}
#container_inter{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.enum{
  font-size: 15vw;
  position: absolute;
  z-index: -1;
  color:rgba(0, 0, 0, 0.048);
}

#enum1{
  top:2%;
  left:7%;
}
#enum2{
  top:40%;
  right:10%;
}
#enum3{
  top:-3%;
  left:3%;
  z-index: 1;
  color:rgba(0, 0, 0, 0.384);
}
#enum4{
  top:-2%;
  left:6%;
}


.back{
  background-color: white;
}







#hello{
  position: absolute;
  bottom: 2%;
  z-index: 10;
  left:50%;
  width: fit-content;
  transform: translateX(-50%);
}



















.margin_top{
  margin-top: 2%;
}

.upper{
  text-transform: uppercase;
}

.is_text_deco{
  letter-spacing: .2em;
  text-decoration: none;
  display: flex;
  width: 100%;
  align-items: center;
  gap:1%;
}

.is_titre1{
  font-size: 6vw;
}
.is_titre2{
  font-size: 2vw;
}
.is_titre3{
  font-size: 1.5vw;
}

.is_titre4{
  font-size: 1.1vw;
}
.is_little{
  font-size: 0.8vw;
}




.is_black {
  color: black;
}
.is_white{
  color: white;
}

.is_gray{
  color: rgb(196, 196, 196);
}
h1{
  padding: 0;
  margin: 0;
}

.light{
  font-weight: 100;
  font-size: 1vw;
}





img{
  position: relative;
  width: 100%;
  height:auto;
  display: block;
}

.is_sarah_bound{
  font-family: 'Sarabun', sans-serif;
}



.cinzel {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
}


.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 1px;
}

.playfair-display-bold {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing: 1px;
  font-weight: bold;
}




.poppins-thin {
  font-family: "Poppins", serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", serif;
  font-weight: 200;
  font-style: normal;
}




.resp{
  display: none;
}





@media (max-width: 1176px) {
  #menu{
    width: 70%;
    height:auto;
  }
}

@media (max-width: 800px) {
  #menu{
    width: 60%;
    height:auto;
  }
  #text_nep{
    font-size: 3.5vw;
  }
}
@media (max-width: 700px) {
  #img_mast{
    transform: scaleX(1);
  }
  #first_name{
    padding-bottom: 1%;
  }
  #bottom_data{
    width:100%;
    left:0;
    gap:5%;
    justify-content: center;
  }
  .container_data{
    width: 25%;
  }
  #masthead{
    height:100vh;
  }
  .img_mast{
    width: 100%;
    height:100%;
    object-fit: cover;
  }
  #titre_mast{
    width: 90%!important;
    margin-top: 5%;
    left:5%!important;
  }
  #line0{
    display: none;
  }
  .no_resp{
    display: none!important;
  }
  .resp{
    display: block;
  }
  #last_name{
    margin-top: 1%;
    padding-bottom: 1%;
  }
  .section1_text{
    padding-top: 0;
  }
  .section1_text #container{
    width: 100%;
  }
  #section3{
    padding-top: 0;
  }
  #section3 .text_section{
    width: 95%;
    margin-left: 2.5%;
    padding: 2%;
  }
  #enum1, #enum2, #enum4{
    position: relative;
    color:rgb(192, 192, 192)!important;
    width: 100%;
    text-align: center;
  }
  .text_03{
    width: fit-content;
    text-align: center;
    margin: auto;
    margin-top: 1.5%;
  }
  #parcourt{
    padding-bottom: 1%;
    border-bottom: 1px solid white;
  }
  #under_pracout{
    margin-top: 2%;
  }
  #img_1{
    margin-top: 15%;
  }
  #enum3{
    width: 100%;
    text-align: center;
    color:rgb(192, 192, 192)!important;
  }
  .enum{
    left:0!important;
    top:0!important;
    font-size: 30vw;
  }
  #enum5{
    color:rgb(192, 192, 192)!important;
  }
  #section5, #section4{
    height:100vh;
  }
  #img4{
    object-fit: cover;
  }
  #section2{
    height:100vh;
  }
  #nav{
    top:4%;
    width: 30px;
  }
  #text_img2{
    width: 70%;
    left:5%;
    bottom:15%;
  }
  #titre_img2{
    width: 60%;
  }
  .section1_text #container{
    gap:3%
  }
  #section2_img{
    object-position: 30% 0%;
  }
  #text_section2{
    top:11%;
  }
  #bottom_data{
    bottom: 3%;
  }
  #section4 #img_1{
    width: 90%;
    top:5%;
    margin-left: 5%;
  }
  .section1_text #container{
    flex-direction: column;
  }
  #text_r, #text_l{
    width: 100%!important;
    margin-left: 0;
    padding: 2%;
  }
  #section4 #img_1{
    left: 0%;
  }
  #sous_text_resp{
    width: 95%;
    margin-left: 2.5%;
    padding-bottom: 10%;
  }
  .are_text_resp{
    width: 95%;
    margin-left: 2.5%;
  }
  #resp_before{
    margin-top: 10%;
    position: relative;
  }
  #container_titre5{
    top:5%;
    width: 95%;    
    left: 2.5%;
  }
  #sous_text5{
    width: 100%;
    left:0%;
    top:0;
    padding: 1%;
  }
  #text_parcours{
    width: 95%;
    margin: auto;
    margin-top: 3%;
    padding: 2%;
  }
  #nav_appear{
    right: 15%;
  }
}