*{
    font-size: 16px;
    box-sizing: border-box;
}
body{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-around;
}
.main-content{
    position:relative;
    margin-top: 10px;
    min-height: 85vh;
    width: 90%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    margin: 0 auto;
}
.overview{
    box-sizing: border-box;
    width: 90%;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    /* background-color: #424242; */
    padding: 10px;
    margin: 0 auto;
}
.major-title{
    padding: 10px;
    font-size: 25px;
    font-weight: 900;
}
.minor-title{
    padding-bottom: 20px;
    padding-left: 10px;
}
.image-container{
    height: 200px;
    width: 200px;
    background: blue;
    border-radius: 50%;
    background: url("../../images/fagapass.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

}
.download-cv{
    background: #77BDF1;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;

}
/* About me section */
.about-me{
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 20px auto;
}
.headers, .titles{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.titles{
    padding: 10px;
}
.title-text{
    font-size: 25px;
    font-weight: 900;
    /* padding: 5px; */
}
.sub-title{
    font-size: 12px;
    font-weight: 600;
    letter-spacing:6px;
}
.row-lines{
    display: flex;
    align-items: center;
}
.first-line, .middle-line, .last-line{
    width: 50px;
    height: 2px;
    background: #4B4B4B;
}
.middle-line{
    background: #FF4C1F;
    height: 10px;
    border-radius: 10px;
}
.about-me-content{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin: 20px 0;
}
.about-me-left{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    background-image: url("http://localhost/portfolio/images/faga.png");
    background-repeat: no-repeat;
    background-size: contain;
}
.about-me-left, .about-me-right{
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 5px;
}
.about-me-right h1{
    padding: 0 10px;
    font-size: 20px;
    font-weight: 900;
}
.about-me-right p{
    line-height: 20px;
    /* letter-spacing: 2px; */
    padding: 10px;
    text-align: justify;
    font-weight: 200;
    font-size: 16px;
}
.Highlight{
    display: flex;
    flex-direction: column;
    line-height: 30px;
  
}
.Highlight li{
    font-weight: 500;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 500;
    margin:  0 !important;
    padding: 0 !important;
}
.about-me-right .Highlight li::before {
    content: "•"; /* Insert content that looks like bullets */
    padding-right: 8px;
    color: red; /* Or a color you prefer */
    list-style-type: circle;
    font-size: 40px;
}
/* About me ends */


/* Resume section start here */
.resume-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 20px auto;
}
.left-section{
    display: flex;
    flex-direction: column;
    flex: 1;
    box-shadow: 6px 0 4px -3px #999;
}
.tab span.active {
    background-color: black;
    width: 70%;
    color: #FFF;
    border-radius: 0 50px 50px 0;
  }
.resume-menu{
    display: flex;
   
}
.resume-items{
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    width: 60px;
    margin: 0;
    padding: 20px 5px;
    color: white;
}

.resume-items i{
    color: #FFF;
    font-size: 25px;
}
.resume-title{
    padding: 20px 5px; 
}
.right-section{
    display: flex;
    flex-direction: column;
    flex: 3;
    padding: 20px 30px;
    align-self: stretch;
    justify-content: stretch;
    margin: 0 5px;
    height: inherit;
}

/* end of resume section */

/* educational qualification section */
.education-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 25px;
    font-weight: 900;

}
.educational-item{
    padding-bottom: 25px;
}
.education-title span{
    color: #FFF;
    background: #FF4C1F;
    border-radius: 30px;
    padding: 5px 10px;
}
.education-title li{
    font-size: 16px;
    color: #FF4C1F;
    margin: 0;
    padding: 0;
}
/* end section of educational qualification */

/* Work  Experience */
.tech-skills{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 30px;
}
.tech-skills li{
display: flex;
   flex: 1;
}
.loaders{
    background-color: rgb(192, 192, 192);
    width: 80%;
    border-radius: 15px;
    height: 20px;
    box-sizing: border-box;
}
.skill {
    background-color: rgb(116, 194, 92);
    color: white;
    padding: 3px;
    text-align: right;
    font-size: 14px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.html {
    width: 80%;
    height: 100%;
}

.php {
    width: 90%;
    height: 100%;
}

.hobbies{
    display: flex;
    flex-direction: column;
}
.hobbies li{
    list-style-type: none;
}
a{
    text-decoration: none;
}
/* end of work experience section */
.hireme{
    scroll-behavior: smooth;
    scroll-snap-align: center;
    scroll-margin: 20px;
  }
.hireme-row{
    display: flex;
    /* flex-direction: column; */
    width: 100%;
    flex:1;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding:30px 10px;
    box-sizing: border-box;
    margin: 10px 0;
}
.contact-me{
    display: flex;
    flex: 1;
}
.form-container{
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #E4E4E6;
    padding: 20px;
    border-radius: 10px;
}
textarea, input{
    background: #D6D6D8;
    border: none;
    outline: none;
    border-radius: 5px;
}
.form{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.form-group{
    display: flex;
    flex-direction: column;
    padding: 5px 0;
}
.form-control{
    padding: 10px;
    border-radius: 5px;
    /* border: 1px solid #333; */
    outline: none;
}
.btn {
    padding: 10px;
    border-radius: 5px;
    border: none;
    outline: none;
    background: #383F48;
    color: #FFF;
    font-weight: 700;
}