@font-face {
    font-family: "BLM-Bold" ;
    src: url(../asset/fonts/BL_Melody_Family/SansSerif/BLMelody-Bold.otf);
}
@font-face {
    font-family: "BLM-Semi" ;
    src: url(../asset/fonts/BL_Melody_Family/SansSerif/BLMelody-SemiBold.otf);
}
@font-face {
    font-family: "BLM-L" ;
    src: url(../asset/fonts/BL_Melody_Family/SansSerif/BLMelody-Light.otf);
}
@font-face {
    font-family: "BLM-EL" ;
    src: url(../asset/fonts/BL_Melody_Family/SansSerif/BLMelody-ExtraLight.otf);
}
@font-face {
    font-family: "BLM-Reg" ;
    src: url(../asset/fonts/BL_Melody_Family/SansSerif/BLMelody-Regular.otf);
}
@font-face {
    font-family: "BLM-M" ;
    src: url(../asset/fonts/BL_Melody_Family/SansSerif/BLMelody-Medium.otf);
}
@font-face {
    font-family: "BLM-Book" ;
    src: url(../asset/fonts/BL_Melody_Family/SansSerif/BLMelody-Book.otf);
}

@font-face {
    font-family: "Dalfitra" ;
    src: url(../asset/fonts/Dalfitra/dalfitra.ttf);
}

@font-face {
    font-family: "BLM-Mono-Med" ;
    src: url(../asset/fonts/BL_Melody_Family/Mono/BLMelodyMono-Medium.otf);
}

*{
    padding: 0;
    margin: 0;
}

html{
    font-size: 62.5%;
    background-color: #0d0d0d;
}




/* ------------------ FIREFOX SCROLL BAR --------------------*/
/* html{
    scrollbar-width: normal ;
    scrollbar-color: #525252 #121212;
} */


/* ------------------ CHROMIUM BASED SCROLL BAR --------------------*/
/* html::-webkit-scrollbar{
    width: .3vw;
}
html::-webkit-scrollbar-track{
    background-color: #12121217;
     border-radius: 1rem ;
}
html::-webkit-scrollbar-track:hover{
    background-color: #121212;
     border-radius: 1rem ;
}
html::-webkit-scrollbar-thumb{
    background-color: #3a3a3a;
     border-radius: 1rem ;
}
html::-webkit-scrollbar-thumb:hover{
    background-color: #525252;
     border-radius: 1rem ;
}

 */





.main{
    position: absolute;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #0d0d0d;
}
.resMain{
    display: none;
}


.headerSection{
    position: relative;
    height: 10%;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.headerSection a{
    margin-top: 4rem;
    text-decoration: none;
}
.headerSection a h1{
    font-family: "BLM-Bold" ;
    font-size: 2rem;
    font-weight: normal;
    margin-left: 5rem;
    color: #ECECEC;
}
.headerSection .Menu{
    cursor: pointer;
    margin-top: 4rem;
    margin-right: 5rem;
    font-family: "BLM-Book" ;
    font-size: 1.6rem;
    font-weight: normal;
    color: #ECECEC;
}

.midSection{
    position: relative;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.midSection .NameSection{
    position: absolute;
    height: 300px;
    width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.midSection .NameSection .name{
    position: fixed;
    font-family: "BLM-Bold" ;
    font-size: 100px;
    text-transform: uppercase;
    font-weight: normal;
    color: #ECECEC;
    resize: none;
}
.midSection .NameSection .designer{
    position: fixed;
    margin-right: 225px;
    margin-top: 80px;
    font-family: "BLM-Book" ;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: #ECECEC;
    resize: none;
}
.midSection .NameSection .developer{
    position: fixed;
    margin-left: 520px;
    margin-top: 80px;
    font-family: "BLM-Book" ;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: #ECECEC;
    resize: none;
}

.footerSection{
    position: absolute;
    height: 10%;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.footerSection .navs{
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5rem;
}
.footerSection .navs .time{
    text-transform: none;
    font-family: "BLM-Book" ;
    font-size: 1rem;
    font-weight: normal;
    color: #ECECEC;
}
.footerSection .navs .time span{
    text-transform: capitalize;
    font-family: "BLM-Book" ;
    font-size: 1.4rem;
    font-weight: normal;
    color: #ECECEC;
}
.footerSection h1{
    text-transform: uppercase;
    font-family: "BLM-Book" ;
    font-size: 1rem;
    font-weight: normal;
    color: #ECECEC;
    padding-right: 5rem;
    margin-bottom: 3rem;
}


/* NAV BOX */
.NavBox{
    overflow: hidden;
    position: fixed;
    z-index: 11;
    right: 0;
    height: 100vh;
    width: 0vw;
    background-color: #ECECEC;
}
.NavBox .NavHeaderSection{
    z-index: 11;
    position: absolute;
    height: 10%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: end;
}
.NavBox .NavHeaderSection h1{
    cursor: pointer;
    margin-top: 4rem;
    margin-right: 5rem;
    font-family: "BLM-Book" ;
    font-size: 1.6rem;
    font-weight: normal;
    color: #0d0d0d;
}
.NavBox .NavFooterSection{
    z-index: 11;
    bottom: 0;
    position: absolute;
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: flex-end;
}
.NavBox .NavFooterSection h1{
    text-transform: uppercase;
    font-family: "BLM-Reg" ;
    font-size: 1rem;
    font-weight: normal;
    color: #0d0d0d;
    margin-bottom: 3rem;
    padding-right: 5rem;
}
.NavBox .NavMidSection{
    z-index: 10;
    position: absolute;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.NavBox .NavMidSection .NavLinks{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
.NavBox .NavMidSection .NavLinks a{
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.NavBox .NavMidSection .NavLinks a h1{
    text-align: center;
    cursor: pointer;
    font-family: "BLM-Reg" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #0d0d0d;
    overflow: hidden;
    width: calc(100% + 1.6rem);
}
.NavBox .NavMidSection .NavLinks a h1 span{
    cursor: pointer;
    font-family: "BLM-Reg" ;
    font-size: 1.05rem;
    position: absolute;
    font-weight: normal;
    color: #0d0d0d;
    transition: all 1s cubic-bezier(0.03,0.22,0.19,1);;
}
#Close{
    opacity: 0;
    transform: translateX(400px);
    transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);;
}
#Navs{
    opacity: 0;
    transform: translateX(400px);
    transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);;
}
#footerNav{
    opacity: 0;
    transform: translateX(400px);
    transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);;
}
.NavBox .hoverNavs{
    z-index: 10;
    bottom: 0;
    position: absolute;
    height: 30%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    mix-blend-mode: exclusion;

}
.NavBox .hoverNavs .hoverPage{
    z-index: 11;
    padding-left: 9.5%;
    width: 100vw;
    cursor: pointer;
    font-family: "Dalfitra" ;
    font-size: 12rem;
    position: absolute;
    font-weight: normal;
    color: #efefef;
}
.NavBox .NavMidSection .NavLinks a:nth-child(1){
    background-position:  300% center;
    background-size: none;
    background-repeat: no-repeat;
    transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);;
}
.NavBox .NavMidSection .NavLinks a:nth-child(2){
    background-position:  300% center;
    background-size: none;
    background-repeat: no-repeat;
    transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);;
}
.NavBox .NavMidSection .NavLinks a:nth-child(3){
    background-position:  300% center;
    background-size: none;
    background-repeat: no-repeat;
    transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);;
}
.NavBox .NavMidSection .NavLinks a:nth-child(4){
    background-position:  300% center;
    background-size: none;
    background-repeat: no-repeat;
    transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);;
}


/* About Section */
.bioSection{
    position: relative;
    height: 90%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.bioSection .pageTitleSection{
    height: 20%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.bioSection .pageTitleSection #About{
    font-family: "BLM-Semi" ;
    font-size: 5rem;
    font-weight: normal;
    color: #ECECEC;
    margin-left: 14rem;
}
.bioSection .pageTitleSection #About span{
    position: absolute;
    font-family: "BLM-Book" ;
    font-size: 1.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.bioSection .aboutBox {
    height: 80%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.bioSection .aboutBox .ProfileBox {
    height: 80%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.bioSection .aboutBox .ProfileBox .ProfileSection{
    position: relative;
    height: 100%;
    width: 35%;
    filter: saturate(0);
    background-position: center;
    background-size: 120%;
    border-radius: 1.5rem;
    background-image: url(../asset/imgs/Profile.png);
}
.bioSection .aboutBox .ProfileBox .BioSection{
    position: relative;
    height: 100%;
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}
.bioSection .aboutBox .ProfileBox .BioSection .NameBox{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}
.bioSection .aboutBox .ProfileBox .BioSection .NameBox h4{
    font-family: "BLM-M" ;
    font-size: 3rem;
    font-weight: normal;
    color: #ECECEC;
}
.bioSection .aboutBox .ProfileBox .BioSection .NameBox h1{
    font-family: "BLM-Bold" ;
    font-size: 4rem;
    font-weight: normal;
    background: linear-gradient(57deg, rgb(233, 233, 233) 0%, rgb(218, 194, 149) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bioSection .aboutBox .ProfileBox .BioSection .BioBox{
    margin-top: 3rem;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}
.bioSection .aboutBox .ProfileBox .BioSection .BioBox p{
    font-family: "BLM-Book" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}
.bioSection .aboutBox .ProfileBox .BioSection .BtnBox{
    margin-top: 3rem;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}
.bioSection .aboutBox .ProfileBox .BioSection .BtnBox a{
    text-decoration: none;
    height: auto;
    width: auto;
    display: flex;
    border-radius: .9rem;
    justify-content: center;
    align-items: center;
}
.bioSection .aboutBox .ProfileBox .BioSection .BtnBox a button{
    height: 4rem;
    width: 15rem;
    font-size: 1.6rem;
    font-family: "BLM-M";
    background-color: #ECECEC;
    color: #0d0d0d;
    border-radius: .9rem;
    border: none;
    cursor: pointer;
}
.bioSection .aboutBox .ProfileBox .BioSection .BtnBox a button:hover{
    background-color: #e7e9d3;
}
.resAboutMain{
    display: none;
}
.aboutMain{
    position: absolute;
    height: 430%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #0d0d0d;
}

.MyTab1{
    position: relative;
    height: 130%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.MyTab1 .Title{
    position: relative;
    height: 10%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: flex-start;
}
.MyTab1 .Title h2{
    font-family: "BLM-Semi" ;
    font-size: 3rem;
    font-weight: normal;
    color: #ECECEC;
}
.MyTab1 .Journey{
    position: relative;
    height: 90%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.MyTab1 .Journey .Pro{
    position: relative;
    height: 90%;
    width: calc(50% - 4rem);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1.5rem;
    background-color: #ececec04;
}
.MyTab1 .Journey .Pro .Exs{
    position: relative;
    height: calc(calc(100% / 3) - 2rem);
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.MyTab1 .Journey .Pro .Exs h6{
    font-family: "BLM-L" ;
    font-size: 1.6rem;
    font-weight: normal;
    color: #f7dfb3;
}
.MyTab1 .Journey .Pro .Exs h2{
    margin-top: 1rem;
    margin-left: 2rem;
    font-family: "BLM-M" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}
.MyTab1 .Journey .Pro .Exs p{
    margin-top: 1rem;
    margin-left: 2rem;
    font-family: "BLM-L" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}

.MyTab1 .Journey .Ed{
    position: relative;
    height: 90%;
    width: calc(50% - 4rem);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 1.5rem;
    background-color: #ececec04;
}
.MyTab1 .Journey .Ed .Cours{
    position: relative;
    height: calc(calc(100% / 3) - 2rem);
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.MyTab1 .Journey .Ed .Cours h6{
    font-family: "BLM-L" ;
    font-size: 1.6rem;
    font-weight: normal;
    color: #f7dfb3;
}
.MyTab1 .Journey .Ed .Cours h2{
    margin-top: 1rem;
    margin-left: 2rem;
    font-family: "BLM-M" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}
.MyTab1 .Journey .Ed .Cours p{
    margin-top: 1rem;
    margin-left: 2rem;
    font-family: "BLM-L" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}


.MyTab2{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.MyTab2 .Title{
    position: relative;
    height: 25%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: flex-start;
}
.MyTab2 .Title h2{
    font-family: "BLM-Semi" ;
    font-size: 3rem;
    font-weight: normal;
    color: #ECECEC;
}


.MyTab2 .SkillSets{
    position: relative;
    height: 75%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.MyTab2 .SkillSets .Skills{
    position: relative;
    height: 80%;
    width: calc(calc(100% / 3) - 6rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2rem;
    background-color: #ececec04;
    border-radius: 1.5rem;
}
.MyTab2 .SkillSets .Skills h3{
    font-family: "BLM-Reg" ;
    font-size: 2.2rem;
    font-weight: normal;
    color: #ECECEC;
}
.MyTab2 .SkillSets .Skills p{
    margin-top: 4rem;
    font-family: "BLM-L" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}



.MyTab3{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.MyTab3 .GIT{
    height: 45%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}
.MyTab3 .GIT .QuoteBox{
    height:50%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}
.MyTab3 .GIT .QuoteBox h2{
    font-family: "BLM-Bold" ;
    text-align: center;
    font-size: 3rem;
    font-weight: normal;
    color: #ECECEC;
}
.MyTab3 .GIT .QuoteBox h6{
    margin-top: 2rem;
    font-family: "BLM-L" ;
    text-align: center;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}


.MyTab3 .contact{
    position: relative;
    height: 55%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.MyTab3 .contact .leftSection{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.MyTab3 .contact .leftSection #Quest{
    font-family: "BLM-L" ;
    font-size: 3rem;
    font-weight: normal;
    color: #ECECEC;
    margin-bottom: 10%;

}
.MyTab3 .contact .leftSection #SayHello{
    font-family: "BLM-Reg" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
    margin-bottom: 5%;

}
.MyTab3 .contact .leftSection #SayHello a{
    text-decoration: none;
    font-family: "BLM-L" ;
    font-weight: normal;
    color: #ECECEC;
    width: 70%;
}
.MyTab3 .contact .leftSection .SocialLinks{
    position: relative;
    height: 3rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: center;
    margin-bottom: 5%;
}
.MyTab3 .contact .leftSection .SocialLinks a{
    display: flex;
    flex-direction: row;
    width: auto;
    text-decoration: none;
    overflow: hidden;
}
.MyTab3 .contact .leftSection .SocialLinks a h2{
    font-family: "BLM-L" ;
    font-size: 1.4rem;
    font-weight: normal;
    color: #ECECEC;
}
.MyTab3 .contact .leftSection .SocialLinks a h2 svg{
    height: 1.4rem;
    opacity: 1;
}



.MyTab3 .contact .rightSection{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center
}
.MyTab3 .contact .rightSection .innerBox{
    position: relative;
    height: calc(100% - 18%);
    width: calc(100% - 14rem);
    margin-left: 14rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.MyTab3 .contact .rightSection h1{
    position: absolute;
    bottom: 0;
    right: 0;
    text-transform: uppercase;
    font-family: "BLM-Book" ;
    font-size: 1rem;
    font-weight: normal;
    color: #ECECEC;
    padding: 2.5% 0;
}


/* Projects Section */
.ProjSection{
    position: relative;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.ProjSection .ProjHeadingSection{
    height: 20%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.ProjSection .ProjHeadingSection #Projects{
    font-family: "BLM-Semi" ;
    font-size: 5rem;
    font-weight: normal;
    color: #ECECEC;
    margin-left: 14rem;
}
.ProjSection .ProjHeadingSection #Projects span{
    position: absolute;
    font-family: "BLM-Book" ;
    font-size: 1.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjSection .ProjectBox{
    position: relative;
    height:calc(80% - 10vh);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ProjSection .ProjectBox .ProjectsPanel{
    position: relative;
    height:calc(100% - 10vh);
    width: calc(100% - 28rem);
    gap: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ProjSection .ProjectBox .ProjectsPanel .Project{
    height:100%;
    width: calc( 60% / 4);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    transition: width .8 ease;
}
.ProjSection .ProjectBox .ProjectsPanel .Proj1{
    height:100%;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width .8 ease;
}
.ProjSection .ProjectBox .ProjectsPanel .Project .innerGrad{
    height:100%;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    justify-content: end;
    align-items: flex-end;
    background: rgb(13,13,13);
    background: linear-gradient(0deg, rgba(13,13,13,1) 0%, rgba(13,13,13,0) 100%);
    cursor: none;
}

.ProjSection .ProjectBox .ProjectsPanel .Project .innerGrad .ProjectNameBox {
    height: 3rem;
    width: 17rem;
    position: absolute;
    display: flex;
    justify-content: start;
    align-items: center;
    transform: rotateZ(-90deg) translate(55%, 150%);
}
.ProjSection .ProjectBox .ProjectsPanel .Project .NameSelBox {
    display: flex;
    justify-content: end;
    align-items: flex-end;
}
.ProjSection .ProjectBox .ProjectsPanel .Project .NameSelBox .NameSel {
    width: auto;
    transform: rotateZ(0deg) translate(-30%, -55%);
}
.ProjSection .ProjectBox .ProjectsPanel .Project .innerGrad .ProjectNameBox .ProjName{
    font-family: "BLM-Semi" ;
    font-size: 2.3rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjSection .ProjectBox .ProjectsPanel .Project .innerGrad .ProjectNameBox .ProjName span{
    position: absolute;
    font-family: "BLM-Book" ;
    font-size: 1rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjSection .ProjectBox .ProjectsPanel .Project .innerGrad .cursor .outerCirc{
    z-index: 11;
    display: block;
    transform: translate(-50%, -50%)  scale(0);
    position: fixed;
    height: 12vh;
    width: 12vh;
    pointer-events: none;
    border-radius: 100rem;
    background-color: #ECECEC;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ProjSection .ProjectBox .ProjectsPanel .Project .innerGrad .cursor .outerCirc h1{
    font-family: "BLM-Mono-Med" ;
    font-size: 1rem;
    font-weight: normal;
    color: #0d0d0d;
}

.ProjSection .ProjectBox .ProjectsPanel .Project:nth-child(1){
    background-image: url(../asset/imgs/project-covers/ProjCover1.jpg);
    background-size: cover;
    background-position: center;
}
.ProjSection .ProjectBox .ProjectsPanel .Project:nth-child(2){
    background-image: url(../asset/imgs/project-covers/ProjCover2.jpg);
    background-size: cover;
    background-position: center;
}
.ProjSection .ProjectBox .ProjectsPanel .Project:nth-child(3){
    background-image: url(../asset/imgs/project-covers/ProjCover3.jpg);
    background-size: cover;
    background-position: center;
}
.ProjSection .ProjectBox .ProjectsPanel .Project:nth-child(4){
    background-image: url(../asset/imgs/project-covers/ProjCover4.jpg);
    background-size: cover;
    background-position: center;
}
.ProjSection .ProjectBox .ProjectsPanel .Project:nth-child(5){
    background-image: url(../asset/imgs/project-covers/ProjCover5.jpg);
    background-size: cover;
    background-position: center;
}


/* Veille Technologique Section */
.VTMain{
    position: absolute;
    height: 700%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #0d0d0d;
}
.VTSection{
    position: relative;
    height: 90%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.VTSection .VTHeadingSection{
    height: 20%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.VTSection .VTHeadingSection #Vtech{
    font-family: "BLM-Semi" ;
    font-size: 5rem;
    font-weight: normal;
    color: #ECECEC;
    margin-left: 14rem;
}
.VTSection .VTHeadingSection #Vtech span{
    position: absolute;
    font-family: "BLM-Book" ;
    font-size: 1.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.VTSection .Q1Section{
    height: 40%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.VTSection .Q1Section .Q1{
    font-family: "BLM-L" ;
    font-size: 2.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.VTSection .Q1Section .P1{
    padding-top: 1rem;
    font-family: "BLM-EL" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.VTSection .Q2Section{
    height: 40%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
}
.VTSection .Q2Section .Q2{
    font-family: "BLM-L" ;
    font-size: 2.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.VTSection .Q2Section .P2{
    padding-top: 1rem;
    font-family: "BLM-EL" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.myMethodsSection{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.myMethodsSection .MyMethods:first-child{
    margin-top: 5rem;
}
.myMethodsSection .MyMethods{
    height: 35%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
}
.myMethodsSection .MyMethods .Q2{
    font-family: "BLM-L" ;
    font-size: 2.2rem;
    font-weight: normal;
    color: #ECECEC;
}
.myMethodsSection .MyMethods .P2{
    padding-top: 1rem;
    font-family: "BLM-EL" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.myMethodsSection .TopicSection{
    margin-top: 8rem;
    height: 10%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.myMethodsSection .TopicSection .myTopic{
    font-family: "BLM-M" ;
    font-size: 3rem;
    font-weight: normal;
    color: #ECECEC;
}
.myTopicSection{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.myTopicSection .TopicSection{
    height: 10%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.myTopicSection .TopicSection .myTopic{
    font-family: "BLM-L" ;
    font-size: 2.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.myTopicSection .TopicCoverSection{
    position: relative;
    margin-top: 7rem;
    height: 60%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 20px;
    background-image: url(../asset/imgs/ai22.png);
    background-size: auto 150%;
    mix-blend-mode: lighten;
    background-repeat: no-repeat;
    background-position: center right;
}
.myTopicSection .TopicCoverSection .CoverSection{
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    background-size: auto 120%;
    background-position: left;
}
.myTopicSection .TopicCoverSection .Topic{
    font-family: "BLM-Semi" ;
    font-size: 5rem;
    font-weight: normal;
    color: #ECECEC;
    z-index: 10;
}
.myTopicSection .TopicCoverSection .ImageCredit{
    position: absolute;
    height: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    right: 0;
    bottom: 0;
    background-color: #0d0d0d;
    border-radius: 1rem 0 0 0;
}
.myTopicSection .TopicCoverSection .ImageCredit h1{
    font-family: "BLM-Mono-Med" ;
    font-size: 1.4rem;
    font-weight: normal;
    color: #C3D82B;
    text-align: end;
    padding-left: 1rem;
}
.myTopicSection .TopicIntroSection{
    height: 30%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    margin-top: 5rem;
}
.myTopicSection .TopicIntroSection .TopicIntro{
    padding-top: 1rem;
    font-family: "BLM-EL" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.introArticlesSection{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.introArticlesSection .TopicIntroSection{
    height: 30%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.introArticlesSection .TopicIntroSection .TopicIntro{
    padding-top: 1rem;
    font-family: "BLM-EL" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.ArticlesSection{
    position: relative;
    height: 200%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.ArticlesSection .ArticleBox1{
    position: relative;
    height: calc(75% - 10rem);
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.ArticlesSection .ArticleBox1 .LeftSection{
    position: relative;
    height: calc(100% - 0rem);
    width: calc(50% - 0rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.ArticlesSection .ArticleBox1 a{
    text-decoration: none;
}
.ArticlesSection .ArticleBox1 .LeftSection .Top{
    position: relative;
    height: calc(55% - 0rem);
    width: calc(100% - 5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #303030;
}
.ArticlesSection .ArticleBox1 .LeftSection .Top .Cover{
    position: relative;
    height: calc(65% - 0rem);
    width: calc(100% - 0rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-image: url(../asset/imgs/VT/A1s/1.jpg);
    background-size: cover;
    background-position: top;
}
.ArticlesSection .ArticleBox1 .LeftSection .Top .Cover .Lang{
    position: absolute;
    right: 0;
    height: 2.5rem;
    width: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "BLM-Mono-Med";
    font-size: 1.2rem;
    font-weight: normal;
    color: rebeccapurple;
    background-color: #C3D82B;
}

.ArticlesSection .ArticleBox1 .LeftSection .Top .title{
    position: relative;
    height: calc(35% - 0rem);
    width: calc(100% - 0rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #141414;
}
.ArticlesSection .ArticleBox1 .LeftSection .Top .title h1{
    margin-top: 2rem;
    padding: 0 2rem;
    font-family: "BLM-Reg" ;
    font-size: 2.6rem;
    font-weight: normal;
    color: #ECECEC;
}
.ArticlesSection .ArticleBox1 .LeftSection .Top .title .Bookmark{
    position: absolute;
    left: 0;
    margin-left: -.75rem;
    margin-top: 1rem;
    height: 2rem;
    width: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #C3D82B;
}
.ArticlesSection .ArticleBox1 .LeftSection .Bottom{
    position: relative;
    height: calc(45% - 5rem);
    width: calc(100% - 5rem);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: #141414;
}
.ArticlesSection .ArticleBox1 .LeftSection .Bottom .Cover{
    position: relative;
    height: calc(100% - 0rem);
    width: calc(60% - 0rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-image: url(../asset/imgs/VT/A1s/2.jpg);
    background-size: cover;
    background-position: center;
}
.ArticlesSection .ArticleBox1 .LeftSection .Bottom .Cover .Lang{
    position: absolute;
    right: 0;
    height: 2.5rem;
    width: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "BLM-Mono-Med";
    font-size: 1.2rem;
    font-weight: normal;
    color: rebeccapurple;
    background-color: #C3D82B;
}
.ArticlesSection .ArticleBox1 .LeftSection .Bottom .Title{
    position: relative;
    height: calc(100% - 0rem);
    width: calc(40% - 0rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #141414;
}
.ArticlesSection .ArticleBox1 .LeftSection .Bottom .Title h1{
    padding: 0 2rem;
    font-family: "BLM-Reg" ;
    font-size: 2.6rem;
    font-weight: normal;
    color: #ECECEC;
}
.ArticlesSection .ArticleBox1 .RightSection{
    position: relative;
    height: calc(100% - 0rem);
    width: calc(50% - 0rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.ArticlesSection .ArticleBox1 .RightSection .Top{
    position: relative;
    height: calc(65% - 0rem);
    width: calc(100% - 5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.ArticlesSection .ArticleBox1 .RightSection .Top .MoreArticles{
    position: relative;
    height: calc(100% - 0rem);
    width: calc(100% - 0rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ArticlesSection .ArticleBox1 .RightSection .Top .MoreArticles .Article{
    position: relative;
    height: calc(calc(100% / 3 ) - 5%);
    width: calc(100% - 0rem);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #141414;
    margin-top: 5%;
}
.ArticlesSection .ArticleBox1 .RightSection .Top .MoreArticles .Article .Cover{
    position: relative;
    height: calc(100%);
    width: calc(30% - 0rem);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.ArticlesSection .ArticleBox1 .RightSection .Top .MoreArticles .Article .Title{
    position: relative;
    height: calc(100%);
    width: calc(70% - 2rem);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.ArticlesSection .ArticleBox1 .RightSection .Top .MoreArticles .Article .Title  h1{
    padding: 0 2rem;
    font-family: "BLM-Reg" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.ArticlesSection .ArticleBox1 .RightSection .Top .MoreArticles .Article:nth-child(1) .Cover{
    background-image: url(../asset/imgs/VT/A1s/4.jpg);
    background-size: cover;
    background-position: center;
}
.ArticlesSection .ArticleBox1 .RightSection .Top .MoreArticles .Article:nth-child(2)  .Cover{
    background-image: url(../asset/imgs/VT/A1s/5.jpg);
    background-size: cover;
    background-position: center;
}
.ArticlesSection .ArticleBox1 .RightSection .Top .MoreArticles .Article:nth-child(3)  .Cover{
    background-image: url(../asset/imgs/VT/A1s/6.jpg);
    background-size: cover;
    background-position: center;
}

.ArticlesSection .ArticleBox1 .RightSection .Bottom{
    position: relative;
    height: calc(35% - 5rem);
    width: calc(100% - 5rem);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.ArticlesSection .ArticleBox1 .RightSection .Bottom .Cover{
    position: relative;
    height: calc(100% - 0rem);
    width: calc(50% - 0rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-image: url(../asset/imgs/VT/A1s/3.jpg);
    background-size: cover;
    background-position: center;
}
.ArticlesSection .ArticleBox1 .RightSection .Bottom .Cover .Lang{
    position: absolute;
    right: 0;
    height: 2.5rem;
    width: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "BLM-Mono-Med";
    font-size: 1.2rem;
    font-weight: normal;
    color: rebeccapurple;
    background-color: #C3D82B;
}
.ArticlesSection .ArticleBox1 .RightSection .Bottom .Title{
    position: relative;
    height: calc(100% - 0rem);
    width: calc(50% - 0rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #141414;
}
.ArticlesSection .ArticleBox1 .RightSection .Bottom .Title h1{
    padding: 0 2rem;
    font-family: "BLM-Reg" ;
    font-size: 2.6rem;
    font-weight: normal;
    color: #ECECEC;
    text-align: end;
}
.ArticlesSection .TextBox1{
    position: relative;
    height: calc(25%);
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ArticlesSection .TextBox1 .TopicIntro{
    padding-top: 1rem;
    font-family: "BLM-EL" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.introArticlesSection .TextBox2{
    position: relative;
    height: 40%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.introArticlesSection .TextBox2 .TopicIntro{
    padding-top: 1rem;
    font-family: "BLM-EL" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.introArticlesSection .ArticleBox2{
    position: relative;
    height: 60%;
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.introArticlesSection .ArticleBox2 .Articles{
    margin-top: -5rem;
    height: calc(100% - 5rem);
    width:  100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 2rem;
    /* background-color: #141414; */
}
.introArticlesSection .ArticleBox2 .Articles a{
    text-decoration: none;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection{
    width: calc(100% - 1.75rem);
    height: calc(100% - 1.75rem);
    margin-left: calc(1.75rem / 2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    background-color: #303030;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection .Left{
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection .Left .Cover{
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    border-radius: 1rem;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection .Right{
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection .Right h4{
    padding-top: 1rem;
    padding: 0 .5rem;
    font-family: "BLM-Reg" ;
    font-size: 1.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(1) .Left .Cover{
    background-image: url(../asset/imgs/VT/A2s/1.jpg);
    background-position: center;
    background-size: cover;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(2) .Left .Cover{
    background-image: url(../asset/imgs/VT/A2s/2.jpg);
    background-position: center;
    background-size: cover;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(3) .Left .Cover{
    background-image: url(../asset/imgs/VT/A2s/3.jpg);
    background-position: center;
    background-size: cover;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(4) .Left .Cover{
    background-image: url(../asset/imgs/VT/A2s/4.jpg);
    background-position: center;
    background-size: cover;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(5) .Left .Cover{
    background-image: url(../asset/imgs/VT/A2s/5.jpg);
    background-position: center;
    background-size: cover;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(6) .Left .Cover{
    background-image: url(../asset/imgs/VT/A2s/6.jpg);
    background-position: center;
    background-size: cover;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(7) .Left .Cover{
    background-image: url(../asset/imgs/VT/A2s/7.jpg);
    background-position: center;
    background-size: cover;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(8) .Left .Cover{
    background-image: url(../asset/imgs/VT/A2s/8.jpg);
    background-position: center;
    background-size: cover;
}
.introArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(9) .Left .Cover{
    background-image: url(../asset/imgs/VT/A2s/9.jpg);
    background-position: center;
    background-size: cover;
}




ul.transition{
    display: flex;
    position: absolute;
    z-index: 90;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0;
    pointer-events: none;
}

ul.transition li{
    transform: scaleY(0);
    background: tomato;
    width: 20%;
}

/* .loader{
    z-index: 9999;
    position: fixed;
    height: 100vh;
    width: 100vw;
    border-radius: 0 0 0rem 0rem;
    transform: translateY(0%) scaleX(2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #ECECEC;
}
.loader h1 {
    position: absolute;
    font-family: "BLM-Semi" ;
    font-size: 5rem;
    transform: translateY(0%) scaleX(.5);
    font-weight: bolder;
    color: #0d0d0d;
} */


/* Project Presentaions Section */
.ProjPresent{
    position: absolute;
    height: 300%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #0d0d0d;
}
.ProjectE5{
    position: absolute;
    height: 400%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #0d0d0d;
}
.reVarePresent{
    position: absolute;
    height: 200%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #0d0d0d;
}
.ProjPresentSection1{
    position: relative;
    height: 90%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.ProjPresentSection1 .ProjectCover{
    position: relative;
    margin-top: 4rem;
    height: calc(65% - 4rem);
    width: calc(100% - 28rem);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 2rem;
    background-size: cover;
    background-position: center;
}
.ProjPresentSection1 .INVENTCover1{
    background-image: url(../asset/imgs/project-covers/Proj-Cover-INVENT-1.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection1 .NotePlusCover1{
    background-image: url(../asset/imgs/project-covers/Proj-Cover-NP-1.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection1 .DO7Cover1{
    background-image: url(../asset/imgs/project-covers/Proj-Cover-D07-1.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection1 .WeatherAppCover1{
    background-image: url(../asset/imgs/project-covers/Proj-Cover-WA-1.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection1 .VareCover1{
    background-image: url(../asset/imgs/project-covers/Proj-Cover-Vare-1.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection1 .ProjectCover .ProjPresentHeadingSection{
    position: absolute;
    bottom: 0;
    height: 40%;
    width: 40%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0 2rem 0 0;
    background-color: #0d0d0d;
}
.ProjPresentSection1 .ProjectCover .ProjPresentHeadingSection #ProjPresentTitle{
    font-family: "BLM-Semi" ;
    font-size: 5rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjPresentSection1 .ProjectCover .ProjPresentHeadingSection #ProjPresentTitle span{
    position: absolute;
    font-family: "BLM-Book" ;
    font-size: 1.5rem;
    font-weight: normal;
    color: #ECECEC;
}

.ProjPresentSection1 .ProjectContext{
    margin-top: 4rem;
    height: calc(35% - 4rem);
    width: calc(100% - 28rem);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.ProjPresentSection1 .ProjectContext .ContextBox{
    height: 100%;
    width: 20%;
}
.ProjPresentSection1 .ProjectContext .ContextBox h3{
    margin-top: 2rem;
    font-family: "BLM-M" ;
    font-size: 2.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjPresentSection1 .ProjectContext .Context{
    height: 100%;
    width: 80%;
}
.ProjPresentSection1 .ProjectContext .Context P{
    margin-top: 2rem;
    font-family: "BLM-L" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjPresentSection1 .ProjectContext .Context P span a{
    color: #ECECEC;
}
.ProjPresentSection2{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.ProjPresentSection2 .LeftSection{
    height: 100%;
    width: calc(50% - 14rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.ProjPresentSection2 .LeftSection .Disc1{
    height: 50%;
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.ProjPresentSection2 .LeftSection .PD07{
    height: 40%;
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.ProjPresentSection2 .LeftSection .Disc1 h3{
    margin-top: 2rem;
    font-family: "BLM-M" ;
    font-size: 2.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjPresentSection2 .LeftSection .Invent h3{
    margin-top: -2rem;
}
.ProjPresentSection2 .LeftSection .Disc1 p{
    margin-top: 2rem;
    font-family: "BLM-L" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjPresentSection2 .LeftSection .Disc1 a{
    margin-top: 5rem;
    width:14rem;
    height: 5rem;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ProjPresentSection2 .LeftSection .Disc1 a button{
    height: 4rem;
    width: 100%;
    padding: 0 1rem;
    background-color: rgb(231, 205, 157);
    border: none;
    border-radius: 1rem;
    font-family: "BLM-M" ;
    font-size: 1.3rem;
    font-weight: normal;
    color: #141414;
    cursor: pointer;
}
.ProjPresentSection2 .LeftSection .WADisc1{
    margin-top: -6rem;
}
.ProjPresentSection2 .RightSection{
    height: 100%;
    width: calc(50% - 14rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.ProjPresentSection2 .RightSection .ProductCover1{
    height: 65%;
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 2rem;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.ProjPresentSection2 .RightSection .ProductCover1 video{
    position: relative;
    width: 100%;
    height: 100%;
}
.ProjPresentSection3{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.ProjPresentSection3 .LeftSection{
    height: 100%;
    width: calc(50% - 14rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.ProjPresentSection3 .LeftSection .ProductCover2{
    height: 65%;
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 2rem;
    background-image: url(../asset/imgs/5.jpg);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection3 .LeftSection .INVENTCover3{
    z-index: 13;
    background-image: url(../asset/imgs/project-covers/Proj-Cover-INVENT-3.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection3 .LeftSection .NotePlusCover3{
    z-index: 13;
    background-image: url(../asset/imgs/project-covers/Proj-Cover-NP-3.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection3 .LeftSection .DO7Cover3{
    z-index: 13;
    background-image: url(../asset/imgs/project-covers/Proj-Cover-D07-3.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection3 .LeftSection .WeatherAppCover3{
    z-index: 13;
    background-image: url(../asset/imgs/project-covers/Proj-Cover-WA-3.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection3 .LeftSection .VareCover3{
    z-index: 13;
    background-image: url(../asset/imgs/project-covers/Proj-Cover-Vare-3.png);
    background-size: cover;
    background-position: center;
}
.ProjPresentSection3 .RightSection{
    position: relative;
    height: 100%;
    width: calc(50% - 14rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.ProjPresentSection3 .RightSection .Disc2{
    margin-top: calc(35% / 2);
    height: 40%;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.ProjPresentSection3 .RightSection .Disc2 h3{
    margin-top: 2rem;
    font-family: "BLM-M" ;
    font-size: 2.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjPresentSection3 .RightSection .Disc2 p{
    z-index: 10;
    margin-top: 2rem;
    font-family: "BLM-L" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjPresentSection3 .RightSection .Disc3{
    position: absolute;
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    bottom: 0;
    background-color: #0d0d0d;
    border-radius: 2rem;
    margin-right: 50%;
    margin-bottom: 13%;
}
.ProjPresentSection3 .RightSection .Disc3 h3{
    margin-top: 2rem;
    font-family: "BLM-M" ;
    font-size: 2.5rem;
    font-weight: normal;
    color: #ECECEC;
    margin-left: 20%;
    margin-top: 15%;
}
.ProjPresentSection3 .RightSection .Disc3 p{
    margin-top: 2rem;
    font-family: "BLM-L" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
    margin-left: 20%;
}

.ProjE5 {
    margin-left: 14rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.ProjPresentSection3 .SkillsWorked {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 90%;
    width: calc(100% - 28rem);
}
.ProjPresentSection3 .SkillsWorked h1 {
    font-family: "BLM-M" ;
    font-size: 2.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjPresentSection3 .SkillsWorked h2 {
    margin-top: 3%;
    padding: 0 5rem;
    font-family: "BLM-Reg" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.ProjPresentSection3 .SkillsWorked p {
    margin-top: 1%;
    padding: 0 5rem;
    font-family: "BLM-L" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}
.AboutApp{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.AboutApp p{
    width: calc(100% - 28rem);
    height: auto;
    margin-top: 16rem;
    font-family: "BLM-L" ;
    font-size: 1.8rem;
    font-weight: normal;
    color: #ECECEC;
}
/* Project Presentaion footer */
.FooterTS{
    margin-left: 14rem;
    bottom: 0;
    position: absolute;
    height: 10%;
    width: calc(100% - 28rem);
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.AboutFooter{
    bottom: 0;
    position: absolute;
    height: 10%;
    width: calc(100% - 28rem);
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.AboutFooter h1{
    text-transform: uppercase;
    font-family: "BLM-Book" ;
    font-size: 1rem;
    font-weight: normal;
    color: #ECECEC;
}

.AboutApp .Btns{
    margin-top: 7rem;
    height: 10rem;
    width: calc(100% - 28rem);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.AboutApp .Btns a{
    margin-right: 5rem;
    height: calc(100% - 5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    width: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dfdfdf;
    text-decoration: none;
    transition: .3s all ease-in-out;
}
.AboutApp .Btns .GitHub{
    background-color: #dfdfdf;
    transition: .3s all ease-in-out;
}
.AboutApp .Btns .GitHub:hover{
    background-color: #ffffff;
    transition: .3s all ease-in-out;
}
.AboutApp .Btns a:hover{
    text-decoration: underline;
    background-color: #ffffff;
    transition: .3s all ease-in-out;
}
.AboutApp .Btns a h1{
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    text-decoration: none;
    font-family: "BLM-M" ;
    font-size: 1.2rem;
    font-weight: normal;
    color: #0D0D0D;
}
.AboutApp .Btns a h1 span{
    margin-left: 1rem;
}


/* Tableau de Synthèse Section */
.TSMain{
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #0d0d0d;
}
.TSSection{
    position: relative;
    height: calc(calc(90% / 100) * 20);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.TSSection .TSHeadingSection{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.TSSection .TSHeadingSection #TS{
    font-family: "BLM-Semi" ;
    font-size: 5rem;
    font-weight: normal;
    color: #ECECEC;
    margin-left: 14rem;
}
.TSSection .TSHeadingSection #TS span{
    position: absolute;
    font-family: "BLM-Book" ;
    font-size: 1.5rem;
    font-weight: normal;
    color: #ECECEC;
}
.TableauSynthSection{
    position: relative;
    height: calc(calc(90% / 100) * 80);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.TableauSynthSection p{
    width: calc(100% - 28rem);
    margin-left: 14rem;
    margin-top: 5rem;
    font-family: "BLM-L" ;
    font-size: 2rem;
    font-weight: normal;
    color: #ECECEC;
}
.TableauSynthSection a{
    margin-left: 14rem;
    margin-top: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 20rem;
    font-family: "BLM-Book" ;
    font-size: 1.8rem;
    color: #0D0D0D;
    border-radius: 1rem;
    background-color: #ECECEC;
    text-decoration: none;
}