@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
}
.Body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* shared style  */
.shared-title{
    color: rgb(24, 24, 24);
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: center;
}
.shared-size{
    width: 959px;
    height: 467px;
    margin: 0px 195px;
    margin-top: 110px;
}
/* header image  */
.header-bg-image{
    background-image: url(../images/developer.png), url(../images/header_bg.png);
    background-repeat: no-repeat;
    height: 760px;
    background-position: top left, bottom right;
    /* position: absolute;
    background: rgb(255, 248, 243); */
}
/* nav style */
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    margin-left: 115px;
    margin-right: 110px;
}
.nav-title{
    font-size: 25px;
    font-weight: 800;
    line-height: 35px;  
    letter-spacing: 0%;
    text-align: left;
    margin-left: 115px;
}
.nav-title-color{
    color: rgb(253, 110, 10);
}
nav ul{
    display: flex;
    align-items: center;
    
}
nav ul li{
    list-style: none;
    margin-right: 25px;
}
nav ul li a{
    text-decoration: none;
    color: rgb(71, 71, 71);
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0%;
    text-align: left;
}
.btn{
    width: 120px;
    height: 50px;
    border: none;

    border-radius: 5px;
    background: rgb(253, 110, 10);
}
.btn-primary{
    /* width: 45px;
    height: 15px;
    left: 660px;
    right: -610px;
    top: 37px;
    bottom: -17px; */

    color: rgb(255, 255, 255);
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: 0%;
    text-align: center;
}

/* banner styles */
.banner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 845px;
}
.banner-content{
    max-width: 800px;
    height: 60px;
    /* left: 125px;
    right: -125px;
    top: 260px;
    bottom: -260px; */

    color: rgb(117, 117, 117);
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0%;
    text-align: left;
    margin: 0px auto; 
    
    /* border: 10px solid rebeccapurple; */
}
.banner-greetings{
    width: 105px;
    height: 45px;
    /* left: 120px;
    right: 90px;
    top: 150px;
    bottom: -50px; */

    color: rgb(71, 71, 71);
    font-size: 25px;
    font-weight: 600;
    line-height: 35px;
    letter-spacing: 0%;
    text-align: left;

    margin-right: 600px;
    margin-left: 115px;

}
.banner-title{
    width: 400px;
    height: 75px;
    /* left: 125px;
    right: -75px;
    top: 180px;
    bottom: -110px;  */

    color: rgb(24, 24, 24);
    font-size: 45px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0%;
    text-align: left;

    margin-right: 450px;
    margin-left: 115px;
}
.banner-describtion{
    width: 500px;
    height: 51px;
    color: rgb(117, 117, 117);
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0%;
    text-align: left;
    margin-right: 390px;
    margin-left: 115px;
}

.banner-profile-pic{
    width: 500px;
    height: 575px;
    /* left: 500px;
    right: 20px;
    top: 80px;
    bottom: 1700px; */
    margin-right: 33px;
}
.banner-btn-download{
    width: 170px;
    height: 55px;
    margin-left: 115px;
    margin-right: 25px;
    margin-top: 30px;
}
.banner-btn-contact{
    width: 170px;
    height: 55px;
}
.hero-about{
    max-width: 959px;
    height: 467px;
    border-radius: 10px;
    border-style: dotted;
    background: rgb(255, 248, 243);
    margin: 0px auto;
    margin-top: 110px;

    
}
.about-container{
width: 703px;
height: 244px;
/* left: 386px;
top: 1098px; */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 30;
padding: 0px;
box-sizing: border-box;
border: 1px solid rgb(0, 0, 0);
background: rgb(255, 255, 255);

margin: 111px 133px;
}

.about-title{
    width: 703px;
    height: 40px;
}
.about-document{
    width: 635px;
    height: 102px; 
    color: rgb(117, 117, 117);
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0%;
    text-align: center;
    margin-top: 25px;
}
.about-info{
    width: 664px;
    height: 51px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px;
    /* border: 2px solid rebeccapurple; */
}
.info{
    width: 120px;
    height: 51px;
    color: rgb(117, 117, 117);
    line-height: 25px;
    letter-spacing: 0%;
    text-align: center;
    /* border: 2px solid rebeccapurple; */
    
}
.info>p{
    font-weight: 400;
    font-size: small;
}
.skills{
    max-width: 959px;
    height: 467px;
    color: rgb(117, 117, 117);
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 100px;

}
.skills-title{
    width: 142px;
    height: 40px;
    margin: 25px 0px 0px 400px;
}
.skills-documents{
    width: 720px;
    height: 77px;
    margin: 25px 0px 0px 100px;
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0%;
    text-align: center;
}
.skill-card{
    width: 100%;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.skill-card .card{
    width: 227px;
    height: 320px;
    border-radius: 5px;
    box-shadow: 0px 6px 50px 0px rgba(0, 0, 0, 0.06);
    background: rgb(255, 255, 255);
}
.card img{
    width: 37px;
    height: 37px;
    /* left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%; */
    background: rgb(240, 219, 79);
    margin: 25px 164px 0px 25px
}
.card .card-title > h5{
    width: 148px;
    height: 23px;
    color: rgb(24, 24, 24);
    font-size: 17px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 0%;
    text-align: left;
    margin: 25px 53px 0px 25px;
    /* border: 2px solid red; */
}
.card p{
width: 168px;
height: 166px;
font-size: 13.6px;
font-weight: 400;
line-height: 23.8px;
letter-spacing: 0%;
text-align: left;
margin: 25px 28px 0px 25px;
}
.resume{
    max-width: 959px;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* border: 2px solid rebeccapurple; */
}
.resume-title{
    width: 387px;
    height: 41px;
    align-self: center;
    margin: 110.5px 487px 0px 487px;
}
.cv{
    margin-top: 96px;
    display: flex;
    justify-content: space-between;
}
.catagory{
    width: 200px;
    height: 34.5px;
    color: rgb(71, 71, 71);
    font-family: Open Sans;
    font-size: 25.5px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 0%;
    text-align: left;
    margin-top: 36px;
}
.degree{
    width: 344px;
    height: 29px;
    color: rgb(71, 71, 71);
    font-size: 21px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0%;
    text-align: left;
    margin-top: 25px;
}
.degree-from{
    margin-top: 8.5px;
    color: rgb(117, 117, 117);
    font-size: 17px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: 0%;
    text-align: left;
}
.cv-describtion{
    margin-top: 17px;
    width: 460px;
    height: 65px; 
}
.cv-border{
    /* Dark 05 */
    width: 474px;
    border: 1px solid rgb(209, 209, 209);
}
.resume-button{
    margin: 42.5px;
    align-self: center;
}

/* footer section */
.footer-section{
    /* Rectangle 14 */
    /* width: 1600px; */
    height: 780px;
    background: rgba(255, 248, 243, 1);
    margin: 0px auto;
    display: flex;
    gap: 100px
}
.footer-title{
    /* Lets Connect */
    width: 292px;
    height: 47px;
    color: rgba(24, 24, 24, 1);
    font-size: 35px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: left;
}
.footer-decribtion{
    width: 465px;
    height: 48px;
    color: rgba(71, 71, 71, 1);
    font-size: 13.6px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
    margin-top: 18px;
}
.connect{
    margin: 110.5px 0px 0px 195.5px;
}
.link{
    /* margin: 25.5px 0px 0px 195.5px; */
    margin-top: 25.5px;
    display: flex;
    gap: 24px;
}
.footer-link{
    width: 20.4px;
    height: 20.4px;
    color: rgba(253, 110, 10, 1);
}
.message{
    margin-top: 110.5px;
}
.inp-txt{
    /*Rectangle16*/width: 392px;
    height: 55px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 15px 0px 15px 25.5px;
    margin-bottom: 20.4px;
    border: none;
}
.txt-area{
/* Rectangle 16 */
    width: 392px;
    height: 153px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
    border: none;
    padding: 15px 0px 113.9px 25.5px;
}