/* Font */
@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;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}
/* Default */
.text-primary{
    color: #FD6E0A;
}

.btn-primary{
    background-color: #FD6E0A;
    color: #fff;
    padding: 20px 35px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid #FD6E0A;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover{
    background-color: #FFF8F3;
    color: #FD6E0A;
    border: 2px solid #FD6E0A;
}
.btn-secondary{
    background-color: #FFF8F3;
    color: #FD6E0A;
    padding: 20px 35px;
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid #FD6E0A;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-secondary:hover{
    background-color: #FD6E0A;
    color: #fff;
    border: 2px solid #FD6E0A;
}
.dark-1{
    color: #181818;
}
.dark-2{
    color: #474747;
}

.section-title{
    font-size: 38px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #181818;
    text-align: center;
}
.section-description{
    font-size: 20px;
    color: #757575;
    margin-bottom: 20px;
    line-height: 35px;
}

/* header */
header{
    background-color: #FFF8F3;
}
.header-bg{
    background-image: url("./images/developer.png"), url("./images/header_bg.png");
    background-repeat: no-repeat, no-repeat;
    background-position: top 50px left, bottom right;
    background-size: 130px 775px, 910px 500px;
    margin-left: 60px;
}

/* Nav */
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 200px;
    padding: 55px 0;
}
.nav-title{
    font-size: 50px;
    font-weight: 900;
}

nav ul{
    display: flex;
    align-items: center;
}

nav ul li{
    list-style: none;
    margin-right: 50px;
}
nav ul li:last-child{
    margin-right: 0;
}

nav ul li a{
    text-decoration: none;
    font-size: 20px;
}

.nav-link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.nav-link:hover {
  color: #FF6B35;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #FF6B35;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Banner */
.banner{
    display: flex;
    justify-content: space-between;
    margin: 0 38px 0 200px ;
}
.banner-content{
    max-width: 585px;
    margin-top: 140px;
    margin-bottom: 165px;
}
.banner-greetings{
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 20px;
}

.banner-title{
    font-size: 85px;
    font-weight: 800;
    margin-bottom: 30px;
}
.banner-description{
    font-size: 18px;
    color: #757575;
    margin-bottom: 40px;
}
.banner-profile-pic{
    width: 586px;
    height: 675px;
    margin-top: 37px;
}

.banner-content button{
    margin-bottom: 20px;
}

.banner-content .btn-primary{
    margin-right: 30px;
}

/* Main */
main, .footer-container{
    max-width: 1340px;
    margin: 0 auto;
}


/* About */
#about{
    margin: 120px auto;
    background-color: #FFF8F3;
    border-radius: 5px;
    padding: 140px 210px;
    text-align: center;
}

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

.item-title{
    font-size: 20px;
    color: #757575;
    font-weight: 400;
    margin-bottom: 8px;
    margin-top: 20px;
}
.item-description{
    font-size: 22px;
    font-weight: 700;
}

/* Skill */
#skills{
    margin-bottom: 130px;
}
.skill-details{
    text-align: center;
    padding: 30px 160px;
}

.skill-container{
    display: flex;
    gap: 25px;
    justify-content: space-between;
}

.skill{
    padding: 35px;
    box-shadow: 0 6px 50px 0 rgba(0, 0, 0, 0.06);
    border-radius: 5px;
}

.skill img{
    border-radius: 6px;
}

.skill-title{
    font-size: 22px;
    font-weight: 700;
    margin: 25px 0;
}

.skill-description{
    font-size: 18px;
    color: #757575;
    line-height: 30px;
}

/* Resume */
#resume{
    margin-bottom: 130px;
}

.resume-container{
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
}
.resume-column hr{
    color: #D1D1D1;
    margin-bottom: 30px;
}

.resume-column-title{
    font-size: 33px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 30px;
}

.experience-title{
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #474747;
}

.experience-subtitle{
    font-size: 22px;
    font-weight: 600;
    color: #757575;
    margin-bottom: 20px;
}

.experience-description{
    font-size: 18px;
    color: #757575;
    line-height: 30px;
    padding-right: 90px;
    margin-bottom: 30px;
}

.resume-button{
    text-align: center;
}

/* Footer */
footer{
    background-color: #FFF8F3;
    padding: 130px 0;
}

.footer-container{
    display: flex;
    gap: 130px;
}
.footer-column{
    flex: 1;
}
.footer-column .section-title{
    text-align: left;
}

.footer-description{
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 30px;
}

.footer-social{
    display: flex;
    gap: 30px;
}

.footer-social a img{
    width: 28px;
    height: 28px;
}

.footer-input, .footer-textarea{
    font-size: 18px;
    color: #757575;
    width: 100%;
    padding: 20px 30px;
    border: none;
    margin-bottom: 25px;
    border-radius: 5px;
    display: block;
}

input::placeholder, textarea::placeholder {
  font-size: 18px;
  color: #757575;
}



/* Responsive media queries */
@media screen and (max-width: 576px) {
    .skill-container, .resume-container,.footer-container, .about-items{
        flex-direction: column;
        gap: 0;
    }
    .skill-details{
        padding: 30px 40px;
    }
    .section-title{
        font-size: 28px;
        margin-bottom: 20px;
    }
    .section-description{
        font-size: 14px;
        line-height: 25px;
    }
    .skill{
        margin: 15px 50px 15px 50px;
        padding: 30px;
    }
    .skill-title{
        font-size: 18px;
        margin: 15px 0;
    }
    .skill-description{
        font-size: 14px;
        line-height: 25px;
    }
    #skills{
    margin-bottom: 90px;
    }

    /* Resume */
    #resume{
        margin-bottom: 90px;
    }
    .resume-container{
        margin-left: 40px;
        margin-right: 40px;
    }
    .space{
        margin-top: 50px;
    }
    .resume-column-title{
        font-size: 26px;
        margin-top: 60px;
    }
    .experience-title{
        font-size: 22px;
    }
    .experience-subtitle{
        font-size: 18px;
        margin-bottom: 15px;
    }
    .experience-description{
        font-size: 14px;
        line-height: 25px;
        margin-bottom: 20px;
    }

    /* Footer */
    footer{
        padding: 80px 0;
    }
    .footer-container{
        margin-left: 40px;
        margin-right: 40px;
    }

    .footer-social{
        margin-bottom: 80px;
    }
    .footer-social a img{
        width: 24px;
        height: 24px;
    }
    .footer-description{
        font-size: 14px;
        line-height: 25px;
        margin-bottom: 20px;
    }
    .footer-input, .footer-textarea{
        font-size: 14px;
        padding: 15px 20px;
    }

    input::placeholder, textarea::placeholder {
        font-size: 14px;
    }

    /* primary btn */
    .btn-primary, .btn-secondary{
        padding: 14px 24px;
        border-radius: 5px;
        font-size: 14px;
    }

    /* about */
    #about{
        margin: 100px 40px;
        padding: 80px 40px;
    }
    .about-items{
        margin-top: 50px;
    }
    .item-title{
        font-size: 16px;
        margin-top: 40px;
    }
    .item-description{
        font-size: 18px;
        font-weight: 700;
    }

    /* Header */
    .header-bg{
        background-image: none;
        margin-left: 0px;
    }

    /* Nav */
    nav{
        flex-direction: column;
        margin: 0 40px;
        padding: 20px 0;
        border-bottom: 1px solid #ddd;
    }
    .nav-title{
        font-size: 40px;
        font-weight: 900;
        margin-bottom: 20px;
    }
    nav ul li{
        margin-right: 30px;
    }
    nav ul li:last-child{
        margin-right: 0;
    }
    nav ul li a{
        font-size: 16px;
    }

    /* Banner */
    .banner{
        flex-direction: column;
        margin: 0 40px ;
    }
    .banner-content{
        margin-top: 100px;
        margin-bottom: 30px;
    }
    .banner-greetings{
        font-size: 30px;
        margin-bottom: 20px;
    }
    .banner-title{
        font-size: 50px;
        margin-bottom: 30px;
    }
    .banner-description{
        font-size: 14px;
        margin-bottom: 40px;
    }
    .banner-profile-pic{
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

}

@media screen and (min-width: 576px) and (max-width: 992px) {
    .skill-container, .resume-container,.footer-container{
        flex-direction: column;
        gap: 0;
    }
    .skill-container, .about-items{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-left: 40px;
        margin-right: 40px;
    }
    .skill-details{
        padding: 30px 70px;
    }
    .section-title{
        font-size: 30px;
    }
    .section-description{
        font-size: 15px;
        line-height: 25px;
    }
    .skill{
        padding: 30px;
    }
    .skill-title{
        font-size: 18px;
        margin: 15px 0;
    }
    .skill-description{
        font-size: 15px;
        line-height: 25px;
    }
    #skills{
    margin-bottom: 100px;
    }

   /* Resume */
    .resume-container{
        margin-left: 80px;
        margin-right: 80px;
    }
    .space{
        margin-top: 50px;
    }
    .resume-column-title{
        font-size: 28px;
        margin-top: 60px;
    }
    .experience-title{
        font-size: 24px;
    }

    .experience-subtitle{
        font-size: 20px;
        margin-bottom: 15px;
    }
    .experience-description{
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 20px;
    }

    /* Footer */
    .footer-container{
        margin-left: 80px;
        margin-right: 80px;
    }
    .footer-social{
        margin-bottom: 80px;
    }
    .footer-social a img{
        width: 26px;
        height: 26px;
    }
    .footer-description{
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 25px;
    }
    .footer-input, .footer-textarea{
        font-size: 16px;
        padding: 18px 20px;
    }

    input::placeholder, textarea::placeholder {
        font-size: 16px;
    }

    /* primary btn */
    .btn-primary, .btn-secondary{
        padding: 14px 24px;
        border-radius: 5px;
        font-size: 14px;
    }

    /* about */
    #about{
        margin: 100px 60px;
        padding: 80px 60px;
    }
    .about-items{
        margin-top: 20px;
    }
    .item-title{
        font-size: 16px;
        margin-top: 40px;
    }
    .item-description{
        font-size: 18px;
        font-weight: 700;
    }

    /* Header */
    .header-bg{
        background-size: 70px 430px, 400px 250px;
        margin-left: 25px;
    }

    /* Nav */
    nav{
        margin: 0 100px;
        padding: 35px 0;
    }
    .nav-title{
        font-size: 35px;
    }
    nav ul li{
        margin-right: 30px;
    }
    nav ul li:last-child{
        margin-right: 0;
    }
    nav ul li a{
        font-size: 14px;
    }

    /* Banner */
    .banner{
        margin: 0 30px 0 100px ;
    }
    .banner-content{
        max-width: 350px;
        margin-top: 60px;
        margin-bottom: 40px;
    }
    .banner-greetings{
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    .banner-title{
        font-size: 40px;
        margin-bottom: 20px;
    }
    .banner-description{
        font-size: 14px;
        margin-bottom: 20px;
    }
    .banner-profile-pic{
        width: 350px;
        height: auto;
        margin-top: 37px;
    }

    .banner-content button{
        margin-bottom: 20px;
    }

    .banner-content .btn-primary{
        margin-right: 10px;
    }

}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .skill-container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-left: 60px;
        margin-right: 60px;
    }
    #skills{
        margin-bottom: 120px;
    }
    main, .footer-container{
        max-width: 1140px;
        margin: 0 auto;
    }
    .skill-details{
        padding: 30px 160px;
    }
    .section-title{
        font-size: 32px;
        margin-bottom: 20px;
    }
    .section-description{
        font-size: 16px;
        line-height: 25px;
    }
    .skill{
        padding: 30px;
    }
    .skill-title{
        font-size: 18px;
        margin: 18px 0;
    }
    .skill-description{
        font-size: 16px;
        line-height: 25px;
    }
    #skills{
    margin-bottom: 120px;
   }

   /* Resume */
    .resume-container{
        margin-left: 60px;
        margin-right: 60px;
    }
    .resume-column-title{
        font-size: 28px;
        margin-top: 60px;
    }
    .experience-title{
        font-size: 24px;
    }
    .experience-subtitle{
        font-size: 20px;
        margin-bottom: 15px;
    }
    .experience-description{
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    /* Footer */
    .footer-container{
        margin-left: 60px;
        margin-right: 60px;
    }
    .footer-social a img{
        width: 26px;
        height: 26px;
    }
    .footer-description{
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 20px;
    }
    .footer-input, .footer-textarea{
        font-size: 16px;
        padding: 18px 20px;
    }
    input::placeholder, textarea::placeholder {
        font-size: 16px;
    }

    /* primary btn */
    .btn-primary, .btn-secondary{
        padding: 16px 28px;
        font-size: 15px;
    }

    /* about */
    #about{
        margin: 100px 80px;
        padding: 90px 100px;
    }
    .about-items{
        margin-top: 20px;
    }
    .item-title{
        font-size: 15px;
        margin-top: 40px;
    }
    .item-description{
        font-size: 17px;
        font-weight: 700;
    }

    /* Header */
    .header-bg{
        background-size: 80px 520px, 500px 250px;
        margin-left: 35px;
    }

    /* Nav */
    nav{
        margin: 0 120px;
        padding: 40px 0;
    }
    .nav-title{
        font-size: 40px;
    }
    nav ul li{
        margin-right: 35px;
    }
    nav ul li a{
        font-size: 15px;
    }

    /* Banner */
    .banner{
        margin: 0 35px 0 120px ;
    }
    .banner-content{
        max-width: 420px;
        margin-top: 80px;
        margin-bottom: 50px;
    }
    .banner-greetings{
        font-size: 32px;
        margin-bottom: 20px;
    }
    .banner-title{
        font-size: 50px;
        margin-bottom: 25px;
    }
    .banner-description{
        font-size: 15px;
        margin-bottom: 35px;
    }
    .banner-profile-pic{
        width: 360px;
        height: auto;
        margin-top: 37px;
    }
    .banner-content button{
        margin-bottom: 30px;
    }

    .banner-content .btn-primary{
        margin-right: 10px;
    }

}

@media screen and (min-width: 1200px) and (max-width: 1600px) {

    main, .footer-container{
        max-width: 1140px;
        margin: 0 auto;
    }
    .skill-details{
        padding: 30px 160px;
    }
    .section-title{
        font-size: 32px;
        margin-bottom: 20px;
    }
    .section-description{
        font-size: 16px;
        line-height: 25px;
    }
    .skill{
        padding: 30px;
    }

    .skill-title{
        font-size: 18px;
        margin: 18px 0;
    }
    .skill-description{
        font-size: 16px;
        line-height: 25px;
    }
    #skills{
    margin-bottom: 120px;
   }

   /* Resume */
    .resume-column-title{
        font-size: 28px;
        margin-top: 60px;
    }
    .experience-title{
        font-size: 24px;
    }
    .experience-subtitle{
        font-size: 20px;
        margin-bottom: 15px;
    }
    .experience-description{
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    /* Footer */
  .footer-social a img{
        width: 26px;
        height: 26px;
    }
    .footer-description{
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 20px;
    }
    .footer-input, .footer-textarea{
        font-size: 16px;
        padding: 18px 20px;
    }

    input::placeholder, textarea::placeholder {
        font-size: 16px;
    }

    /* primary btn */
    .btn-primary,.btn-secondary{
        padding: 17px 30px;
        border-radius: 5px;
        font-size: 16px;
    }

    /* about */
    #about{
        padding: 100px 190px;
    }
    .about-items{
        margin-top: 20px;
    }
    .item-title{
        font-size: 17px;
        margin-top: 40px;
    }
    .item-description{
        font-size: 19px;
        font-weight: 700;
    }

    /* Header */
    .header-bg{
        background-size: 100px 600px, 700px 400px;
        margin-left: 50px;
    }

    /* Nav */
    nav{
        margin: 0 160px;
        padding: 45px 0;
    }
    .nav-title{
        font-size: 40px;
    }
    nav ul li{
        margin-right: 45px;
    }
    nav ul li a{
        font-size: 16px;
    }

    /* Banner */
    .banner{
        margin: 0 38px 0 160px ;
    }
    .banner-content{
        max-width: 550px;
        margin-top: 100px;
        margin-bottom: 140px;
    }
    .banner-greetings{
        font-size: 35px;
    }
    .banner-title{
        font-size: 70px;
        margin-bottom: 20px;
    }
    .banner-description{
        font-size: 15px;
        margin-bottom: 35px;
    }
    .banner-profile-pic{
        width: 500px;
        height: auto;
    }
    .banner-content button{
        margin-bottom: 20px;
    }

    .banner-content .btn-primary{
        margin-right: 20px;
    }


}