/* google fonts linkup */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

*{
    padding: 0;
    margin: 0;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
}

.container{
    width: 1140px;
    margin: 0 auto;
}

.primary-text{
    color: #FD6E0A;
}

.primary-btn{
    border: 0;
    border-radius: 5px;
    background-color: #FD6E0A;
    padding: 20px 38px;
    transition:  background-color 2s linear;
}

.white-btn{
    color: #fff;
}

.section-title{
    color: #181818;
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.section-description{
    color: #757575;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 30px;
    text-align: center;
}

.border{
    border-bottom: 1px solid #D1D1D1;
}

/* header section styles  */
header{
    background-color: #FFF8F3;
    background-image: url('../images/header_bg.png'), url('../images/developer.png');
    background-repeat: no-repeat;
    background-position: bottom right, left;
}

/* navigation section styles */
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 35px;
}

nav .nav-title{
    font-size: 45px;
    font-weight: 800;
}

nav ul {
    display: inline-flex;
}

nav ul li{
    margin-right: 15px;
    padding: 20px;
}

nav ul li:hover a{
    color: #000;
}

nav ul li:hover .primary-btn{
    background-color: #dd5c00;
    transition:  background-color 2s linear;
}

nav ul li a{
    color: rgb(68, 68, 68);
    font-size: 20px;
    font-weight: 400;
}

/* banner section styles */
.banner{
    display: flex;
    align-items: center;
}

.banner-sub-title{
    color: #474747;
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 12px;
}

.banner-title{
    color: #181818;
    font-size: 54px;
    font-weight: 800;
    margin-bottom: 20px;
}

.banner-description{
    color:#757575;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 50px;
}

.banner-content a{
    font-size: 20px;
    font-weight: 700;
    margin-right: 30px;
}

.fa-download,
    .fa-phone{
    margin-right: 8px;
}

.secondary-btn{
    color: #FD6E0A;
    padding: 20px 25px;
    border: 1px solid #FD6E0A;
    border-radius: 5px;
}

.banner img{
    width: 100%;
    height: 100%;
}

/* about section styles  */
.about{
    text-align: center;
    margin-top: 130px;
    padding: 130px;
    background-color: #FFF8F3;
    border-radius: 15px;
    border: 1px solid #FFF8F3;
}

.about .about-info-container{
    display: flex;
    justify-content: space-around;
}

.about-info .info-title{
    color: #757575;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 12px;
}

.about-info .info-description{
    color: #474747;
    font-size: 20px;
    font-weight: 600;
}

/* what-i-do section styles */
.what-i-do{
    margin-top: 130px;
}

.skills-container{
    display: flex;
    gap: 35px;
    margin-top: 60px;
}

.skills{
    background: #FFFFFF;
    box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 30px;
}

.skill-title{
    color: #181818;
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 20px;
}

.skill-description{
    color: #757575;
}

/* resume section styles */
.resume{
    margin-top: 130px;
}

.resume-context-container{
    display: flex;
    gap: 50px;
    margin-top: 100px;
}

.resume-item-title{
    color: #474747;
    font-size: 30px;
    font-weight: 700;
}
.title{
    color: #474747;
    font-size: 25px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 10px;
}

.sub-title{
    color:  #757575;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.description{
    color: #757575;
    margin-bottom: 30px;
}

.resume-button{
    margin-top: 50px;
    text-align: center;
}

/* contact section styles  */
.contact{
    margin-top: 130px;
    background-color: #FFF8F3;
}

.contact-container{
    display: flex;
    gap: 115px;
    padding: 130px 0px;
}

.contact .section-title,
.contact .section-description{
    text-align: left;
}

.contact .section-description{
    margin-bottom: 18px;
}

.social-icon a{
    color: #FD6E0A;
    margin-right: 20px;
    font-size: 18px;
    font-weight: 800;
}

.contact input[type="text"],
input[type="email"],
textarea{
height: 35px;
width: 100%;
padding: 18px 30px;
margin-bottom: 24px;
border: 0;
border-radius: 5px;
}

/* footer section styles */
footer p{
    margin: 50px 0 30px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}




/* =======================responsive styles=================== */
/* responsive styles for extra extra large devices  */
@media screen and (min-width:1400px) {
    .container{
        width: 1320px;
        margin: 0 auto;
    }
    .about,
    .what-i-do,
    .resume,
    .contact{
        margin-top: 130px;
    }
    
}

/* responsive styles for large devices */
@media screen and (min-width:992px) and (max-width:1199px) {
    .container{
        width: 960px;
    }    

    /* about section styles  */
    .about {
        padding: 130px 80px;
    }
}


/* responsive styles  for medium devices */
@media screen and (min-width:768px) and (max-width:991px) {
 .container{
    width: 720px;
 }   

 .primary-btn {
    padding: 20px;
}

 /* header section styles  */
 .banner{
    flex-direction: row-reverse;
    padding: 50px 0;
 }

 .banner-content a {
    font-size: 16px;
    margin-right: 0;
    margin-right: 8px;
}

 .banner img {
    width: 50%;
    position: relative;
    bottom: -50px;
}

/* about section styles  */
.about {
    padding: 60px 30px;
}

.about .about-info-container {
    flex-direction: column;
    gap: 15px;
}

.about-info .info-title {
    margin-bottom: 0;
}

/* what-i-do section styles  */
.skills-container {
    flex-wrap: wrap;
    justify-content: center;
}

.skills {
    width: 35%;
}

/* resume section styles  */
.resume-context-container {
    flex-direction: column;
    text-align: center;
}

/* contact section styles  */
.contact-container {
    display: block;
}

.contact input[type="text"], input[type="email"], textarea {
    width: 90%;
}

}

/* responsive styles for small devices */
@media screen and (min-width:576px) and (max-width:767px) {
    .container{
        width: 540px;
    }

    /* header section styles  */
    nav{
        flex-direction: column;
        gap: 15px;
    }

    .banner{
        flex-direction: column;
    }

    /* about section styles  */
    .about {
        margin-top: 100px;
        padding: 90px 20px;
    }

    .about .about-info-container {
        flex-direction: column;
        gap: 15px;
    }

    /* what-i-do section styles  */
    .what-i-do {
        margin-top: 100px;
    }

    .skills-container {
        flex-direction: column;
    }

    /* resume section styles  */
    .resume {
        margin-top: 100px;
    }

    .resume-context-container {
        flex-direction: column;
        margin-top: 50px;
        gap: 30px;
    }
    
    /* contact section styles  */
    .contact {
        margin-top: 100px;
    }

    .contact-container {
        gap: 70px;
        padding: 90px 0px;
        flex-direction: column-reverse;
    }

    .contact input[type="text"], input[type="email"], textarea {
        width: 80%;
    } 
    
}

/* responsive styles for extra small devices */
@media screen and (max-width:575px) {
    .container{
        width: 100%;
    }

    .primary-btn{
        padding: 20px;
    }

    .section-description {
        padding: 0 20px;
    }
/* header section  */
    header{
        background-image: url('../images/header_bg.png');
        background-position: bottom right;
    }

    nav{
        flex-direction: column;
        padding-top: 20px;
    }
    
    nav ul {
        flex-direction: column;
    }

    nav ul li{
        margin-right: 0;
        padding: 15px 0;
    }

    nav ul li:nth-child(2){
        padding: 15px 0 35px;
    }
    .banner{
       flex-direction: column;
       text-align: center;
    }

    .banner-sub-title{
        font-size: 40px;
        margin: 20px 0 5px;
    }

    .banner-content > div{
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .banner-content a{
        margin-right: 0;
    }

    .secondary-btn{
        padding: 20px 44px;
    }

    /* about section styles */
    .about{
        margin-top: 100px;
        padding: 60px 0;
    }

    .about .about-info-container {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .about-info .info-title {
        margin-bottom: 0;
    }

    /* what-i-do section styles  */
    .what-i-do{
        margin-top: 100px;
    }

    
.skills-container{
    flex-direction: column;
    gap: 0;
}

.skills {
    margin: 20px;
}

/* resume section styles */
.resume{
    margin-top: 100px;
}

.resume-context-container{
    gap: 0;
    margin-top: 0;
    flex-direction: column-reverse;
    text-align: center;
}

.education-section{
    margin-top: 30px;
}

.title {
    margin-top: 20px;
}

.description {
    padding: 0 20px;
}

/* contact section styles  */
.contact{
    margin-top: 100px;
}

.contact-container{
    gap: 0;
    padding: 50px 0px 40px;
    flex-direction: column-reverse;
}

.contact .section-title,
.contact .section-description{
    text-align: center;
}

.contact .section-title{
    margin: 30px 0 15px;
}

.contact form{
    text-align: center;
}

.contact input[type="text"],
input[type="email"],
textarea{
    height: 30px;
    width: 85%;
    padding: 18px 15px;
}

.social-icon {
    text-align: center;
}

.social-icon a{
    font-size: 22px;
}

/* footer section styles  */
footer p {
    margin: 30px 0;
}
}


.hide{
    display: none;
}