:root{
    --First: #FFF5E0;
    --Second: #1db837;
    --Third: #1f65b6;
    --Fourth: #141E46;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    background-color: var(--First);
}

.main{
    display: flex;
    position: relative;
    height: 100%;
}
.layout{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 25%;
    height: 100%;
    position: fixed;
    border: 5px solid var(--Second);
}
.layout2{
    width: 75%;
    margin-left: auto;
}
.mainHead{
    color: var(--Fourth);
    font-weight: 900;
    font-size: 25px;
    padding: 10% 0%;
}
.navBar{
    width: 80%;
}
.navList{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.items{
    text-align: center;
    display: visible;
    list-style: none;
    font-weight: 800;
    font-size: 25px;
    margin: 10% 0%;
    border-radius: 5%;
    background-color: var(--First);
}
.items:hover{
    cursor: pointer;
    background-color: var(--Third);
}
.homeBar{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-top: 5%;
}
.intro{
    width: 40%;
    text-align: center;
}
.candidateName{
    border-bottom: 2px solid var(--Second);
    font-size: 35px;
}
.candidateAbout{
   font-size: 18px;
   padding-top: 15%;
   font-weight: 900;
}
.candidateImage{
    box-shadow: 5px 5px var(--Second);
    width: 20%;
    height: 20%;
    border-radius: 10%; 
}
.button{
    display: flex;
    align-items: center;
    justify-content: left;
    padding-bottom: 5%;
    margin-left: 15%;
}
.contactBtn{
    margin-right: 5%;
    margin-top: 5%;
    padding: 10px 25px;
    font-weight: 800;
    font-size: 15px;
    color: white;
    border-radius: 5%;
    background-color: var(--Second);
}
.myResume{
    margin-top: 5%;
    padding: 10px 25px;
    font-weight: 800;
    font-size: 15px;
    color: white;
    border-radius: 5%;
    background-color: var(--Second);
}
.contactBtn:hover{
    cursor: pointer;
    background-color: var(--Third);
}
.myResume:hover{
    cursor: pointer;
    background-color: var(--Third);
}
.educationSection{
    font-size: 17px;
    width: 60%;
}
.educationBar{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.schoolImage{
    width: 15%;
}
.university {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    margin-bottom: 5%;
    font-weight: 900;
    padding-left: 3%;
}
.school1{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   font-weight: 900;
   padding-left: 3%;
}
.school2{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   margin-bottom: 5%;
   font-weight: 900;
   padding-left: 3%;
}
.list1, .list2, .list3{
    padding: 3%;
}
.allHead{
    color: white;
    font-size: 17px;
    background-color: var(--Second) ;
    text-align: center;
    margin: 5% 0%;
}
.skillBar{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 95%;
}
.skillBar3{
   display: flex;
   justify-content: center;
   align-items: center;
}
.skillBar2{
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-1{
    border: 3px solid var(--Second);
    width: 45%;
    padding: 5%;
    border-radius: 5%;  
}
.excelSec{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
}
.text{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    font-size: 17px;
    text-align: center;
    color: black;
    margin-top: 3%;
    margin-bottom: 5%;
    padding: 2% 15%;
}
.text:hover{
    background-color: var(--Third);
    cursor: pointer;
}
.course{
    font-size: 18px;
    border: 2px solid var(--Second);
    margin: 2% 0%;
    text-align: center;
}
.projectText{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    margin: 0% 10%;
    padding: 2% 8%;
    text-align: center;
    font-weight: 900;
}
.projectHead{
    text-align: center;
    padding-top: 2%;
    padding-bottom: 1%;
}
.projectHead1{
    text-align: center;
    padding-bottom: 1%;
}
.contactBar{
    height: 60%;
}
.contactInfo{
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    margin: 1% 30%;
    list-style: none;
}
.contactInfo:hover{
    cursor: pointer;
    color: var(--Third);
}
.contImage{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin-left: 25%;
}
.detailImg{
    width: 15%;
    border: 2px solid var(--Second);
    padding: 2% 2%;
    border-radius: 5%;
    margin: 5% 2%;
    margin-bottom: 20%;
}
.detailImg:hover{
    cursor: pointer;
    background-color: var(--Third);
}
a{
    color: var(--Fourth);
    text-decoration: none;
}
a:hover{
    color: white;
}
.footerContainer{
    font-size: 10px;
    text-align: center;
    margin-top: 10%;
    margin-bottom: 50%;
    background-color: var(--Second);
    color: white;
}

@media only screen and (max-width: 600px){
    .layout{
        display: none;
    }
    .layout2{
        width: 100%;
    }
    .homeBar{
        flex-direction: column-reverse;
    }
    .intro{
        width: 100%;
    }
    .candidateImage{
        width: 40%;
        margin: auto;
    }
    .educationBar{
        flex-direction: column;
    }
    .educationSection{
        padding-top: 10%;
        width: 90%;
    }
    .skillBar{
        flex-direction: column;
        width: 100%;
    }
    .excelSec{
        width: 100%;
    }
    .skillBar3{
        flex-direction: column;
        width: 100%;
    }
    .skillBar2{
        flex-direction: column;
        width: 100%;
    }
    .img-1{
        width: 30%;
    }
    .projectText{
        margin: 0% 5%;
    }
    .projectHead{
        padding-top: 10%;
    }
    .contactInfo{
        margin: 0%;
    }
    .button{
        padding-top: 5%;
    }
    li{
        list-style: none;
    }
}