@media only screen and (max-width: 912px) {
    .main{
        display: none;
    }
    .aboutMain{
        display: none;
    }
    .TSMain{
        display: none;
    }
    .VTMain{
        display: none;
    }
    .ProjPresent{
        display: none;
    }
    .ProjectE5{
        display: none;
    }

    .resMain{
        display: block;
        position: absolute;
        height: 100%;
        width: 100vw;
        background-color: #0d0d0d;
    }
    .resProjPresent{
        position: absolute;
        height: 100%;
        width: 100vw;
        background-color: #0d0d0d;
    }



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

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

    .resMidSection{
        position: relative;
        height: 80%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: tan;
    }
    .resMidSection .NameSection{
        /* scale: .35; --------------------------------------------------------------------------------- */
        transform: scale(.35);
        position: absolute;
        top: 22vh;
        height: 300px;
        width: 1000px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .resMidSection .NameSection .name{
        position: fixed;
        font-family: "BLM-Bold" ;
        font-size: 100px;
        text-transform: uppercase;
        font-weight: normal;
        color: #ECECEC;
        resize: none;
    }
    .resMidSection .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;
    }
    .resMidSection .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;
    }

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

    /* NAV BOX */
    .resNavBox{
        overflow: hidden;
        position: fixed;
        opacity: 0;
        transform: translateY(-100%);
        /* display: none; */
        z-index: 11;
        height: 100vh;
        width: 100vw;
        border-radius: 0 0 2rem 2rem;
        background-color: #ECECEC;
        transition: all .5s ease-out;
    }
    .resNavBox .NavHeaderSection{
        z-index: 11;
        position: absolute;
        height: 10%;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: end;
    }
    .resNavBox .NavHeaderSection h1{
        cursor: pointer;
        margin-top: 4rem;
        margin-right: 3rem;
        font-family: "BLM-Book" ;
        font-size: 1.6rem;
        font-weight: normal;
        color: #0d0d0d;
    }
    .resNavBox .NavFooterSection{
        z-index: 11;
        bottom: 0;
        position: absolute;
        height: 10%;
        width: 100%;
        display: flex;
        justify-content: end;
        align-items: flex-end;
    }
    .resNavBox .NavFooterSection h1{
        text-transform: uppercase;
        font-family: "BLM-Reg" ;
        font-size: 1rem;
        font-weight: normal;
        color: #0d0d0d;
        margin-bottom: 3rem;
        margin-right: 3rem;
    }
    .resNavBox .NavMidSection{
        z-index: 10;
        margin-top: 40%;
        position: absolute;
        height: 100vh;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .resNavBox .NavMidSection .resNavLinks{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2%;
    }
    .resNavBox .NavMidSection .resNavLinks a{
        margin-right: 3rem;
        width: calc(100% - 6rem);
        height: 10%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
        text-decoration: none;
    }
    .resNavBox .NavMidSection .resNavLinks a h1{
        text-align: center;
        cursor: pointer;
        font-family: "BLM-Reg" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #0d0d0d;
        overflow: hidden;
    }
    .resNavBox .NavMidSection .resNavLinks a h1 span{
        cursor: pointer;
        font-family: "BLM-Reg" ;
        font-size: 1.05rem;
        position: absolute;
        font-weight: normal;
        color: #0d0d0d;
    }
    #resClose{
        opacity: 1;
        /* transform: translateX(400px);
        transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);; */
    }
    #resNavs{
        opacity: 1;
        /* transform: translateX(400px);
        transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);; */
    }
    #resfooterNav{
        opacity: 1;
        /* transform: translateX(400px);
        transition: all 1.5s cubic-bezier(0.03,0.22,0.19,1);; */
    }

    /* Projects Section */
    .resProjSection{
        position: relative;
        height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .resProjSection .ProjHeadingSection{
        height: 15%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .resProjSection .ProjHeadingSection #Projects{
        font-family: "BLM-Semi" ;
        font-size: 5rem;
        font-weight: normal;
        color: #ECECEC;
        margin-left: 3rem;
    }
    .resProjSection .ProjHeadingSection #Projects span{
        position: absolute;
        font-family: "BLM-Book" ;
        font-size: 1.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjSection .resProjectBox{
        /* padding-top: 10rem; */
        margin-top: 40%;
        position: absolute;
        height:300%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .resProjSection .resProjectBox .ProjectsPanel{
        position: relative;
        height: 100%;
        width: calc(100% - 6rem);
        gap: 2%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project{
        height:100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0px;
        transition: width .8 ease;

    }
    .resProjSection .resProjectBox .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;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project .innerGrad .ProjectNameBox {
        height: 3rem;
        width: 17rem;
        position: absolute;
        display: flex;
        justify-content: start;
        align-items: center;
        transform: rotateZ(-90deg) translate(55%, 150%);
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project .NameSelBox {
        display: flex;
        justify-content: end;
        align-items: flex-end;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project .NameSelBox .NameSel {
        width: auto;
        transform: rotateZ(0deg) translate(-30%, -55%);
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project .innerGrad .ProjectNameBox .ProjName{
        font-family: "BLM-Semi" ;
        font-size: 2.3rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project .innerGrad .ProjectNameBox .ProjName span{
        position: absolute;
        font-family: "BLM-Book" ;
        font-size: 1rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjSection .resProjectBox .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;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project .innerGrad .cursor .outerCirc h1{
        font-family: "BLM-Mono-Med" ;
        font-size: 1rem;
        font-weight: normal;
        color: #0d0d0d;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project:nth-child(1){
        background-image: url(../asset/imgs/project-covers/ProjCover1.jpg);
        background-size: cover;
        background-position: center;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project:nth-child(2){
        background-image: url(../asset/imgs/project-covers/ProjCover2.jpg);
        background-size: cover;
        background-position: center;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project:nth-child(3){
        background-image: url(../asset/imgs/project-covers/ProjCover3.jpg);
        background-size: cover;
        background-position: center;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project:nth-child(4){
        background-image: url(../asset/imgs/project-covers/ProjCover4.jpg);
        background-size: cover;
        background-position: center;
    }
    .resProjSection .resProjectBox .ProjectsPanel .Project:nth-child(5){
        background-image: url(../asset/imgs/project-covers/ProjCover5.jpg);
        background-size: cover;
        background-position: center;
    }

    /* About Section */
    .resAboutMain{
        position: absolute;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #0d0d0d;
    }
    .resBioSection{
        position: relative;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .resBioSection .pageTitleSection{
        height: 15%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .resBioSection .pageTitleSection #About{
        margin-top: 14%;
        font-family: "BLM-Semi" ;
        font-size: 5rem;
        font-weight: normal;
        color: #ECECEC;
        margin-left: 3rem;
    }
    .resBioSection .pageTitleSection #About span{
        position: absolute;
        font-family: "BLM-Book" ;
        font-size: 1.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resBioSection .NameBox{
        height: auto;
        width: calc(100% - 6rem);
        margin-left: 3rem;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
    .resBioSection .NameBox h4{
        margin-top:3rem;
        font-family: "BLM-M" ;
        font-size: 2rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resBioSection .NameBox h1{
        margin-top: 1rem;
        font-family: "BLM-Bold" ;
        font-size: 3.5rem;
        font-weight: normal;
        /* color: #ECECEC; */
        /* color: #995dd7; */
        background: linear-gradient(57deg, rgb(233, 233, 233) 0%, rgb(149, 198, 218) 50%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .resBioSection .aboutBox {
        position: relative;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .resBioSection .aboutBox #Bio{
        font-family: "BLM-L" ;
        font-size: 1.6rem;
        font-weight: lighter;
        color: #ECECEC;
        /* margin-left: 14rem; */
        margin-top: 4rem;
        width:  calc(100% - 6rem);
        height: auto;
        overflow: hidden;
        text-align: start;
        text-align-last: left;
    }
    .resBioSection .BtnBox{
        margin-left: 3rem;
        margin-top: 3rem;
        height: auto;
        width:  calc(100% - 6rem);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
    .resBioSection.BtnBox a{
        text-decoration: none;
        height: auto;
        width: auto;
        display: flex;
        border-radius: .9rem;
        justify-content: center;
        align-items: center;
    }
    .resBioSection .BtnBox a button{
        height: 4rem;
        width: 15rem;
        font-size: 1.6rem;
        font-family: "BLM-M";
        background-color: #ECECEC;
        color: #0d0d0d;
        border-radius: .9rem;
    }
    .resBioSection .BtnBox a button:hover{
        background-color: #e7e9d3;
    }

    .MyTab1{
    margin-top: 10rem;
    position: relative;
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    }
    .MyTab1 .Title{
        position: relative;
        height: 10%;
        width: calc(100% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: flex-start;
        /* background-color: #C3D82B; */
    }
    .MyTab1 .Title h2{
        font-family: "BLM-Semi" ;
        font-size: 3rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .MyTab1 .Journey{
        position: relative;
        height: 100%;
        width: calc(100% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .MyTab1 .Journey .Pro{
        margin-top: 4rem;
        position: relative;
        height: calc(50% - 4rem);
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 1.5rem;
        background-color: #ececec04;
    }
    .MyTab1 .Journey .Pro .Icon{
        margin-top: 1rem;
        margin-bottom: 1rem;
        position: relative;
        height: 6rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 1.5rem;
    }
    .MyTab1 .Journey .Pro .Icon svg{
        height: 3rem;
        width: 3rem;
    }
    .MyTab1 .Journey .Pro .Exs{
        margin-top: 4rem;
        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:last-child{
        margin-bottom: 4rem;
    }
    .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: 0rem;
        font-family: "BLM-M" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .MyTab1 .Journey .Pro .Exs p{
        margin-top: 1rem;
        margin-left: 0rem;
        font-family: "BLM-L" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .MyTab1 .Journey .Ed{
        margin-top: 4rem;
        position: relative;
        height: calc(50% - 4rem);
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 1.5rem;
        background-color: #ececec04;
    }
    .MyTab1 .Journey .Ed .Icon{
        margin-top: 1rem;
        margin-bottom: 1rem;
        position: relative;
        height: 6rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 1.5rem;
    }
    .MyTab1 .Journey .Ed .Icon svg{
        height: 3rem;
        width: 3rem;
    }
    .MyTab1 .Journey .Ed .Cours{
        margin-top: 4rem;
        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:last-child{
        margin-bottom: 4rem;
    }
    .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: 0rem;
        font-family: "BLM-M" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .MyTab1 .Journey .Ed .Cours p{
        margin-top: 1rem;
        margin-left: 0rem;
        font-family: "BLM-L" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .MyTab2{
        margin-top: 8rem;
        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% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: flex-start;
        /* background-color: #C3D82B; */
    }
    .MyTab2 .Title h2{
        font-family: "BLM-Semi" ;
        font-size: 3rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .MyTab2 .SkillSets{
        position: relative;
        height: 75%;
        width: calc(100% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .MyTab2 .SkillSets .Skills{
        position: relative;
        height: calc(calc(100% / 3) - 0rem);
        width: calc(100% - 2rem) ;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 1rem;
        background-color: #ececec04;
        border-radius: 1.5rem;
        margin-top: 4rem;
    }
    .MyTab2 .SkillSets .Skills h3{
        margin-top: 1rem;
        font-family: "BLM-Reg" ;
        font-size: 2.2rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .MyTab2 .SkillSets .Skills p{
        margin-top: 2rem;
        font-family: "BLM-L" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resMyTab3{
        position: relative;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-top: 7rem;
    }
    .resMyTab3 .GIT{
        height: 45%;
        width: calc(100% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        align-items: flex-start;
    }
    .resMyTab3 .GIT .QuoteBox{
        height:50%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        align-items: center;
    }
    .resMyTab3 .GIT .QuoteBox h2{
        font-family: "BLM-Bold" ;
        text-align: center;
        font-size: 2.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resMyTab3 .GIT .QuoteBox h6{
        margin-top: 2rem;
        font-family: "BLM-L" ;
        text-align: center;
        font-size: 1.5rem;
        font-weight: normal;
        color: #ECECEC;
        margin-bottom: 5rem;
    }
    .resMyTab3 .contact{
        position: relative;
        height: auto;
        width: calc(100% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .resMyTab3 .contact .leftSection{
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .resMyTab3 .contact .leftSection #Quest{
        font-family: "BLM-L" ;
        font-size: 1.6rem;
        font-weight: normal;
        color: #ECECEC;
        margin-bottom: 15%;

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

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

    /* Project Section */
    .resProjPresentSection1{
        position: relative;
        height: 90%;
        margin-left: 3rem;
        width: calc(100% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .resProjPresentSection1 .ProjectCover{
        position: relative;
        margin-top: 4rem;
        height: calc(65% - 4rem);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1rem;
        background-image: url(../asset/imgs/1.jpg);
        background-size: cover;
        background-position: center;
    }
    .resProjPresentSection1 .INVENTCover1{
        background-image: url(../asset/imgs/project-covers/Proj-Cover-INVENT-1.png);
    }
    .resProjPresentSection1 .NotePlusCover1{
        background-image: url(../asset/imgs/project-covers/Proj-Cover-NP-1.png);
    }
    .resProjPresentSection1 .DO7Cover1{
        background-image: url(../asset/imgs/project-covers/Proj-Cover-D07-1.png);
    }
    .resProjPresentSection1 .WeatherAppCover1{
        background-image: url(../asset/imgs/project-covers/Proj-Cover-WA-1.png);
    }
    .resProjPresentSection1 .VareCover1{
        background-image: url(../asset/imgs/project-covers/ProjCover5.jpg);

    }
    .resProjPresentSection1 .ProjectCover .ProjPresentHeadingSection{
        position: absolute;
        bottom: 0;
        height: 40%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: #0d0d0d;
    }
    .resProjPresentSection1 .ProjectCover .ProjPresentHeadingSection #ProjPresentTitle{
        font-family: "BLM-Semi" ;
        font-size: 5rem;
        font-weight: normal;
        color: #ECECEC;
        /* margin-left: 14rem; */
    }
    .resProjPresentSection1 .ProjectCover .ProjPresentHeadingSection #ProjPresentTitle span{
        position: absolute;
        font-family: "BLM-Book" ;
        font-size: 1.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjPresentSection1 .ProjectContext{
        margin-top: 4rem;
        height: calc(35% - 4rem);
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .resProjPresentSection1 .ProjectContext .ContextBox{
        height: 100%;
        width: 100%;
    }
    .resProjPresentSection1 .ProjectContext .ContextBox h3{
        margin-top: 2rem;
        font-family: "BLM-M" ;
        font-size: 2.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjPresentSection1 .ProjectContext .Context{
        height: 100%;
        width: 100%;
    }
    .resProjPresentSection1 .ProjectContext .Context P{
        margin-top: 2rem;
        font-family: "BLM-L" ;
        font-size: 1.6rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjPresentSection1 .ProjectContext .Context P span a{
        color: #ECECEC;
    }
    .resProjPresentSection2{
        margin-top: 5rem;
        height: 100%;
        width: calc(100% - 6rem);
        margin-left: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .ProjE52 .LeftSection{
        margin-top: 30rem;
    }
    .resProjPresentSection2 .LeftSection{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .resProjPresentSection2 .LeftSection .Disc1{
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .resProjPresentSection2 .LeftSection .PD07{
        height: 40%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .resProjPresentSection2 .LeftSection .Disc1 h3{
        margin-top: 2rem;
        font-family: "BLM-M" ;
        font-size: 2.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjPresentSection2 .LeftSection .Disc1 p{
        margin-top: 2rem;
        font-family: "BLM-L" ;
        font-size: 1.6rem;
        font-weight: normal;
        color: #ECECEC;
    }
    /* come back */
    .resProjPresentSection2 .LeftSection .Disc1 a{
        margin-top: 5rem;
        width:14rem;
        height: 5rem;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .resProjPresentSection2 .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;
    }
    /* come back */
    .resProjPresentSection2 .LeftSection .WADisc1{
        margin-top: -6rem;
    }
    .resProjPresentSection2 .RightSection{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }
    .resProjPresentSection2 .RightSection .ProductCover1{
        height: 65%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 1rem;
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }
    .resProjPresentSection2 .RightSection .ProductCover1 video{
        position: relative;
        width: 140%;
        height: 140%;
    }
    .resProjPresentSection3{
        height: 100%;
        width: calc(100% - 6rem);
        margin-left: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .VarePresent3 .RightSection{
        margin-top:10rem;
    }
    .ProjE53 .RightSection{
        margin-top: 15rem;
    }
    .resProjPresentSection3 .RightSection{
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .resProjPresentSection3 .RightSection .Disc2{
        margin-top: calc(35% / 2);
        height: 40%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .resProjPresentSection3 .RightSection .Disc2 h3{
        margin-top: 2rem;
        font-family: "BLM-M" ;
        font-size: 2.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjPresentSection3 .RightSection .Disc2 p{
        margin-top: 2rem;
        font-family: "BLM-L" ;
        font-size: 1.6rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjPresentSection3 .RightSection .Disc3{
        position: relative;
        height: 40%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        bottom: 0;
        background-color: #0d0d0d;
    }
    .resProjPresentSection3 .RightSection .Disc3 h3{
        font-family: "BLM-M" ;
        font-size: 2.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjPresentSection3 .RightSection .Disc3 p{
        margin-top: 2rem;
        font-family: "BLM-L" ;
        font-size: 1.6rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjPresentSection3 .RightSection .Disc3 p{
        margin-top: 2rem;
        font-family: "BLM-L" ;
        font-size: 1.6rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resAboutApp{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .resAboutApp .resAboutAppSection{
        position: relative;
        height: 90%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        bottom: 0;
    }
    .resAboutApp .resAboutAppSection p{
        width: 100%;
        height: auto;
        font-family: "BLM-L" ;
        font-size: 1.6rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resAboutApp .resAboutAppSection .Btns{
        margin-top: 7rem;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .resAboutApp .resAboutAppSection .Btns a{
        margin-top: 0rem;
        height: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1rem;
        width: 20rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #dfdfdf;
        text-decoration: none;
        transition: .3s all ease-in-out;
    }
    .resAboutApp .resAboutAppSection .Btns .GitHub{
        margin-bottom: 2rem;
        background-color: #dfdfdf;
        transition: .3s all ease-in-out;
    }
    .resAboutApp .resAboutAppSection .Btns .GitHub:hover{
        background-color: #ffffff;
        transition: .3s all ease-in-out;
    }
    .resAboutApp .resAboutAppSection .Btns a:hover{
        text-decoration: underline;
        background-color: #ffffff;
        transition: .3s all ease-in-out;
    }
    .resAboutApp .resAboutAppSection .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;
    }
    .resAboutApp .resAboutAppSection .Btns a h1 span{
        margin-left: 1rem;
    }
    .resAboutApp .resAboutFooter{
        position: relative;
        height: 10%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 0;
    }
    .resAboutApp .resAboutFooter h1{
        text-transform: uppercase;
        font-family: "BLM-Book" ;
        font-size: 1rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjE5{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .resProjE5 .resSkillsWorked{
        height: auto;
        width: calc(100% - 6rem);
    }
    .resProjE5 .resSkillsWorked h1 {
        font-family: "BLM-M" ;
        font-size: 2.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjE5 .resSkillsWorked h2 {
        margin-top: 4%;
        font-family: "BLM-Reg" ;
        font-size: 2rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjE5 .resSkillsWorked p {
        margin-top: 2%;
        font-family: "BLM-L" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resProjE5 .resAboutFooter{
        position: relative;
        margin-top: 2rem;
        height: 10%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 0;

    }
    .resProjE5 .resAboutFooter h1{
        padding: 10% 0;
        text-transform: uppercase;
        font-family: "BLM-Book" ;
        font-size: 1rem;
        font-weight: normal;
        color: #ECECEC;
    }

    /* TS Section */
    .resTSMain{
        position: absolute;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #0d0d0d;
    }



    .resTSSection{
        margin-top: 7rem;
        position: relative;
        height: 18%;
        width: calc(100% - 6rem);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-left: 3rem;
        /* background-color: #f7dfb3; */
    }
    .resTSSection .TSHeadingSection{
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .resTSSection .TSHeadingSection #TS{
        font-family: "BLM-Semi" ;
        font-size: 5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resTSSection .TSHeadingSection #TS span{
        position: absolute;
        font-family: "BLM-Book" ;
        font-size: 1.5rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resTableauSynthSection{
        height: 100%;
        width: calc(100% - 6rem);
        margin-left: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
    }
    .resTableauSynthSection p{
        margin-top: 3rem;
        font-family: "BLM-L" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resTableauSynthSection a{
        margin-top: 3rem;
        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;
    }
    .resTableauSynthSection .resFooterTS{
        position: absolute;
        width: 100%;
        margin-left: -3rem;
        bottom: 0;
    }

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


    /* VTech Section */


    .resVTMain{
        position: absolute;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #0d0d0d;
    }


    .resVTSection{
        position: relative;
        height: 90%;
        width: calc(100% - 6rem);
        margin-left: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .resVTSection .VTHeadingSection{
        position: relative;
    }
    .resVTSection .VTHeadingSection #Vtech{
        font-family: "BLM-Semi" ;
        font-size: 4rem;
        font-weight: normal;
        color: #ECECEC;
        margin-top: 3rem;
    }
    .resVTSection .VTHeadingSection #Vtech span{
        position: absolute;
        font-size: 1.5rem;
    }
    .resVTSection .Q1Section{
        margin-top: 5rem;
    }
    .resVTSection .Q1Section .Q1{
        font-family: "BLM-L" ;
        font-size: 2.2rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resVTSection .Q1Section .P1{
        padding-top: 2rem;
        font-family: "BLM-EL" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resVTSection .Q2Section{
        margin-top: 5rem;
    }
    .resVTSection .Q2Section .Q2{
        font-family: "BLM-L" ;
        font-size: 2.2rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resVTSection .Q2Section .P2{
        padding-top: 2rem;
        font-family: "BLM-EL" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }

    .resMyMethodsSection{
        position: relative;
        height: 100%;
        width: calc(100% - 6rem);
        margin-left: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .resMyMethodsSection .MyMethods{
        margin-top: 5rem;
    }
    .resMyMethodsSection .MyMethods .Q2{
        font-family: "BLM-L" ;
        font-size: 2rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resMyMethodsSection .MyMethods .P2{
        padding-top: 3rem;
        font-family: "BLM-EL" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resMyMethodsSection .TopicSection{
        margin-top: 10rem;
        height: 10%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .resMyMethodsSection .TopicSection .myTopic{
        font-family: "BLM-M" ;
        font-size: 3rem;
        font-weight: normal;
        color: #ECECEC;
        text-align: center;
    }

    .resMyTopicSection{
        position: relative;
        height: 100%;
        width: calc(100% - 6rem);
        margin-left: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .resMyTopicSection .TopicCoverSection{
        position: relative;
        margin-top: 7rem;
        height: 30rem;
        width: 100%;
        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;

    }

    .resMyTopicSection .TopicCoverSection .Topic{
        position: absolute;
        bottom: 0;
        font-family: "BLM-Semi" ;
        font-size: 3rem;
        font-weight: normal;
        color: #ECECEC;
        z-index: 10;
        padding-top: 2rem;
        width: 100%;
        background-color: #0D0D0D;
    }
    .resMyTopicSection .TopicCoverSection .ImageCredit{
        position: absolute;
        height: 4.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        right: 0;
        top: 0;
        background-color: #0d0d0d;
        border-radius: 0 0 0 1rem ;
    }
    .resMyTopicSection .TopicCoverSection .ImageCredit h1{
        font-family: "BLM-Mono-Med" ;
        font-size: 1.1rem;
        font-weight: normal;
        color: #C3D82B;
        text-align: end;
        padding-left: 1rem;
    }
    .resMyTopicSection .TopicIntroSection{
        height: 30%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        margin-top: 5rem;
    }
    .resMyTopicSection .TopicIntroSection .TopicIntro{
        padding-top: 1rem;
        font-family: "BLM-EL" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }

    .resIntroArticlesSection{
        position: relative;
        height: 100%;
        width: calc(100% - 6rem);
        margin-left: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .resIntroArticlesSection .TopicIntroSection{
        height: 30%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

    }
    .resIntroArticlesSection .TopicIntroSection .TopicIntro{
        padding-top: 1rem;
        font-family: "BLM-EL" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }



    .resArticlesSection{
        position: relative;
        height: 200%;
        width: calc(100% - 6rem);
        margin-left: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .resArticlesSection .ArticleBox1{
        margin-top: 5rem;
        position: relative;
        height: 70rem;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles{
        position: relative;
        height: calc(100% - 0rem);
        width: calc(100% - 0rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .resArticlesSection .ArticleBox1 .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: #ECECEC;
        margin-top: 5%;
        border-radius: 1.5rem;
        overflow: hidden;
        text-decoration: none;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles .Article .Cover{
        position: relative;
        height: calc(100%);
        width: calc(30% + 2rem);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles .Article .Title{
        position: relative;
        height: calc(100%);
        width: calc(70% - 2rem);
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles .Article .Title h4{
        padding-top: 1rem;
        margin-left: 1rem;
        font-family: "BLM-Reg" ;
        font-size: 1.5rem;
        font-weight: normal;
        color: #0D0D0D;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles .Article:nth-child(1) .Cover{
        background-image: url(../asset/imgs/VT/A1s/1.jpg);
        background-size: cover;
        background-position: center;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles .Article:nth-child(2)  .Cover{
        background-image: url(../asset/imgs/VT/A1s/2.jpg);
        background-size: cover;
        background-position: center;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles .Article:nth-child(3)  .Cover{
        background-image: url(../asset/imgs/VT/A1s/3.jpg);
        background-size: cover;
        background-position: center;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles .Article:nth-child(4) .Cover{
        background-image: url(../asset/imgs/VT/A1s/4.jpg);
        background-size: cover;
        background-position: center;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles .Article:nth-child(5)  .Cover{
        background-image: url(../asset/imgs/VT/A1s/5.jpg);
        background-size: cover;
        background-position: center;
    }
    .resArticlesSection .ArticleBox1 .MoreArticles .Article:nth-child(6)  .Cover{
        background-image: url(../asset/imgs/VT/A1s/6.jpg);
        background-size: cover;
        background-position: center;
    }

    .resArticlesSection .TextBox1{
        position: relative;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .resArticlesSection .TextBox1 .TopicIntro{
        padding-top: 5rem;
        font-family: "BLM-EL" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }

    .resIntroArticlesSection .TextBox2{
        position: relative;
        height: 40%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .resIntroArticlesSection .TextBox2 .TopicIntro{
        padding-top: 5rem;
        font-family: "BLM-EL" ;
        font-size: 1.8rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .resIntroArticlesSection .ArticleBox2{
        margin-top: 5rem;
        position: relative;
        height: 120rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles{
        height: calc(100% - 10rem);
        width:  100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection{
        width: 100%;
        height: calc(calc(100% / 9) - 2rem);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1.5rem;
        overflow: hidden;
        background-color: #ECECEC;
        text-decoration: none;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection .Left{
        width: calc(30% + 2rem);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection .Left .Cover{
        width: 100%;
        height: 100%;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection .Right{
        width: calc(70% - 2rem);
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection .Right h4{
        padding-top: 1rem;
        margin-left: 1rem;
        font-family: "BLM-Reg" ;
        font-size: 1.5rem;
        font-weight: normal;
        color: #0D0D0D;
    }
    .resIntroArticlesSection .ArticleBox2 .resFooterVT{
        position: relative;
        width: 100%;
    }

    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(1) .Left .Cover{
        background-image: url(../asset/imgs/VT/A2s/1.jpg);
        background-position: center;
        background-size: cover;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(2) .Left .Cover{
        background-image: url(../asset/imgs/VT/A2s/2.jpg);
        background-position: center;
        background-size: cover;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(3) .Left .Cover{
        background-image: url(../asset/imgs/VT/A2s/3.jpg);
        background-position: center;
        background-size: cover;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(4) .Left .Cover{
        background-image: url(../asset/imgs/VT/A2s/4.jpg);
        background-position: center;
        background-size: cover;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(5) .Left .Cover{
        background-image: url(../asset/imgs/VT/A2s/5.jpg);
        background-position: center;
        background-size: cover;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(6) .Left .Cover{
        background-image: url(../asset/imgs/VT/A2s/6.jpg);
        background-position: center;
        background-size: cover;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(7) .Left .Cover{
        background-image: url(../asset/imgs/VT/A2s/7.jpg);
        background-position: center;
        background-size: cover;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(8) .Left .Cover{
        background-image: url(../asset/imgs/VT/A2s/8.jpg);
        background-position: center;
        background-size: cover;
    }
    .resIntroArticlesSection .ArticleBox2 .Articles .ArticleSection:nth-child(9) .Left .Cover{
        background-image: url(../asset/imgs/VT/A2s/9.jpg);
        background-position: center;
        background-size: cover;
    }




}


@media only screen and (min-width: 1440px) {
    /* Project Section */
    .ProjSection .ProjHeadingSection #Projects{
        font-size: 7rem;
    }
    .ProjSection .ProjHeadingSection #Projects span{
        font-size: 2rem;
    }
    .ProjSection .ProjectBox .ProjectsPanel .Project .innerGrad .ProjectNameBox {
        height: 3rem;
        width: 30rem;
        transform: rotateZ(-90deg) translate(55%, 320%);
    }
    .ProjSection .ProjectBox .ProjectsPanel .Project .innerGrad .ProjectNameBox .ProjName{
        font-size: 4rem;
    }
    .ProjSection .ProjectBox .ProjectsPanel .Project .innerGrad .ProjectNameBox .ProjName span{
        font-size: 2rem;
    }
    /* Vtech Section */
    .VTSection .VTHeadingSection #Vtech{
        font-size: 7rem;
    }
    .VTSection .VTHeadingSection #Vtech span{
        font-size: 2rem;
    }
    .VTSection .Q1Section .Q1{
        font-size: 3.5rem;
    }
    .VTSection .Q1Section .P1{
        font-size: 2.7rem;
    }
    .VTSection .Q2Section .Q2{
        font-size: 3.5rem;
    }
    .VTSection .Q2Section .P2{
        font-size: 2.7rem;
    }
    .myMethodsSection .MyMethods .Q2{
        font-size: 3rem;
    }
    .myMethodsSection .MyMethods .P2{
        font-size: 2.7rem;
    }
    .myMethodsSection .TopicSection .myTopic{
        font-size: 4rem;
    }
    .myTopicSection .TopicCoverSection{
        border-radius:5rem;
    }
    .myTopicSection .TopicCoverSection .CoverSection{
        border-radius: 5rem;
    }
    .myTopicSection .TopicCoverSection .Topic{
        font-size: 8rem;
    }
    .myTopicSection .TopicCoverSection .ImageCredit{
        position: absolute;
        height: 6rem;
        width: auto;
        border-radius: 1rem 0 0 0;
    }
    .myTopicSection .TopicCoverSection .ImageCredit h1{
        font-size: 2rem;
        padding-left: 2rem;
    }
    .myTopicSection .TopicIntroSection .TopicIntro{
        font-size: 2.7rem;
    }
    .introArticlesSection .TopicIntroSection .TopicIntro{
        font-size: 2.7rem;
    }
    .ArticlesSection .ArticleBox1 .LeftSection .Top .Cover .Lang{
        height: 5rem;
        width: 12rem;
        font-size: 1.8rem;
        font-weight: bold;
        border-radius: 0 0 0 1rem;
    }
    .ArticlesSection .ArticleBox1 .LeftSection .Top .title .Bookmark{
        height: 2rem;
        width: 2rem;
    }
    .ArticlesSection .ArticleBox1 .LeftSection .Top .title h1{
        margin-top: 7rem;
        padding: 0 5rem;
        font-family: "BLM-Reg" ;
        font-size: 4rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .ArticlesSection .ArticleBox1 .LeftSection .Bottom .Cover .Lang{
        height: 5rem;
        width: 12rem;
        font-size: 1.8rem;
        font-weight: bold;
        border-radius: 0 0 0 1rem;
    }
    .ArticlesSection .ArticleBox1 .LeftSection .Bottom .Title h1{
        padding: 0 5rem;
        font-family: "BLM-Reg" ;
        font-size: 4rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .ArticlesSection .ArticleBox1 .RightSection .Bottom .Cover .Lang{
        height: 5rem;
        width: 12rem;
        font-size: 1.8rem;
        font-weight: bold;
        border-radius: 0 0 0 1rem;
    }
    .ArticlesSection .ArticleBox1 .RightSection .Bottom .Title h1{
        padding: 0 5rem;
        font-family: "BLM-Reg" ;
        font-size: 3.5rem;
        font-weight: normal;
        color: #ECECEC;
        text-align: end;
    }
    .ArticlesSection .ArticleBox1 .RightSection .Top .MoreArticles .Article .Title  h1{
        padding: 0 5rem;
        font-family: "BLM-Reg" ;
        font-size: 3rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .ArticlesSection .TextBox1 .TopicIntro{
        padding-top: 1rem;
        font-family: "BLM-EL" ;
        font-size: 2.7rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .introArticlesSection .TextBox2 .TopicIntro{
        padding-top: 1rem;
        font-family: "BLM-EL" ;
        font-size: 2.7rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .introArticlesSection .ArticleBox2 .Articles .ArticleSection .Right h4{
        padding-top: 1rem;
        padding: 0 2rem;
        font-family: "BLM-Reg" ;
        font-size: 2.5rem;
        font-weight: normal;
        color: #ECECEC;
    }

    /* ProjPresent Section */
    .ProjPresentSection1 .ProjectCover{
        border-radius: 4rem;
    }
    .ProjPresentSection1 .ProjectCover .ProjPresentHeadingSection{
        border-radius: 0 4rem 0 0;
    }
    .ProjPresentSection1 .ProjectCover .ProjPresentHeadingSection #ProjPresentTitle{
        font-size: 7rem;
    }
    .ProjPresentSection1 .ProjectCover .ProjPresentHeadingSection #ProjPresentTitle span{
        font-size: 2rem;
    }
    .ProjPresentSection1 .ProjectContext .ContextBox h3{
        font-size: 3.5rem;
    }
    .ProjPresentSection1 .ProjectContext .Context P{
        font-size: 2.5rem;
    }
    .ProjPresentSection2 .LeftSection .Disc1 h3{
        font-size: 3.5rem;
    }
    .ProjPresentSection2 .LeftSection .Disc1 p{
        font-size: 2.5rem;
    }
    .ProjPresentSection2 .LeftSection .Disc1 a{
        margin-top: 5rem;
        width: 20rem;
        height: 5rem;
    }
    .ProjPresentSection2 .LeftSection .Disc1 a button{
        height: 5rem;
        padding: 0 2rem;
        border-radius: 1.5rem;
        font-size: 2rem;
    }
    .ProjPresentSection2 .RightSection .ProductCover1{
        border-radius: 4rem;
    }
    .ProjPresentSection3 .LeftSection .ProductCover2{
        border-radius: 4rem;
    }
    .ProjPresentSection3 .RightSection .Disc2 h3{
        margin-top: 10rem;
        font-size: 3.5rem;
    }
    .ProjPresentSection3 .RightSection .Disc2 p{
        margin-top: 2rem;
        font-size: 2.5rem;
    }
    .ProjPresentSection3 .RightSection .Disc3{
        border-radius: 4rem;
    }
    .ProjPresentSection3 .RightSection .Disc3 h3{
        margin-top: 10rem;
        font-size: 3.5rem;
    }
    .ProjPresentSection3 .RightSection .Disc3 p{
        margin-top: 2rem;
        font-size: 2.5rem;
    }
    .ProjPresentSection3 .SkillsWorked {
        height: 90%;
        width: calc(100% - 28rem);
    }
    .ProjPresentSection3 .SkillsWorked h1 {
        font-family: "BLM-M" ;
        font-size: 3.5rem;
    }
    .ProjPresentSection3 .SkillsWorked h2 {
        margin-top: 7rem;
        padding: 0 5rem;
        font-size: 3rem;
    }
    .ProjPresentSection3 .SkillsWorked p {
        margin-top: 1rem;
        padding: 0 5rem;
        font-size: 2.5rem;
    }
    .AboutApp p{
        font-size: 2.5rem;
    }
    .AboutFooter h1{
        text-transform: uppercase;
        font-family: "BLM-Book" ;
        font-size: 1.2rem;
        font-weight: normal;
        color: #ECECEC;
    }
    .AboutApp .Btns{
        margin-top: 7rem;
        height: 12rem;
    }
    .AboutApp .Btns a{
        margin-right: 10rem;
        border-radius: 1.5rem;
        width: 20rem;
    }
    .AboutApp .Btns a h1{
        font-size: 1.5rem;
    }
    .AboutApp .Btns a h1 span{
        margin-left: 1rem;
    }



    /* TS Section */
    .TSSection .TSHeadingSection #TS{
        font-size: 7rem;
    }
    .TSSection .TSHeadingSection #TS span{
        font-size: 2rem;
    }
    .TableauSynthSection p{
        margin-top: 7rem;
        font-size: 2.5rem;
    }
    .TableauSynthSection a{
        margin-top: 7rem;
        height: 5rem;
        width: 24rem;
        font-family: "BLM-Book" ;
        font-size: 2rem;
    }
    /* About Section */
    .bioSection .pageTitleSection #About{
        font-size: 7rem;
    }
    .bioSection .pageTitleSection #About span{
        font-size: 2rem;
    }
    .bioSection .aboutBox .ProfileBox .ProfileSection{
        border-radius: 2rem;
    }
    .bioSection .aboutBox .ProfileBox .BioSection .NameBox h4{
        font-size: 5rem;
    }
    .bioSection .aboutBox .ProfileBox .BioSection .NameBox h1{
        font-size: 7rem;
    }
    .bioSection .aboutBox .ProfileBox .BioSection .BioBox p{
        font-size: 2.3rem;
    }
    .bioSection .aboutBox .ProfileBox .BioSection .BtnBox a{
        margin-top: 5rem;
        border-radius: 1.5rem;
    }
    .bioSection .aboutBox .ProfileBox .BioSection .BtnBox a button{
        height: 6rem;
        width: 20rem;
        font-size: 2rem;
        border-radius: 1.5rem;
    }
    .MyTab1 .Title h2{
        font-size: 4.5rem;
    }
    .MyTab1 .Journey .Pro{
        border-radius: 2rem;
    }
    .MyTab1 .Journey .Pro .Exs h6{
        font-size: 2.5rem;
    }
    .MyTab1 .Journey .Pro .Exs h2{
        margin-top: 2rem;
        font-size: 3.5rem;
    }
    .MyTab1 .Journey .Pro .Exs p{
        margin-top: 2rem;
        margin-left: 2rem;
        font-size: 2.5rem;
    }
    .MyTab1 .Journey .Ed{
        border-radius: 2rem;
    }
    .MyTab1 .Journey .Ed .Cours h6{
        font-size: 2.5rem;
    }
    .MyTab1 .Journey .Ed .Cours h2{
        margin-top: 2rem;
        font-size: 3.5rem;
    }
    .MyTab1 .Journey .Ed .Cours p{
        margin-top: 2rem;
        margin-left: 2rem;
        font-size: 2.5rem;
    }
    .MyTab2 .Title h2{
        font-size: 4.5rem;
    }
    .MyTab2 .SkillSets .Skills{
        border-radius: 2rem;
    }
    .MyTab2 .SkillSets .Skills h3{
        font-size: 3.5rem;
    }
    .MyTab2 .SkillSets .Skills p{
        margin-top: 4rem;
        font-size: 2.5rem;
    }
    .MyTab3 .GIT .QuoteBox h2{
        font-size: 6rem;
    }
    .MyTab3 .GIT .QuoteBox h6{
        margin-top: 3rem;
        font-size:3rem;
    }
    .MyTab3 .contact .leftSection #Quest{
        font-size: 4.5rem;
    }
    .MyTab3 .contact .leftSection #SayHello{
        font-size: 3rem;
    }
    .MyTab3 .contact .leftSection .SocialLinks{
        height: 6rem;
    }
    .MyTab3 .contact .leftSection .SocialLinks a h2{
        font-size: 2rem;
    }
    .MyTab3 .contact .leftSection .SocialLinks a h2 svg{
        height: 1.4rem;
        opacity: 1;
    }
    .MyTab3 .contact .rightSection .innerBox{
        border-radius: 2rem;
    }

}