body{
    font-family: 'Poppins', sans-serif;
    background-color: black;
    color: white;
    position: relative;
    overflow: hidden;
    /* height: 100vh; */
    cursor:url('img/pointer.png'), auto ;
}

*{
    padding: 0px;
    margin: 0px;
}

/*custom cursor starts here*/
.cursor{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #ffb3005d;
    position: absolute;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    z-index: 200;
    pointer-events: none;/* this allows the cursor to be click able*/
}
/* .cursor::after{
    content: "";
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background-color: #ffb3005d;
    position: absolute;
    top: -11px;
    right: -11px;
} */
/*custom cursor ends here*/

section{
    /* height: 99vh; */
    /* display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center; */
    /* padding-bottom: 50px; */
    /* position: relative; */
}

/* .divider starts here */
div.divider-bg{
    background-color:#ffb400;
    height: 200%;
    width: 100%;
    position: fixed;
    top: -50%;
    left: -85%;
    rotate: -15deg;
    z-index: -1;
    /* transform: rotate(-15deg); */
    /* display: none; */
    /*undo here when you are ready*/
}
/* .divider ends here */

/* profile picture starts here */
div.profile-picture{
    height: calc(100vh - 80px);
    width: 33%;
    background-image: url("img/chinedu_gabriel-white-preview.png");
    background-position: center;
    /* background-color: red; */
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.664);
    z-index: 11;
    position: fixed;
    top: 40px;
    left: 55px;
    /* display: none; */
    /*undo here when you are ready*/
}
/* profile picture ends here */

/* div.mode-switch starts here */
section>div.mode-switch{
    height: 40px;
    width: 40px;
    background-color: rgba(187, 187, 187, 0.3);
    border-radius: 20px;
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 99;
    background-image: url("img/wb_sunny_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}
/* div.mode-switch ends here */

/* nav starts here */
div.mobile-nav{
    display: none;
}
section>div.nav{
    /* border: 1px solid red; */
    display: flex;
    /* align-items: center; */
    /* justify-content: flex-end; */
    position: fixed;
    right: 30px;
    top: 30%;
    /* height: 40%; */
}

section>div.nav>ul{
    list-style: none;
    height: 350px;
    /* width: 200px; */
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    justify-content: space-evenly;
    /* transition: 1ms; */
}

section>div.nav>ul>li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border: 1px solid rgb(106, 199, 0); */
    background-color: #4b4b4b50;
    border-radius: 25px;
    width: auto;
    /* padding-left: 10px; */
    text-align: center;
    /* padding-left:28px; */
    font-size: 15px;
    transition-duration: 550ms;
    transition-timing-function: ease-in-out;
}

section>div.nav>ul>li>span{
    display: none;
}

section>div.nav>ul>li:first-child{
    width: 125px;
    padding-left:28px;
    background-color: #ffb400;
}
section>div.nav>ul>li:first-child div{
    background-color: #ffb400;
}

section>div.nav>ul>li:first-child span{
    display: block;
}

section>div.nav>ul>li:hover{
    cursor: pointer;
    /* padding-left:28px;
    width: 125px; */
}

/* section>div.nav>ul>li:hover span{
    display: block;
    
} */




/* collective icon style */
section>div.nav>ul>li>div{
    height: 40px;
    width: 40px ;
    background-color: rgba(187, 187, 187, 0.3);
    border-radius: 20px;
    /* border: 1px solid rgb(106, 199, 0); */
}
/* individual icon */
section>div.nav>ul>li>div.icon1{
    background-image: url("img/home_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
    
}
section>div.nav>ul>li>div.icon2{
    background-image: url("img/user_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}
section>div.nav>ul>li>div.icon3{
    background-image: url("img/potfolio_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}
section>div.nav>ul>li>div.icon4{
    background-image: url("img/outgoing_mail_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;

}
/* nav ends here */

/* div.row-home starts here */
section>div.row-home{
    /* border: 1px solid rgb(106, 199, 0); */
    /* width: 100%; */
    height: 99vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    /* display: none; */
    /*undo here when you are ready*/
}

/* .col-1 starts here for mobile profile picture */
section>div.row-home>div.col-1{
    height: 300px;
    width: 300px;
    border-radius: 150px;
    /* border: 1px solid rgb(106, 199, 0); */
    display: block;
    background-image: url("img/chinedu_gabriel-white-preview.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: none;
}
/* .col-1 ends here for mobile profile picture */

section>div.row-home>div.col-2{
    /* border: 1px solid rgb(0, 70, 199); */
    /* width: 72%; */
    /* height: auto; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 80px;
}

/* div.col-2>div.text-wrapper starts here */
section>div.row-home>div.col-2>div.text-wrapper{
    width: 45%;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    /* border: 1px solid rgb(106, 199, 0); */
}
/* div.col-2>div.text-wrapper ends here */

/* .colored-text starts here */
section>div.row-home>div.col-2>div.text-wrapper>.colored-text{
    display: flex;
    flex-flow: row nowrap;
    /* align-items:; */
    gap: 20px;
    /* border: 1px solid rgb(199, 0, 149); */

    
}
/* .colored-text ends here */

/* .colored-text h1 starts here */
section>div.row-home>div.col-2>div.text-wrapper>.colored-text h1{
    color: #ffb400;
    font-size: 39px;
    font-weight: 700;
    text-transform: uppercase;
}
/* .colored-text h1 ends here */

/* .colored-text h2 starts here */
section>div.row-home>div.col-2>div.text-wrapper>.colored-text h1>span{
    /* color: #ffb400; */
    font-size: 39px;
    font-weight: 500;
    text-transform: uppercase;
    color: white;
}
/* .colored-text h2 ends here */

/* little line starts here */
/* section>div.row-home>div.col-2>div.text-wrapper>.colored-text>.little-line{
    height: 49px;
    width: 45px;
    background-color: #1900ff;
    display: flex;
    padding-top: 3px;
    align-items: center;
}
section>div.row-home>div.col-2>div.text-wrapper>.colored-text>.little-line>.line{
    height: 5px;
    width: 45px;
    background-color: #ffb400;
    border-radius: 2.5px;
} */
/* little line ends here */

/* div.text-wrapper>p starts here */
section>div.row-home>div.col-2>div.text-wrapper>p{
    width: 75%;
    line-height: 25px;
}
/* div.text-wrapper>p ends here */

section>div.row-home>div.col-2>div.text-wrapper>button{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ffb400;;
    background-color: transparent;
    border-radius: 25px;
    width: 200px;
    padding-left: 10px;
    text-align: center;
    color: white;
    font-size: 15px;
    padding-left:20px;
    cursor: pointer;
}

section>div.row-home>div.col-2>div.text-wrapper>button>.icon{
    height: 40px;
    width: 40px ;
    background-color: #ffb400;
    border-radius: 20px;
    background-image: url("img/arrow_right_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
    /* border: 1px solid rgb(106, 199, 0); */
}

/* div.row-home ends here */


/* ---------------------------------------------------------------------------- */
/* div.row-about starts here */
section>div.row-about::-webkit-scrollbar{
    /* this helps to hide the scrollbar */
    display: none;
}
/* section>div.row-about starts here */
section>div.row-about{
    height: 100vh;
    /* width: 70%; */
    /* border:1px solid #1900ff; */
    overflow-y: scroll;
    /* display: flex; */
    flex-flow: column nowrap;
    gap: 65px;
    /* gap: 300px; */
    display: none;
}

/* banner-text starts here */
div.banner-text{
    /* border: 1px solid green; */
    width: 99.8%;
    height: 20%;
    /* text-align: center; */ 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
div.banner-text>span{
    font-size: 110px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 10px;
    color: hsl(0, 0%, 100%, .07);
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
div.banner-text>h1{
    font-size: 56px;
    font-weight: 800;
}
div.banner-text>h1>span{
    color: #ffb400;
}
/* banner-text ends here */

/* div.row-personal-info starts here */
section>div.row-about>div.row-personal-info{
    /* border: 1px solid red; */
    /* height: 60%; */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* div.row-personal-info ends here */

/* div.row-personal-info>div.personal-info-wrapper starts here */
section>div.row-about>div.row-personal-info>div.personal-info-wrapper{
    /* border: 1px solid yellow; */
    /* height: 90%;
    width: 90%; */
    display: flex;
    flex-flow: column nowrap;
    gap: 20px;
}
/* div.row-personal-info>div.personal-info-wrapper ends here */

section>div.row-about>div.row-personal-info>div.personal-info-wrapper>h1{
    /* font-weight: 800; */
}

/*div.personal-info-wrapper>div.list-info starts here*/
section>div.row-about>div.row-personal-info>div.personal-info-wrapper>div.list-info{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap: 90px;
    /* border: 1px solid rgb(168, 168, 2); */
    /* height: 60%; */
    /* width: 90%; */
}
/*div.personal-info-wrapper>div.list-info ends here*/

section>div.row-about>div.row-personal-info>div.personal-info-wrapper>div.list-info>ul{
    /* height: 100%; */
    /* border: 1px solid rgb(2, 115, 168); */
    list-style: none;
    display: flex;
    /* flex-flow: column nowrap; */
    justify-content: space-around;
    gap: 50px;
}

section>div.row-about>div.row-personal-info>div.personal-info-wrapper>div.list-info>ul>li{
    font-weight: 400;
    color: white;
    display: flex;
    flex-flow: column;
}
section>div.row-about>div.row-personal-info>div.personal-info-wrapper>div.list-info>ul>li>span{
    /* cursor: none; */
    opacity: .8;
}

/* div.personal-info-wrapper>button Starts here*/
section>div.row-about>div.row-personal-info>div.personal-info-wrapper>a{
    text-decoration: none;
}
section>div.row-about>div.row-personal-info>div.personal-info-wrapper>a>button{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ffb400;;
    background-color: transparent;
    border-radius: 25px;
    width: 175px;
    padding-left: 10px;
    text-align: center;
    color: white;
    font-size: 15px;
    padding-left:20px;
    cursor: pointer;
}


section>div.row-about>div.row-personal-info>div.personal-info-wrapper>a>button>.icon{
    height: 40px;
    width: 40px ;
    background-color: #ffb400;
    border-radius: 20px;
    background-image: url("img/file_download_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
    /* border: 1px solid rgb(106, 199, 0); */
}
/* div.personal-info-wrapper>button Starts here*/

/* div.row-about ends here */

/* div.my-skills start here */
section>div.row-about>div.my-skills{
    /* border: 1px solid rgb(106, 199, 0); */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-evenly;
    height: auto;
    gap: 20px;
    padding: 15px 0px;
}

section>div.row-about>div.my-skills>h1{
    font-weight: 600;
}

/* div.my-skills>div.lang-wrapper starts here */
section>div.row-about>div.my-skills>div.lang-wrapper{
    display: flex;
    flex-flow: row wrap;
    width: 60%;
    height: auto;
    justify-content: space-evenly;
    align-items: center;
    align-content: flex-start;
    gap: 20px;
    /* border: 1px solid #ffb400; */
    align-self: center;
    padding: 20px ;
}

/* div.lang-wrapper>div.lan starts here */
section>div.row-about>div.my-skills>div.lang-wrapper>div.lan{
    border: 3px solid #ffb400;
    height: 150px;
    width: 150px;
    border-radius: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* div.lang-wrapper>div.lan ends here */
/* div.my-skills>div.lang-wrapper ends here */


/* section>div.row-about>div.edu-exp starts here */

section>div.row-about>div.edu-exp{
    /* height: 70%; */
    padding-bottom:35px;
}
section>div.row-about>div.edu-exp>div.col1{
    /* border: 1px solid red; */
    /* width: 80%; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-flow: column ;
    /* height: 60vh; */
    padding: 10px;
    gap: 25px;
}
section>div.row-about>div.edu-exp>div.col1>div.wrapper{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    /* border: 1px solid purple; */
    /* gap: 10px; */
    /* height: auto; */
    width: 65%;
    /* width: auto; */
}
/* div.edu-exp>div.col1>div.wrapper>div.row starts here */
section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row{
    /* border: 1px solid green; */
    height: auto;
    width: 49%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
}

/* div.wrapper>div.row>div.icon-wrapper starts here */
section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.icon-wrapper{
    display: flex;
    flex-flow: column nowrap;
    /* justify-content: center; */
    align-items: center;
}
/* div.wrapper>div.row>div.icon-wrapper ends here */

section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.icon-wrapper>div.icon-year{
    background-color: #ffb400;
    background-image: url("img/potfolio_icon\ _v2.png");
    height: 40px;
    width: 40px ;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

/* div.icon-wrapper>div.line starts here */
section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.icon-wrapper>div.line{
    background-color: #ffffff4d;
    width: 2px;
    height: 98px;
    
}
/* div.icon-wrapper>div.line ends here */

/* div.col1>div.wrapper>div.row>div.content starts here */
section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content{
    /* width: 500px; */
    /* height: 150px; */
    /* border: 1px solid red; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    gap: 10px;
    
}
/* div.col1>div.wrapper>div.row>div.content ends here */

section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content>p{
    width: 92px;
    border-radius: 25px;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background-color: #ffffff4d;
}
section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content>div.text-wrapper>h4{
    font-size: 16px;
    margin-bottom: 10px;
}
section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content>div.text-wrapper>h4>span{
    font-size: 13px;
    color: #888888d8;
}

section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content>div.text-wrapper>p{
    font-size: 13px;
    line-height: 20px;
}

/* div.edu-exp>div.col1>div.wrapper>div.row ends here */
/* section>div.row-about>div.edu-exp ends here */
/* section>div.row-about starts here */

/* ------------------------------------------------------------------------------ */

/* section>div.row-portfolio starts here */
section>div.row-portfolio::-webkit-scrollbar{
    /* this helps to hide the scrollbar */
    /* display: none; */
}

section>div.row-portfolio{
    height: 100dvh;
    /* height: auto; */
    /* width: 70%; */
    /* border:1px solid #1900ff; */
    /* display: flex; */
    overflow-y: scroll;
    gap: 30px;
    /* padding: 10px; */
    display: none;
}

section>div.row-portfolio>div.project-list{
    width: 100%;
    height: 65px;
    display: flex;
    justify-content: center;
    gap: 20px;
    /* border:1px solid #1900ff; */
}

/* div.project-list>ul starts here */
section>div.row-portfolio>div.project-list>ul{
    /* border:1px solid #00c997; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 20%;
    list-style: none;
}

section>div.row-portfolio>div.project-list>ul>li:first-child{
    color: #ffb400;
}
/* div.project-list>ul ends here */


section>div.row-portfolio>.portfolio-project{
    /* border:1px solid #00c997; */
    /* height: 120vh; */
    height: auto;
    /* width: 90%; */
    display: flex;
    justify-content: center;
    padding: 20px 0px;
}

section>div.row-portfolio>.portfolio-project>.portfolio-wrapper{
    /* border:1px solid #4600c9; */
    height: auto;
    width: 80%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    /* align-items: center; */
    align-content: space-evenly;
    /* padding: 20px 0px; */
    row-gap: 35px;
    
}
/* .portfolio-wrapper>.project starts here */
section>div.row-portfolio>.portfolio-project>.portfolio-wrapper>.project{
    /* border:1px solid #0057c9; */
    /* height: auto; */
    height: 300px;
    /* width: 30%; */
    width: 329px;
    background-color: #C8C8C8;
    border-radius: 5%;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap ;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 38px 0px;
    background-position: center;
    background-size:contain;
    background-repeat: no-repeat;
    transition-duration: 550ms;
    transition-timing-function: ease-in-out;
    /* display: none; */
}
.portfolio-project>.portfolio-wrapper>.project:hover{
    /* display: flex; */
    background-image: none !important;
    background-color: #ffb400 !important;
    /* cursor: pointer; */
}

/* .project>div.img starts here */
.portfolio-project>.portfolio-wrapper>.project>div.img{
    /* height: 100%; */
    /* width: 100%; */
    background-color: #50505075;
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: absolute; */
    /* top: 0; */
    color: #ffffff;
    /* position: relative; */
}

.portfolio-project>.portfolio-wrapper>.project:hover div.img{
    /* height: 10%; */
    /* background-image: url("img_project/abdieloils.png"); */
    display: none;
}

.portfolio-project>.portfolio-wrapper>.project>div.img>div#close-img-project{
    /* background-image: url('img/close-icon.png'); */
    /* background-position: center;
    background-size: cover; */
    height: 40px;
    width: 170px;
    position: absolute;
    bottom: 30px;
    left: 0px;
    background-color: #ffb400;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10px;
}
/* .portfolio-project>.portfolio-wrapper>.project>div.img:hover div{
    display: block;
} */
/* .portfolio-project>.portfolio-wrapper>.project>div.img div:active div.img{
    height: 10%;
} */

/* .project>div.img ends here */
/* .project>div.content starts here */
.portfolio-project>.portfolio-wrapper>.project>div.content{
    height: 70%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    /* padding: 10px 0px; */
    display: none;
}
/* .project>div.content ends here */
/* .project>div.content>p starts here */
.portfolio-project>.portfolio-wrapper>.project>div.content>p{
    width: 90%;
    height: auto;
    /* overflow: hidden; */
}
/* .project>div.content>p ends here */
/* .project>div.content>div starts here */
.portfolio-project>.portfolio-wrapper>.project>div.content>div{
    width: 90%;
    height: auto;
    /* overflow: hidden; */
    /* border:1px solid #0057c9; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.portfolio-project>.portfolio-wrapper>.project>div.content>div>a{
    text-decoration: none;
    border: 1px solid black;
    border-radius: 5px;
    color: black;
    padding: 7px 10px;
    font-size: 15px;
    transition-duration: 550ms;
    transition-timing-function: ease-in-out;
}

.portfolio-project>.portfolio-wrapper>.project:hover div.content{
    display: flex;
    background-image: none;
}

.portfolio-project>.portfolio-wrapper>.project>div.content>div>a:hover{
    background-color: #222222;
    color: #ffb400;
}
/* .project>div.content>p ends here */


/* section>div.row-portfolio ends here */

/* backdrop to show project details starts here */

div.display-backdrop{
    background-color: white;
    height: 70vh;
    width: 90%;
    position: absolute;
    top: 50;
    bottom: 15%;
    left: 50;
    right: 50;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    /* justify-content: space-around; */
    /* color: black; */
    background-color: #505050;
    border-radius: 20px;
    /* overflow: scroll; */
    display: none;
}
div.display-backdrop>.wrapper{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    /* justify-content: space-around; */
    height: 100vh;
    /* justify-content: space-around; */
    /* color: black; */
    /* display: none; */
    overflow: scroll;
    /* text-align: center; */
}
div.display-backdrop>
div.banner-text{
    width: 60%;
    justify-content: flex-start;
}

div.display-backdrop>
div.banner-text>h1{
    /* font-size: 150%; */

}

img#project-img{
    height: 40%;
    width: 55%;
    margin: 20px 0px;
}

div.display-backdrop>img#close-sec{
    position: absolute;
    right: 0px;
    top: -40px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 25px;
}

div.display-backdrop p{
    width: 40%;
}

/* ------------------------------------------------- */

/* section>div.row-contact starts here */
section>div.row-contact::-webkit-scrollbar{
    /* this helps to hide the scrollbar */
    display: none;
}
section>div.row-contact{
    height: 100dvh;
    /* width: 70%; */
    /* border:1px solid #1900ff; */
    overflow-y: scroll;
    /* gap: 0px; */
    display: none;
}

section>div.row-contact>div.row-form{
    display: flex;
    flex-flow:  row wrap;
    align-items: center;
    justify-content: center;
    /* border:1px solid #00ffdd; */
    /* height: 80%; */
    margin-top: 2%;
    padding: 45px 10px;
    width: 98%;
    gap: 10px;
}

section>div.row-contact>div.row-form>.col1{
    /* border:1px solid #ff00bf; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    gap: 20px;
    padding-bottom: 32px;
    /* height: 70%; */
}
section>div.row-contact>div.row-form>.col1>h2{
    /* border:1px solid #e688ce; */
    /* font-weight: 500; */
}
section>div.row-contact>div.row-form>.col1>p{
    /* width: 350px; */
    width: 83%;
    height: 77px;
    line-height: 20px;
    font-size: 15px;
    /* border:1px solid #ffffff; */
}

section>div.row-contact>div.row-form>.col1>.info{
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
}
section>div.row-contact>div.row-form>.col1>.info>.map-icon{
    /* border:1px solid #ffffff; */
    width: 35px;
    height: 35px;
    background-image: url("img/map_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* .col1>.info>.mail-icon starts here */
section>div.row-contact>div.row-form>.col1>.info>.mail-icon{
    /* border:1px solid #ffffff; */
    width: 35px;
    height: 35px;
    background-image: url("img/letter_mail_message_post_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* .col1>.info>.mail-icon ends here */

/* .info>.tel-icon starts here */
section>div.row-contact>div.row-form>.col1>.info>.tel-icon{
    /* border:1px solid #ffffff; */
    width: 35px;
    height: 35px;
    background-image: url("img/phone-call.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* .info>.tel-icon ends here */

/* .info>.map-text starts here */
section>div.row-contact>div.row-form>.col1>.info>.map-text{
    display: flex;
    flex-flow: column nowrap;
    gap:3px;
}
/* .info>.map-text ends here */

/* .info>.map-text>p.address-p starts here */
section>div.row-contact>div.row-form>.col1>.info>.map-text>p.address-p{
    font-size: 15px;
    color: rgba(255, 255, 255, 0.712);
}
/* .info>.map-text>p.address-p ends here */
/* .info>.map-text>p.details starts here */
section>div.row-contact>div.row-form>.col1>.info>.map-text>p.details{
    width: 300px;
    line-height: 20px;
    font-size: 13px;
    /* border:1px solid #ffffff; */
}
/* .info>.map-text>p.details ends here */

/* social-icons starts here */
div.social-icons{
    /* border: 1px solid white; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    /* align-content: flex-start; */
    flex-flow: row nowrap;
    padding: 5px 0px;
}
div.social-icons>a>div{
    height: 35px;
    width: 35px;
    /* border: 1px solid white; */
    border-radius: 20px;
    background-position: center;
    background-size: 25px;
    background-repeat: no-repeat;
    background-color: #8888888e;

}
div.social-icons>a>.icon-1{
    background-image: url("img/git_logo_logos_icon.png");
}
div.social-icons>a>.icon-2{
    background-image: url("img/twitter.png");
}
div.social-icons>a>.icon-3{
    background-image: url("img/linkedin_social_icon.png");

}
div.social-icons>a>.icon-4{
    background-image: url("img/whatsapp_icon.png");
}
/* social-icons ends here */

/* section>div.row-contact>div.row-form>.col2 starts here */
section>div.row-contact>div.row-form>.col2{
    /* border:1px solid #a80000; */
    width: 35%;
    /* height: 70%; */
}
/* section>div.row-contact>div.row-form>.col2 ends here */


/* div.row-form>.col2 starts here */
section>div.row-contact>div.row-form>.col2>form{
    /* border:1px solid #a80000; */
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    gap: 20px;
}
/* div.row-form>.col2 ends here */


/* div.row-form>.col2>form>input starts here */
section>div.row-contact>div.row-form>.col2>form>input{
    width: 93%;
    height: 44px;
    border-radius: 10px;
    align-self: center;
    border: none;
    outline: none;
    background-color: #252525;
    padding:0PX 11PX;
    color: white;
}
/* div.row-form>.col2>form>input ends here */

/* div.row-form>.col2>form>textarea starts here */
section>div.row-contact>div.row-form>.col2>form>textarea{
    width: 93%;
    height: 130px;
    border-radius: 10px;
    align-self: center;
    border: none;
    outline: none;
    background-color: #252525;
    color: white;
    padding:11PX 11PX;
    font-size: 16px;
    resize: none;
}
/* div.row-form>.col2>form>textarea ends here */

/* .col2>form>.btn-wrapper starts here */
section>div.row-contact>div.row-form>.col2>form>.btn-wrapper{
    width: 93%;
    /* border: 1px solid #ffb400; */
    align-self: center
}
/* .col2>form>.btn-wrapper ends here */

/* .col2>form>.btn-wrapper>button starts here */
section>div.row-contact>div.row-form>.col2>form>.btn-wrapper>button{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ffb400;
    background-color: transparent;
    border-radius: 25px;
    width: 175px;
    padding-left: 10px;
    text-align: center;
    color: white;
    font-size: 11px;
    padding-left:20px;
    /* align-self: ; */
}
/* .col2>form>.btn-wrapper>button ends here */


/* .col2>form>.btn-wrapper>button>.icon starts here */
section>div.row-contact>div.row-form>.col2>form>.btn-wrapper>button>.icon{
    height: 40px;
    width: 40px ;
    background-color: #ffb400;
    border-radius: 20px;
    background-image: url("img/send_email_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
    /* border: 1px solid rgb(106, 199, 0); */
}
/* .col2>form>.btn-wrapper>button>.icon ends here */
/* div.row-form>.col2 ends here */

/* General Buttons hover Effect*/
button:hover{
    background-color: #ffb400 !important;
}
/* General Buttons ends hover Effect*/

/* ========================================================== */

/* mobile version starts here */
@media  (max-width: 1019px) {
    body{
        height: auto;
        width: auto;
    }
    section{
        height: 100dvh;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        /* padding: 0px; */
        position: relative;
        /* border: 1px solid rgb(106, 199, 0); */
    }

    /*custom cursor starts here*/
.cursor{
display: none;
}
/*custom cursor ends here*/
    
    /* .divider starts here */
    div.divider-bg{
        background-color:#ffb400;
        height: 200%;
        width: 100%;
        position: fixed;
        top: -50%;
        left: -85%;
        rotate: -15deg;
        z-index: -1;
        transform: rotate(-15deg);
        display: none;
        /*undo here when you are ready*/
    }
    /* .divider ends here */
    
    /* profile picture starts here */
    div.profile-picture{
        height: calc(100vh - 80px);
        width: 27%;
        background-image: url("img/chinedu_gabriel-white-preview.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 30px;
        z-index: 11;
        position: fixed;
        top: 40px;
        left: 55px;
        display: none;/*undo here when you are ready*/
    }
    /* profile picture ends here */
    
    /* div.mode-switch starts here */
    section>div.mode-switch{
        /* height: 40px;
        width: 40px;
        background-color: rgba(187, 187, 187, 0.3);
        border-radius: 20px;
        position: fixed; */
        top: 20px;
        right: 20px;
        /* z-index: 99;
        background-image: url("img/wb_sunny_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px; */
    }
    /* div.mode-switch ends here */
    
    /* nav starts here */
    section>div.nav{
        border: 1px solid red;
        display: flex;
        /* align-items: center; */
        /* justify-content: flex-end; */
        position: fixed;
        right: 30px;
        top: 30%;
        /* height: 40%; */
        display: none;
    }
    
    section>div.nav>ul{
        list-style: none;
        height: 350px;
        /* width: 200px; */
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
        justify-content: space-evenly;
    }
    
    section>div.nav>ul>li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgb(106, 199, 0);
        background-color: #ffb400;
        border-radius: 25px;
        width: 150px;
        padding-left: 10px;
        text-align: center;
        padding-left:28px;
    
    }
    /* collective icon style */
    section>div.nav>ul>li>div{
        height: 40px;
        width: 40px ;
        background-color: rgba(187, 187, 187, 0.3);
        border-radius: 20px;
        /* border: 1px solid rgb(106, 199, 0); */
    }
    /* individual icon */
    section>div.nav>ul>li>div.icon1{
        background-image: url("img/home_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px;
        
    }
    section>div.nav>ul>li>div.icon2{
        background-image: url("img/user_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px;
    }
    section>div.nav>ul>li>div.icon3{
        background-image: url("img/potfolio_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px;
    }
    section>div.nav>ul>li>div.icon4{
        background-image: url("img/outgoing_mail_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px;
    
    }
    /* nav ends here */
    
    /* div.row-home starts here */
    section>div.row-home{
        width: auto;
        height: 100dvh;
        /* display: flex; */
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 20px;
        /* display: none; */
        /*undo here when you are ready*/
    }
    
    /* .col-1 starts here for mobile profile picture */
    section>div.row-home>div.col-1{
        height: 170px;
        width: 170px;
        border-radius: 100px;
        border: 4px solid #505050;
        display: block;
        background-image: url("img/chinedu_gabriel-white-preview.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        /* display: none; */
    }
    /* .col-1 ends here for mobile profile picture */
    
    section>div.row-home>div.col-2{
        /* border: 1px solid rgb(0, 70, 199); */
        width: 99%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
    }
    
    /* div.col-2>div.text-wrapper starts here */
    section>div.row-home>div.col-2>div.text-wrapper{
        width: 99%;
        height: auto;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 30px;
        /* border: 1px solid rgb(106, 199, 0); */
        text-align: center;
        padding: 15px 0px;
    }
    /* div.col-2>div.text-wrapper ends here */
    
    /* .colored-text starts here */
    section>div.row-home>div.col-2>div.text-wrapper>.colored-text{
        display: flex;
        flex-flow: row nowrap;
        /* align-items:center; */
        justify-content: center;
        gap: 10px;
        /* border: 1px solid rgb(119, 0, 199); */
        width: 350px;
        padding: 10px 0px;
    }
    /* .colored-text ends here */
    
    /* .colored-text h1 starts here */
    section>div.row-home>div.col-2>div.text-wrapper>.colored-text h1{
        color: #ffb400;
        font-size: 150%;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 25px;
        width:auto;
        text-align: center;
    }
    /* .colored-text h1 ends here */
    
    /* .colored-text h2 starts here */
    section>div.row-home>div.col-2>div.text-wrapper>.colored-text h1>span{
        /* color: #ffb400; */
        font-size: 18px;
        font-weight: 500;
        text-transform: uppercase;
        color: white;
    }
    /* .colored-text h2 ends here */
    
    /* little line starts here */
    /* section>div.row-home>div.col-2>div.text-wrapper>.colored-text>.little-line{
        height: 49px;
        width: 45px;
        background-color: #1900ff;
        display: flex;
        padding-top: 3px;
        align-items: center;
        display: none;
    }
    section>div.row-home>div.col-2>div.text-wrapper>.colored-text>.little-line>.line{
        height: 5px;
        width: 45px;
        background-color: #ffb400;
        border-radius: 2.5px;
    } */
    /* little line ends here */
    
    /* div.text-wrapper>p starts here */
    section>div.row-home>div.col-2>div.text-wrapper>p{
        width: 90%;
        /* font-size: 13px; */
        font-size: 13px;
        line-height: 20px;
    }
    /* div.text-wrapper>p ends here */
    
    section>div.row-home>div.col-2>div.text-wrapper>button{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ffb400;;
        background-color: transparent;
        border-radius: 25px;
        width: 190px;
        padding-left: 10px;
        text-align: center;
        color: white;
        font-size: 13px;
        padding-left:20px;
    }
    
    section>div.row-home>div.col-2>div.text-wrapper>button>.icon{
        height: 40px;
        width: 40px ;
        background-color: #ffb400;
        border-radius: 20px;
        background-image: url("img/arrow_right_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px;
        /* border: 1px solid rgb(106, 199, 0); */
    }
    
    /* div.row-home ends here */
    
    
    /* ---------------------------------------------------------------------------- */
    /* div.row-about starts here */
    section>div.row-about::-webkit-scrollbar{
        /* this helps to hide the scrollbar */
        /* display: none; */
    }
    /* section>div.row-about starts here */
    section>div.row-about{
        height: auto;
        width: auto;
        /* border:1px solid #1900ff; */
        overflow-y: scroll;
        gap: 20px;
        /* display: none; */
        padding-bottom: 55px;
    }
    
    /* === banner-text starts here === */
    div.banner-text{
        /* border: 1px solid green; */
        width: auto;
        height: 20%;
        /* text-align: center; */ 
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    div.banner-text>span{
        font-size: 45px;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 10px;
        color: rgba(255, 255, 255, 0.185);
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
    }
    div.banner-text>h1{
        font-size: 30px;
        font-weight: 800;
        /* display: none; */
    }
    div.banner-text>h1>span{
        color: #ffb400;
    }
    /* === banner-text ends here === */
    
    /* div.row-personal-info starts here */
    section>div.row-about>div.row-personal-info{
        /* border: 1px solid red; */
        height: auto;
        width: auto;
        display: block;
        /* align-items: center;
        justify-content: center; */
        padding: 0px 10px;
        margin: 0px;
    }
    /* div.row-personal-info ends here */
    
    /* div.row-personal-info>div.personal-info-wrapper starts here */
    section>div.row-about>div.row-personal-info>div.personal-info-wrapper{
        /* border: 1px solid yellow; */
        height: auto;
        /* width: 95%; */
        display: flex;
        flex-flow: column nowrap;
        gap: 20px;
        padding: 10px 0px;
    }
    /* div.row-personal-info>div.personal-info-wrapper ends here */
    
    section>div.row-about>div.row-personal-info>div.personal-info-wrapper>h1{
        /* font-weight: 800; */
        font-size: 21px;
    }
    
    /*div.personal-info-wrapper>div.list-info starts here*/
    section>div.row-about>div.row-personal-info>div.personal-info-wrapper>div.list-info{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        gap: 25px;
        /* border: 1px solid rgb(168, 168, 2); */
        /* height: 39vh; */
        width: auto;
    }
    /*div.personal-info-wrapper>div.list-info ends here*/
    
    section>div.row-about>div.row-personal-info>div.personal-info-wrapper>div.list-info>ul{
        height: auto;
        width: 100%;
        /* border: 1px solid rgb(2, 115, 168); */
        list-style: none;
        display: flex;
        flex-flow: column nowrap;
        /* justify-content: space-around; */
        gap: 10px;
        font-size: 20px;
    }
    
    section>div.row-about>div.row-personal-info>div.personal-info-wrapper>div.list-info>ul>li{
        font-weight: 400;
        color: white;
        width: auto;
        font-size: 75%;
        flex-flow: row nowrap;
        gap: 20px;
        /* border: 1px solid rgb(16, 168, 2); */
        
    }
    section>div.row-about>div.row-personal-info>div.personal-info-wrapper>div.list-info>ul>li>span{
        /* cursor: none; */
        opacity: .8;
    }
    
    /* div.personal-info-wrapper>button Starts here*/
    section>div.row-about>div.row-personal-info>div.personal-info-wrapper>a>button{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid #ffb400;;
        background-color: transparent;
        border-radius: 25px;
        width: auto;
        padding-left: 10px;
        text-align: center;
        color: white;
        font-size: 15px;
        padding-left:20px;
        
    }
    
    
    
    section>div.row-about>div.row-personal-info>div.personal-info-wrapper>a>button>.icon{
        height: 30px;
        width: 30px ;
        background-color: #ffb400;
        border-radius: 50%;
        background-image: url("img/file_download_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px;
        /* border: 1px solid rgb(106, 199, 0); */
    }
    /* div.personal-info-wrapper>button Starts here*/
    
    /* div.row-about ends here */
    
    /* div.my-skills start here */
    section>div.row-about>div.my-skills{
        /* border: 1px solid rgb(106, 199, 0); */
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: space-evenly;
        gap: 20px;
        width: auto;
        height: auto;
        padding: 15px 0px;
    }
    
    section>div.row-about>div.my-skills>h1{
        font-weight: 600;
        font-size: 21px;
    }
    
    /* div.my-skills>div.lang-wrapper starts here */
    section>div.row-about>div.my-skills>div.lang-wrapper{
        display: flex;
        flex-flow: row wrap;
        width: 90%;
        height: auto;
        justify-content: space-evenly;
        align-items: center;
        align-content: space-evenly;
        gap: 20px;
        /* border: 1px solid #ffb400; */
        align-self: center;
        padding: 20px 0px;
    }
    
    /* div.lang-wrapper>div.lan starts here */
    section>div.row-about>div.my-skills>div.lang-wrapper>div.lan{
        border: 3px solid #ffb400;
        height: 100px;
        width: 100px;
        border-radius: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
    }
    /* div.lang-wrapper>div.lan ends here */
    /* div.my-skills>div.lang-wrapper ends here */
    
    
    /* section>div.row-about>div.edu-exp starts here */
    
    section>div.row-about>div.edu-exp{
        /* height: 70%; */
        
    }
    section>div.row-about>div.edu-exp>div.col1{
        /* border: 1px solid red; */
        width: auto;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-flow: column nowrap;
        height: auto;
    }
    section>div.row-about>div.edu-exp>div.col1>h1{
        font-size: 21px;
        text-align: center;
    }
    section>div.row-about>div.edu-exp>div.col1>div.wrapper{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        /* border: 1px solid purple; */
        height: auto;
        width: auto;
        gap: 20px;
    }
    /* div.edu-exp>div.col1>div.wrapper>div.row starts here */
    section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row{
        /* border: 1px solid green; */
        width: auto;
        height: auto;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-around;
        gap: 20px;
        padding: 10px ;
    }
    
    /* div.wrapper>div.row>div.icon-wrapper starts here */
    section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.icon-wrapper{
        display: flex;
        flex-flow: column nowrap;
        /* justify-content: center; */
        align-items: center;
        display: none;
    }
    /* div.wrapper>div.row>div.icon-wrapper ends here */
    
    section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.icon-wrapper>div.icon-year{
        background-color: #ffb400;
        background-image: url("img/potfolio_icon\ _v2.png");
        height: 40px;
        width: 40px ;
        border-radius: 20px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px;
    }
    
    /* div.icon-wrapper>div.line starts here */
    section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.icon-wrapper>div.line{
        background-color: rgba(255, 255, 255, 0.11);
        width: 2px;
        height: 170px;
        
    }
    /* div.icon-wrapper>div.line ends here */
    
    /* div.col1>div.wrapper>div.row>div.content starts here */
    section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content{
        width: auto;
        height: auto;
        /* border: 1px solid red; */
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
        padding: 10px 0px;
        gap: 5px;
    }
    /* div.col1>div.wrapper>div.row>div.content ends here */
    
    section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content>p{
        width: 92px;
        border-radius: 25px;
        /* border: 1px solid red; */
        /* display: block; */
        font-size: 10px;
        /* background-color: #8888883b; */
    }
    section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content>div.text-wrapper>h4{
        font-size: 16px;
        color: #ffb400;
    }
    section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content>div.text-wrapper>h4>span{
        font-size: 13px;
        /* color: #ffffffc2; */
    }
    
    section>div.row-about>div.edu-exp>div.col1>div.wrapper>div.row>div.content>div.text-wrapper>p{
        font-size: 13px;
    }
    
    /* div.edu-exp>div.col1>div.wrapper>div.row ends here */
    /* section>div.row-about>div.edu-exp ends here */
    /* section>div.row-about starts here */
    
    /* ------------------------------------------------------------------------------ */
    
    /* section>div.row-portfolio starts here */
    section>div.row-portfolio::-webkit-scrollbar{
        /* this helps to hide the scrollbar */
        display: none;
    }
    
    section>div.row-portfolio{
        height: auto;
        width: auto;
        /* border:1px solid #1900ff; */
        overflow-y: scroll;
        gap: 20px;
        padding-bottom: 50px;
        /* display: none; */
    }
    
    section>div.row-portfolio>div.project-list{
        width: auto;
        height: 65px;
        display: flex;
        justify-content: center;
        /* border:1px solid #1900ff; */
    }
    
    /* div.project-list>ul starts here */
    section>div.row-portfolio>div.project-list>ul{
        /* border:1px solid #00c997; */
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        list-style: none;
    }

    section>div.row-portfolio>div.project-list>ul>#p1{
        color: #ffb400;
    }
    /* div.project-list>ul ends here */
    
    
    section>div.row-portfolio>.portfolio-project{
        /* border:1px solid #00c997; */
        height: auto;
        /* width: 90%; */
        display: flex;
        justify-content: center;
        flex-flow: row wrap;
    }
    
    section>div.row-portfolio>.portfolio-project>.portfolio-wrapper{
        /* border:1px solid #4600c9; */
        height: auto;
        width: 90%;
        display: flex;
        flex-flow: row wrap;
        /* justify-content: space-evenly; */
        /* align-items: center; */
        /* align-content: space-evenly; */
        gap: 20px;
        padding: 20px 0px;
    }
    
    section>div.row-portfolio>.portfolio-project>.portfolio-wrapper>.project{
        /* border:1px solid #0057c9; */
        /* height: 300px;
        width: 329px; */
        /* background-color: #ffb400;
        border-radius: 5%; */
        /* flex: ; */
        /* overflow: hidden;
        display: flex;
        flex-flow: column nowrap ;
        justify-content: center;
        align-items: center;
        text-align: center; */
    }

    .portfolio-project>.portfolio-wrapper>.project>div.img{
        /* height: 60%;
        width: 100%;
        background-color: #505050;
        display: flex;
        justify-content: center;
        align-items: center; */
    }
    .portfolio-project>.portfolio-wrapper>.project>div.content{
        height: 70%;
        /* display: flex;
        flex-flow: column nowrap;
        align-items: center; */
        gap: 10px;
        /* padding: 10px 0px; */
    }
    .portfolio-project>.portfolio-wrapper>.project>div.content>p{
        width: 90%;
        /* height: 60%; */
        font-size: 14px;
        /* overflow: hidden;
        overflow: scroll; */
    }

    .portfolio-project>.portfolio-wrapper>.project>div.content>div>a{
        text-decoration: none;
        border: 1px solid black;
        border-radius: 5px;
        color: black;
        padding: 7px 5px;
    }

    .portfolio-project>.portfolio-wrapper>.project>div.content>div>a:hover{
        background-color: #222222;
        color: #ffb400;
    }
    
    /* section>div.row-portfolio ends here */

    
    
    
    /* ------------------------------------------------- */
    
    /* section>div.row-contact starts here */
    section>div.row-contact::-webkit-scrollbar{
        /* this helps to hide the scrollbar */
        display: none;
    }
    section>div.row-contact{
        height: 100%;
        width: 90%;
        /* border:1px solid #1900ff; */
        overflow-y: scroll;
        padding-bottom: 50px;
        /* gap: 0px; */
        /* display: none; */
    }
    
    section>div.row-contact>div.row-form{
        display: flex;
        flex-flow:  row wrap;
        align-items: center;
        justify-content: space-between;
        /* border:1px solid #00ffdd; */
        /* height: 165%; */
        margin:0px;
        padding: 0px 0px 50px 0px;
        width: auto;
        gap: 20px;
    }
    
    section>div.row-contact>div.row-form>.col1{
        /* border:1px solid #ff00bf; */
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
        height: 50%;
        width: 95%;
        gap: 30px;
    }
    section>div.row-contact>div.row-form>.col1>h2{
        /* border:1px solid #e688ce; */
        /* font-weight: 500; */
    }
    section>div.row-contact>div.row-form>.col1>p{
        width: 95%;
        height: auto;
        line-height: 25px;
        font-size: 12px;
        /* border:1px solid #ffffff; */
    }
    
    section>div.row-contact>div.row-form>.col1>.info{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 20px;
    }
    section>div.row-contact>div.row-form>.col1>.info>.map-icon{
        /* border:1px solid #ffffff; */
        width: 35px;
        height: 35px;
        background-image: url("img/map_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    /* .col1>.info>.mail-icon starts here */
    section>div.row-contact>div.row-form>.col1>.info>.mail-icon{
        /* border:1px solid #ffffff; */
        width: 35px;
        height: 35px;
        background-image: url("img/letter_mail_message_post_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    /* .col1>.info>.mail-icon ends here */
    
    /* .info>.tel-icon starts here */
    section>div.row-contact>div.row-form>.col1>.info>.tel-icon{
        /* border:1px solid #ffffff; */
        width: 35px;
        height: 35px;
        background-image: url("img/phone-call.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    /* .info>.tel-icon ends here */
    
    /* .info>.map-text starts here */
    section>div.row-contact>div.row-form>.col1>.info>.map-text{
        display: flex;
        flex-flow: column nowrap;
        /* gap:1px; */
        padding: 0px;
    }
    /* .info>.map-text ends here */
    
    /* .info>.map-text>p.address-p starts here */
    section>div.row-contact>div.row-form>.col1>.info>.map-text>p.address-p{
        font-size: 85%;
        color: rgba(255, 255, 255, 0.712);
    }
    /* .info>.map-text>p.address-p ends here */
    /* .info>.map-text>p.details starts here */
    section>div.row-contact>div.row-form>.col1>.info>.map-text>p.details{
        width: 100%;
        line-height: 20px;
        font-size: 80%;
        /* border:1px solid #c8d607; */
    }
    /* .info>.map-text>p.details ends here */

    /* social-icons starts here */
div.social-icons{
    /* border: 1px solid white; */
    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: row nowrap;
    padding: 5px 0px;
}
div.social-icons>a>div{
    height: 40px;
    width: 40px;
    /* border: 1px solid white; */
    border-radius: 50%;
    background-position: center;
    background-size: 20px;
    background-repeat: no-repeat;
    background-color: #8888888e;

}   /* social-icons ends here */
    
    /* section>div.row-contact>div.row-form>.col2 starts here */
    section>div.row-contact>div.row-form>.col2{
        /* border:1px solid #a80000; */
        width: 100%;
        /* height: 50%; */
        padding: 0px;
    }

    /* section>div.row-contact>div.row-form>.col2 ends here */
    
    
    /* div.row-form>.col2 starts here */
    section>div.row-contact>div.row-form>.col2>form{
        /* border:1px solid #a80000; */
        width: 100%;
        /* height: 100%; */
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
        align-items: center;
        padding: 0px;
    }
    /* div.row-form>.col2 ends here */
    

    
    /* div.row-form>.col2>form>input starts here */
    section>div.row-contact>div.row-form>.col2>form>input{
        width: 90%;
        height: 40px;
        /* border-radius: 30px; */
        align-self: center;
        border: none;
        outline: none;
        background-color: #252525;
        padding:0PX 11PX;
        color: white;
    }
    /* div.row-form>.col2>form>input ends here */
    
    /* div.row-form>.col2>form>textarea starts here */
    section>div.row-contact>div.row-form>.col2>form>textarea{
        width: 90%;
        height: 100px;
        /* border-radius: 30px; */
        align-self: center;
        border: none;
        outline: none;
        background-color: #252525;
        color: white;
        padding:11PX 11PX;
        font-size: 16px;
        resize: none;
    }
    /* div.row-form>.col2>form>textarea ends here */
    
    /* .col2>form>.btn-wrapper starts here */
    section>div.row-contact>div.row-form>.col2>form>.btn-wrapper{
        width: 93%;
        /* border: 1px solid #ffb400; */
        align-self: center
    }
    /* .col2>form>.btn-wrapper ends here */
    
    /* .col2>form>.btn-wrapper>button starts here */
    section>div.row-contact>div.row-form>.col2>form>.btn-wrapper>button{
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        border: 1px solid #ffb400;
        background-color: transparent;
        border-radius: 25px;
        width: auto;
        gap: 10px;
        padding-left: 10px;
        text-align: center;
        color: white;
        font-size: 13px;
        padding-left:20px;
        /* align-self: ; */
    }
    /* .col2>form>.btn-wrapper>button ends here */
    
    
    /* .col2>form>.btn-wrapper>button>.icon starts here */
    section>div.row-contact>div.row-form>.col2>form>.btn-wrapper>button>.icon{
        height: 35px;
        width: 35px ;
        background-color: #ffb400;
        border-radius: 50%
        background-image: url("img/file_download_icon.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px;
        /* border: 1px solid rgb(106, 199, 0); */
    }
    /* .col2>form>.btn-wrapper>button>.icon ends here */
    /* div.row-form>.col2 ends here */

    div.mobile-nav{
        /* border: 1px solid red; */
        border-radius: 30rem;
        /* width: 99.9%; */
        width: 90%;
        height: 60px;
        position: absolute;
        /* top: 97.7%; */
        bottom: 0px;
        right: 50%;
        left: 50%;
        /* margin-top: auto; */
        transform: translate(-50%, -50%);
        background-color: #22222280;
        display: block;
        z-index: 99;
    }
    
    div.mobile-nav>ul{
        /* width: 200px; */
        list-style: none;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
    }

    div.mobile-nav>ul>li:first-child>div{
        background-color: #ffb400;
    }
    /* collective icon style */
    div.mobile-nav>ul>li>div{
    height: 40px;
    width: 40px ;
    background-color: rgba(187, 187, 187, 0.3);
    border-radius: 50%;
    /* border: 1px solid rgb(106, 199, 0); */
    /*  */
}
    /* individual icon */
    div.mobile-nav>ul>li>div.icon1{
    background-image: url("img/home_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
    
}
div.mobile-nav>ul>li>div.icon2{
    background-image: url("img/user_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}
div.mobile-nav>ul>li>div.icon3{
    background-image: url("img/potfolio_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}
div.mobile-nav>ul>li>div.icon4{
    background-image: url("img/outgoing_mail_icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;

}

}
/* mobile version ends here */