.name{
    width: 100%;
    height: 750px;
    background-color: rgb(255, 254, 254);
    background-image: url(./images/white-line-background.jpg);
    background-repeat: no-repeat;
    background-size: 1350px 750px;
}
.name h5{
    font-weight: 700;
    position: absolute;
    margin-left: 9rem;
    margin-top: 7.5rem;
    font-size: 1.2rem;
    /* font-size: medium; */
    letter-spacing: 0.1rem;
}
.name h1{
    font-size: 85px;
    font-weight: 620;
    /* font-family: sans-serif; */
    margin-left: 9rem;
    margin-top: 9.5rem;
    position: absolute;
}

.name h2{
    margin-top: 18rem;
    color: orange;
    margin-left: 9rem;
    position: absolute;
    letter-spacing: 0.1rem;
    font-weight: 600;
}
.name h3{
    color: #9f9f9f;
    margin-left: 9rem;
    margin-top: 22rem;
    position: absolute;
    font-weight: 450;
}
.check-resume{
    width: 15rem;
    height: 3rem;
    background-color: rgb(230, 161, 34);
    box-shadow: 0 15px 15px rgb(0 0 0 / 16%);
    border: 1px solid transparent;
    border-radius: 10rem;
    margin-left: 9rem;
    margin-top: 28rem;
    position: absolute;
    text-transform: uppercase;
    color: black;
    text-align: center;
    
}
.check-resume:hover{
    background-color: rgb(233, 220, 40);
}
.name h4{
    margin-top: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
}
@media screen  and (max-width:620px){
    .name h4,.name h1,.name h3,.name h2,.name h5,.check-resume{
      margin-left: 6rem;   
 }
}
@media screen  and (max-width:620px){
    .name h4,.name h1,.name h3,.name h2,.name h5,.check-resume{
      margin-left: 6rem;   
 }
}
.section-2-title{
    color: gray;
    font-weight: 600;
    letter-spacing: 0.2rem;
    font-size: 1.2rem;

}
.projects{
    margin-top: -80px;
    background-color: rgb(231 226 226);
}
#projects{
    padding: 58px;
}
@media screen  and (max-width:620px){
    #projects{
        padding: 10px;
    }
}
.project-box{
    padding: 1rem;
    display: flex;
    position: relative;
    height: 15rem;
    flex-direction: column;
    box-shadow: 0 15px 15px rgb(0 0 0 / 16%);
}
#background-colour-1{
    background-image: linear-gradient(135deg,#fad8f4 50%,#ac76a9);

}
#background-colour-2{
    background-image: linear-gradient(135deg,#f3f57b 50%,#74c074);
}
#background-colour-3{
    background-image: linear-gradient(135deg,#7bbef5 50%,#eec9b1);
}
.project-box-content{
    height: 100%;
    display: contents;
    transition-property: color;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
    transition-delay: .1s;

}
.project-wrapper{
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(23rem,0fr));;
    grid-gap: 4rem;
}
.project-box-content-title{
    display: flex;
    color: #414141;
}
.github-link{
    margin-left: 7rem;
}
.project-description{
    font-weight: 600;
    font-size: 14px;
    margin-top: 10px;
    color: #414141;
}
.Lists{
    font-size: 16px;
    font-weight: 500;
    color: #414141;
    font-family: sans-serif;

}
/* .icons{
    display: grid;
} */
/* .icon-child{
    width: 35px;
    height: 35px;
} */
.project-icons{
    max-width: 35px;
    margin-top: 1rem;
    margin-left: 1rem;
}
/* skill section ***************************************************************************/
.skills{
    width: auto;
    height: auto;
    background-color: rgb(231 226 226);

}
#background-colour-4{
    background-image: linear-gradient(135deg,#e9f8eb 50%,#f5e4f4);

}
#background-colour-5{
    background-image: linear-gradient(135deg,#f1e8d5 50%,#e6ebf3);
}
#background-colour-6{
    background-image: linear-gradient(135deg,#f5e6e6 50%,#fafceb);
}
.skills{
    padding: 58px;
}
@media screen and (max-width: 620px){
    .skills{
        padding: 8px;
    }
}
.section-3-title{
    color: gray;
    font-weight: 600;
    letter-spacing: 0.2rem;
    font-size: 1.2rem;

}
.skill-box{
    padding: 1rem;
    display: flex;
    position: relative;
    height: 15rem;
    flex-direction: column;
    box-shadow: 0 15px 15px rgb(0 0 0 / 16%);
}
.skill-box-content{
    height: 100%;
    display: contents;
    transition-property: color;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
    transition-delay: .1s;

}
.skill-wrapper{
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(23rem,0fr));;
    grid-gap: 4rem;
}
.skill-box-content-title{
    display: flex;
    color: gray;}
.skill-description{
    font-weight: 600;
    font-size: 14px;
    margin-top: 10px;
    color: #414141;
}
.image{
    margin-left: 0rem;
    margin-top: 1rem;
    width: 21rem;
    height: 8rem;
}
/* contact section ********************************************************************************** */
#section{
    padding: 4rem;
}
.contact-map-image{
    width: 75rem;
    height: 21rem;
    object-fit: cover;
    background-image: url(./images/map.jpg);
    flex-direction: column;
    box-shadow: 0 15px 15px rgb(0 0 0 / 16%);
}

.contact-details{
    height: 15rem;
    margin: 5rem;
    position: absolute;
    background-image: linear-gradient(276deg,#fbeedb 10%,#fdc0ac);
    box-shadow: 0 15px 15px rgb(0 0 0 / 16%);
}
#contact{
    margin-bottom: 4rem;
}
.contact-wraper{
    margin-top: 5rem;
    grid-template-columns: repeat(auto-fit,minmax(23rem,0fr));;
    grid-gap: 4rem;

}
.contact-box{
    padding: 1rem;
    background-image: url(./images/map.jpg);
    height: 15rem;
    flex-direction: column;
    box-shadow: 0 15px 15px rgb(0 0 0 / 16%);
}
.profile
{
    max-height: 9rem;
    border-radius: 251px;
    float: left;
}
.contact-details-wraper{
    border-radius: 75px 0 0 0;
    margin-top: 5rem;
    grid-template-columns: repeat(auto-fit,minmax(23rem,0fr));;
    background-image: linear-gradient(135deg,#fbeedb 10%,#fdc0ac);  
    
}
.contact-details-box{
   
    padding: 1rem;
    position: relative;
    height: 15rem;
    box-shadow: 0 15px 15px rgb(0 0 0 / 16%);
    justify-content: space-around;
    flex-direction: column;
    display: flex;
    
    flex-wrap: wrap;
}
.contact-details-box h1,h2{
    color: rgb(7, 7, 7);
    font-size: 1.1rem;
    font-weight: 600px;
}
.contact-details-box h3{
    color: gray;
    font-size: 1.1rem;
    font-weight: 400px;
}
.contact-info{
    display: flex;
   position: relative;
   flex-direction: column;
}
/* footer section *************************************************************** */
.footer{
    width: 100%;
    height: 40px;
    margin-top: 5rem;
    text-align: center;
}
/*  end of footer section ********************************************************** */
body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0px;
    padding: 0;
    background-color: rgb(231 226 226);
}
body h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}