*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'Roboto';
    src: url(./fonts/Roboto.ttf);
}
@font-face {
    font-family: 'Open_Sans';
    src: url(./fonts/OpenSans.ttf);
}
:root{
    --h1Fontfamily: 'Roboto';
    --h2Fontfamily: 'Roboto';
    --pFontfamily: 'Open_Sans';
    --mainTransition: all 1s;
}
@keyframes rotate {
    0%{
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(360deg);
    }
}
@keyframes bounce {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes fromRight {
    0% {
        transform: translateX(-120%);
    }    
    
    100% {
        transform: translateX(0);
    }
}

@keyframes fromLeft {
    0% {
        transform: translateX(120%);
    }    
    
    100% {
        transform: translateX(0);
    }
}
@keyframes swing {
    0% {
        transform: translateY(100%);
    }

    50% {
        transform: translateY(-40%);
    } 
    
    100% {
        transform: translateX(0);
    }
}
/* Menu */
.menu{
    position: fixed;
    color: rgb(197, 84, 14);
    font-size: 1.8rem;
    background-color: rgba(31, 240, 191, 0.995);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 15px;
    left: 15px;
    z-index: 1;
    animation: bounce 2s infinite;
}
.menu:hover{
    cursor: pointer;
}
/* End Menu */

/* Nav Bar */
.nav-items{
    scroll-behavior: smooth;
}
.navbar{
    opacity: .95;
    position: fixed;
    z-index: 1;
    background-color: rgb(38, 50, 61);
    height: 100%;
    width: 48%;
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    transform: translateY(150%);
    transition: var(--mainTransition);
    border-radius: 10px;
}
.biochar{
    font-weight: bold;
    font-style: italic;
}
.prj-link{
    text-decoration: none;
}
.research-prj-section{
    padding: 0 .4rem;
    background-color: #8ee3e065;
}
.prj-head{
    text-align: center;
    font-size: 2.4rem;
    font-family: var(--h2Fontfamily);
    color: orange;
}
.prj-title{
    font-weight: bold;
    font-style: italic;
    color: #28a745;
}
.research-prj{
    text-align: justify;
}
@media screen and (min-width: 576px) {
    .navbar{
        width: 45%;
    }
}
@media screen and (min-width: 768px){
    .navbar{
        width: 25%;
    }
}
.shownavBar{
    transform: translateX(0);
}
.nav-header{
    font-size: 2rem;
    color: red;
}
.nav-close:hover{
    cursor: pointer;
}
.nav-link{
    list-style-type: none;
    padding: .5rem 0;
}
.nav-link a{
    text-decoration: none;
    font-size: 1.5rem;
    color: #28a745;
}
.nav-link a:hover{
    text-transform: uppercase;
    font-style: italic;
    font-weight: bold;
    color: rgb(239, 212, 180);
}
/* End Nav Bar */
.home-section{
    width: 100vw;
}
.home{
    height: 100vh;
    width: 100vw;
    background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.3),rgba(0,0,0,.3)), url(./image/new2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media screen and (min-width: 576px) {
    .Cv{
        position: fixed;
        top: 20px;
        right: 50px;
    }
}
@media screen and (min-width: 992px) {
    .image img{
        object-position: center;
    }
}
.text{
    width: 90%;
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
}
.web{
    text-decoration: none;
}
.name{
    font-size: 2rem;
    color: rgba(5, 243, 211, 0.708);
    font-family: var(--h1Fontfamily);
    animation: fromRight 6s 1;
    transition: var(--mainTransition);
}
.title{
    padding: .3rem 0;
    font-size: 1.4rem;
    color: rgb(116, 243, 12);
    font-family: var(--h2Fontfamily);
    animation: fromLeft 6s 1;
    transition: var(--mainTransition);
}
.subtitle{
    padding: .5rem 0;
    font-size: 1rem;
    color: rgb(246, 218, 205);
    font-family: var(--pFontfamily);
    font-weight: 800;
    animation: swing 3s 2s;
}
.links{
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0 auto;
    margin-bottom: -15rem;
    font-family: var(--pFontfamily);
    font-size: .8rem;
}
.shorcuts{
    color: rgb(7, 229, 233);
    margin-top: 2rem;
    text-decoration: none;
    border: 2px solid green;
    border-radius: 4rem;
    padding: .5rem .8rem;
    text-align: center;
    font-weight: bold;
    background: linear-gradient(to right, pink, green, orange);
}
.message{
    position: absolute;
}
.image{
    z-index: -1;
    width: 50%;
}
.image img{
    width: 450px;
}

@media screen and (min-width: 576px) {
    .home{
        display: flex;
        justify-content: start;
        align-items: center;
    }
    .message{
        position: static;
    }
    .text{
        width: 60%;
    }
    .image{
        width: 40%;
        height: 93%;
        display: flex;
        justify-content: center;
    }
    .name{
    font-size: 2.4rem;
    color: rgb(247, 242, 239);
    font-family: var(--h1Fontfamily);
    }
    .title{
    padding: 1rem 0;
    font-size: 1.4rem;
    color: rgb(116, 243, 12);
    font-family: var(--h2Fontfamily);
    }
    .subtitle{
    padding: 1rem 0;
    font-size: 1.2rem;
    color: rgba(14, 186, 117, 0.817);
    font-family: var(--pFontfamily);
    font-weight: 800;
    }
    .links{
        display: none;
    }
}
@media screen and (min-width: 768px) {
    .text{
        width: 60%;
    }
    .image{
        width: 40%;
        display: flex;
        justify-content: center;     
    }
    .home{
        display: flex;
        justify-content: start;
    }
    .name{
    font-size: 3.1rem;
    color: rgb(247, 242, 239);
    font-family: var(--h1Fontfamily);
    }
    .title{
    padding: 1rem 0;
    font-size: 1.5rem;
    color: rgb(116, 243, 12);
    font-family: var(--h2Fontfamily);
    }
    .subtitle{
    padding: 1rem 0;
    font-size: 1.2rem;
    color: rgba(3, 159, 115, 0.911);
    font-family: var(--pFontfamily);
    font-weight: 800;
    }
    /* .links{
        display: none;
    } */
}

@media screen and (min-width: 992px) {
    .text{
        width: 60%;
    }
    .image{
        width: 40%;
        display: flex;
        justify-content: center;
        border: 2px dashed wheat;
        border: none;
        height: 97%;
    }
    .image img{
        width: 600px;
        }
    .home{
        display: flex;
        justify-content: start;
    }
    .name{
    font-size: 4.2rem;
    color: rgb(247, 242, 239);
    font-family: var(--h1Fontfamily);
    }
    .title{
    padding: 1rem 0;
    font-size: 2.3rem;
    color: rgb(116, 243, 12);
    font-family: var(--h2Fontfamily);
    }
    .subtitle{
    padding: 1rem 0;
    font-size: 1.4rem;
    color: rgb(15, 183, 138);
    font-family: var(--pFontfamily);
    font-weight: 800;
    }
}
/* End home */
/* Divider */
.divider{
    height: 7px;
    background: linear-gradient(to right, rgb(244, 88, 22),rgb(234, 214, 214), rgb(244, 31, 144), rgb(13, 133, 4));
}
/* End Divider */
/* About */
.about-section{
    background-color: rgba(0, 0, 0, 0.58);
    padding: 0 .5rem;
}
.about-title{
    text-align: center;
    font-family: var(--h1Fontfamily);
    font-size: 2.4rem;
    color: whitesmoke;
}
.about-image img{
    width: 100%;
    border-radius: .4rem;
}
.about-message{
    text-align: justify;
    color: aliceblue;
    font-family: var(--pFontfamily);
}
@media screen and (min-width: 576px) {
    .about-details{
        height: 400px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: -2.3rem;
    }
    .about-image, .about-text{
        width: 50%;
        display: flex;
        justify-content: center;
    }
    .about-image img{
        width: 250px;
        height: 250px;
        border-radius: 50%;
    }
    .about-text{
        font-size: .82rem;
    }
}

@media screen and (min-width: 768px) {
    .about-details{
        height: 400px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: -5.5rem;
        flex-shrink: 0;
        margin-top: -2rem;
    }
    .about-image, .about-text{
        width: 50%;
        display: flex;
        justify-content: center;
    }
    .about-image img{
        width: 300px;
        height: 300px;
        border-radius: 50%;
    }
    .about-text{
        font-size: 1rem;
        padding: 0 1rem;
    }
}
@media screen and (min-width: 992px) {
    .about-details{
        height: 450px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: -3rem;
    }
    .about-image, .about-text{
        width: 50%;
    }
    .about-image img{
        width: 400px;
        height: 400px;
        border-radius: 50%;
        /* border: 1px dashed wheat; */
    }
    .about-text{
        font-size: 1rem;
        border-left: 2rem solid orange;
        padding: 0 1rem;
    }
}
/* End About */
/* Capability */
.capability-section{
    background-color: aliceblue;
    padding: 0 .5rem;
}
.capability-intro{
    text-align: center;
}
.capability-title{
    font-family: var(--h1Fontfamily);
    font-size: 2.4rem;
    text-shadow: 1px 3px 1px rgba(255, 111, 0, 0.306);
}
.capability-title span{
    color: orange;
    text-shadow: 2px 3px 1px gray;
}
.capability-blief{
    font-family: var(--pFontfamily);
}
.capability{
    text-align: center;
    background-color: grey;
    padding: 1rem;
    border-radius: .4rem;
    margin: .4rem 0;
}
.icon{
    color: beige;
    font-size: 1.4rem;
}
.cap-id{
    color: rgba(255, 255, 255, 0.678);
    text-shadow: 1px 2px 1px rgb(117, 212, 39);
    font-size: 1.8rem;
    font-family: var(--h2Fontfamily);
}
.cap-blief{
    font-family: var(--pFontfamily);
    padding: .8rem 0;
    color: rgb(114, 241, 199);
}
.button{
    text-decoration: none;
    border: 1px solid rgb(241, 247, 246);
    padding: 5px 7px;
    border-radius: 40px;
    color: antiquewhite;
    font-family: var(--pFontfamily);
    font-weight: bold;
}
@media screen and (min-width: 768px) {
    .capability{
        width: 45%;
        flex-shrink: 0;
    }
    .capabilities{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
@media screen and (min-width: 992px) {
    .capability{
        width: 30%;
        flex-shrink: 0;
    }
    .capabilities{
        display: flex;
        flex-wrap: wrap;
    }
}
/* End Capability */
/* Projects */
.projects-section{
    background-color: rgba(130, 152, 166, 0.477);
    padding: .4rem .8rem;
}
.projects-intro{
    text-align: center;
}
.intro-title{
    font-family: var(--h1Fontfamily);
    color: white;
    text-shadow: 1px 3px 1px orange;
}
.itro-blief{
    font-family: var(--pFontfamily);
}
.project{
    width: 100;
    margin: 1rem 0;
    background-color: gray;
    border-radius: .5rem;
    padding: .6rem;
}

.project-image img{
    width: 100%;
    border-radius: .5rem;
}
.proj-name{
    font-size: 1.5rem;
    color: rgb(3, 3, 93);
    text-align: center;
}
.icon-location{
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: .8rem;
    color: rgb(19, 57, 44);
}
.project-description{
    padding-bottom: 1rem;
    
}
.more-det{
    text-decoration: none;
    background-color: green;
    padding: .3rem 6rem;
    border-radius: 1rem;
    outline: 1px dashed white;
    outline-offset: -1.5px;
    color: aquamarine;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 576px) {
    .projects{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .project-description,.project-image{
        width: 47%;
    }
    .more-det{
        font-size: .9rem;
        width: 40%;
        border-radius: 20px;
        padding: .4rem .15rem;
        margin-bottom: -1.5rem;
    }
    .project{
        width: 98%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .proj-brief{
        padding: .6rem 0;
    }
    .mid{
        display: flex;
        flex-direction: row-reverse;
    }
}
/* End Projects */
/* Achievements */
.achievements{
    padding: 80px 10%;
    background: #f8f9fa;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:2.5rem;
    margin-bottom:10px;
}

.section-title p{
    color:#666;
}

.achievement-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.achievement-card{
    background:#fff;
    padding:35px 25px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.3s;
}

.achievement-card:hover{
    transform:translateY(-10px);
}

.achievement-card i{
    font-size:3rem;
    color:#28a745;
    margin-bottom:20px;
}

.achievement-card h1{
    font-size:3rem;
    color:#222;
    margin:10px 0;
}

.achievement-card h3{
    margin-bottom:10px;
}

.achievement-card p{
    color:#666;
    line-height:1.6;
}
/* End Achievements */
/* Contacts */
.cont-title{
    text-align: center;
    font-family: var(--h2Fontfamily);
    color: aqua;
    padding: 0 1.2rem;
}
.contact-section{
    width: 100%;
    padding: 0 1rem;
    background-color: #390721f2;
}
.left{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.adddresses{
    color: #28a745;
    font-size: 1rem;
    font-family: var(--pFontfamily);
    font-weight: bold;
}
.addresser{
    padding: .8rem 0;
}
.linkedin{
    color: #28a745;
    font-weight: bold;
    text-decoration: none;
}
.linkedin span{
    font-weight: bold;
}
.addr-blief{
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
}
.right{
    width: 100%;
}
.input{
    width: 95%;
    display: block;
    margin: .4rem 0;
    border: none;
    border: 2px solid green;
    height: 1.6rem;
    border-radius: 1.5rem;
    padding: 5px;
}
form{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
textarea{
    height: 100px;
    width: 95%;
    margin: 0 auto;
    border: 2px solid green;
    border-radius: 1.5rem;
    padding: .4rem;
}
.btn{
    width: 50%;
    padding: .5rem;
    border: none;
    border-radius: 2rem;
    font-size: 1rem;
    background-color: rgba(255, 89, 0, 0.575);
    color: aquamarine;
    font-weight: bold;
    margin-top: .5rem;
    margin-bottom: .5rem;
    outline: 2px dashed gray;
    outline-offset: -4px;
}
@media screen and (min-width: 576px) {
    form{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .left{
        width: 30%;
    }
    .right{
        width: 70;
        padding: 0 1.2rem;
    }
    .contacts{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
}
@media screen and (min-width: 768px) {
    .right,.left{
        width: 50%;
    }
}
/* End Contacts */

/* Places */
.places-section{
    background-color: #1a1f1b;
    padding: 1rem 2rem;
}
.places-section h2{
    color: #f8f9fa;
    text-align: center;
    font-family: var(--h2Fontfamily);
    font-size: 2.4rem;
}
.place{
    width: 100%;
}
.place-icon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}
.place-icon .nsi{
    width: 120px;
}
.place-icon .sua{
    width: 130px;
}
.place-icon h3{
    color: antiquewhite;
}
.place-icon img{
    width: 175px;
}
@media screen and (min-width: 576px) {
    .place-icon{
        width: 50%;
        flex-shrink: 0;
    }
    .place-icon h3{
        text-align: center;
        font-size: 1.1rem;
    }
    .place{
        display: flex;
        flex-wrap: wrap;
    }
}
@media screen and (min-width: 768px) {
    .place-icon{
        width: 25%;
        flex-shrink: 0;
    }
    .sat h3{
        text-align: center;
        font-size: 1rem;
        margin-top: -2rem;
    }
    .sat{
        margin-top: -1.7rem;
    }
    .place-icon .tas{
        width: 135px;
    }
    .jina{
        margin-top: -1rem;
    }
}
.place-icon img{
    animation: rotate 8s infinite ease-in-out;

}
/* End Places */
footer{
    width: 100vw;
    height: 100px;
    background-color: #04011c;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}