*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
/*shared style */
.font-open-sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
 
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.section-heading{
    max-width: 827px;
    text-align: center;
    margin:0 auto;

}
.section-heading h2{
    font-size:35px;
    font-weight: bold;
    margin-bottom:30px;
}
.section-heading p{
    font-size:18px;
    color:#757575;
    margin-bottom: 30px;
    line-height: 30px;
}

.btn{
    background-color: #FD6E0A;
    color:white;
    cursor: pointer;
    padding:18px 35px; /* TBLR */
    border-radius:5px;
    border:none;
    font-size:20px;
    font-weight:bold;
}
.logo h2{
   font-size: 40px;
   font-weight: 900;
}
.color-orange{
    color:#FD6E0A;
}
/*main style */

header{
   background: url('../images/developer.png'),url(../images/header_bg.png),#FFF8F3;
    background-position:top left , bottom right;
   background-repeat: no-repeat;
    background-color: #FFF8F3;
    padding-top: 50px;
    
}
nav{
    
    display:flex;
    justify-content: space-between;
    width:71%;
    max-width:1140px;
    
   
    margin:0px auto;
    
}

nav .menu {
  display: flex;
 list-style-type: none;
  gap:51px;
  align-items: center;
  
}
nav .menu a{
    font-size: 20px;
    color:#474747;
    text-decoration: none;
}
#banner{
    display:flex;
    margin:47px 38px 0 230px;
    justify-content: space-between;
    align-items: center; 
}
    
#banner .banner-content{
    max-width:585px;
}

#banner .banner-content h3{
    font-size: 45px;
    font-weight:600;
    color:#474747;
    margin-bottom:5px ;

    } 

#banner .banner-content h2{
    font-size: 80px;
    font-weight: bold;
    color:#181818;
   margin-bottom:20px ;
    

}
#banner.banner-content p{
  font-size:18px;
  color:#757575;
  line-height: 35px;
  margin-bottom:5px;
}

#banner .banner-content hero-btn{
display:flex;
justify-content: space-between;
align-items: center;


}
#banner .banner-image img {
      vertical-align:middle;
      transform: translateX(-120px);
      align-items: center;
}

#about{
    padding-top:131px;
    margin:0 auto;
   
}
#about .about-container{
    width:71%;
    max-width:1140px;
    margin:0 auto;
    text-align: center;
    background-color: #FFF8F3;
    padding:131px 156px;
}
.about-info{
    flex-wrap: wrap; 
}


#about .about-container .about-info{
    display:flex;
  justify-content: center;
   align-items: center;
  gap:20px;
   margin:0 auto;
  
    max-width: 900px;
    width:100%;
     flex-wrap:nowrap;
}
.about-info .info-card p{
   font-size: 20px;
   color: #757575;
   line-height:30px;
  
}
.about-info .info-card h6{
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap; 
}

#skills{
    
 padding-top:130px;
 margin: 0 auto;
 max-width: 1140px;
 width:71%;
 

}

#skills .skills-container{
  max-width:1140px;
  width:71%;
    margin:0 auto;
}

#skills .skills-container .skill-box{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:24px;
    
    
}
#skills .skills-container .skill-box .skill-card{
    padding:30px;
    max-width:450px;
    width:100%;
    box-shadow: 0 6px 50px 0 #00000028;
}

#skills .skills-container .skill-box .skill-card h3{
    font-size: 20px;
    font-weight: bold;
    color:#181818;
    margin-bottom: 20px;
}



#skills .skills-container .skill-box .skill-card p{   
     font-size: 16px;
    color:#757575;
       line-height: 28px;
     
}
#skills .skills-container .skill-box .skill-card img{   
     width:44px;
     margin-bottom: 30px;


}
.text-light-gray{
    color:#474747;
    
    font-weight: bold;
    font-size:30px;
    text-align: left;

}
.text-title-gray{
    color:#474747;
    font-weight: bold;
    font-size:25px;
    margin:0 auto;
   text-align: left;
}

#summary{
    margin:0 auto;
    text-align: center;
    margin-top:134px;
    margin-bottom:103px;
}


 #summary .container{
    display: flex;
    margin-top: 100px;
    margin-left: 100px;
    justify-content: space-between;
    align-items: center;
    gap:75px;
 }
 #summary h1{
    font-size: 35px;
    font-weight: bold;
    
    margin: 30px;
}
.uni-name{
     font-size: 20px;
     font-weight: 700;
    color:#757575;
    margin-top: 10px;
    text-align: left;
}
.details-para{
    font-size: 16px;
    color:#757575;
    margin-top: 20px;
    text-align: left;
}


.edu-info,.job-info{
    
    
    margin: 30px;
    text-align: left;
}
.line-breaker{
    width:558px;
    color: #d1d1d1;
}

.download-btn{
    margin-top:50px;
    
}
/* ===== Featured Projects ===== */
#featured-projects {
    padding: 80px 10%;
    background: #f9f9f9;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 32px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.project-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.project-card:hover {
    transform: translateY(-8px);
}

.project-card h3 {
    margin-bottom: 15px;
    color: #333;
}

.project-card p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #555;
}

.project-links a {
    display: inline-block;
    margin-right: 15px;
    text-decoration: none;
    font-weight: 600;
    color: #ff6600;
}

.project-links a:hover {
    text-decoration: underline;
}

#footer{
    background-color: #FFF8F3;
    padding: 50px;

    display: flex;
    justify-content: center;
    align-items: center;   /* vertical center */
    gap: 80px;             /* space between columns */

    margin-top: 120px;
}

.footer-container,
.contact{
    max-width: 500px;
}

.footer-container{
    text-align: left;
}

.footer-container h2,
.contact-form{
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 20px;
}

.footer-container p{
    font-size: 16px;
    color: #757575;
    line-height: 28px;
}

.icons{
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn i{
    font-size:30px;
    color:white;
}
.icons i{
    font-size: 30px;
    color: #FD6E0A;
    cursor: pointer;
}

/* FORM */
.contact{
    text-align: left;
}

.contact form{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

input,
textarea{
    width: 100%;
    max-width: 460px;
    padding: 18px;
    border-radius: 5px;
    border: none;
}

textarea{
    height: 180px;
    resize: none;
}

.submit-btn{
    width: 150px;
    height: 64px;
    background-color: #FD6E0A;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.submit-btn:hover{
    background-color: #e35f06;
}
#bottom-footer{
    background-color: #181818;
    color: white;
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
}