*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;


}
body{
    line-height:1.6;
    color:#333;
    background:#f9f9f9;
}
header{
    background:#333;
    color:#fff;
    padding:15px 0;

}
nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:80%;
    margin:auto;

}
nav ul{
    list-style:none;
    display:flex;

}
nav ul li {
    margin-left:20px;

}
nav ul li a{
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}
nav ul li a :hover{
    color:#ff9800;

}
.logo{
    font-size:24px;
    font-weight:bold;
}
.hero{
    text-align:center;
    padding:80 px 20 px;
    background:linear-gradient(to right ,#4facfe,#00f2fe);
    color:white;

}
.hero h1{
    font-size:2.5rem;

}
.hero span{
    color:#ff9800;

}
.btn{
    display:inline-block;
    margin-top:20px;
    padding:10px 20px;
    background:#ff9800;
    color:white;
    text-decoration: none;
    border-radius:5px;

}
.btn:hover{
    background:#e68900;
}
section{
    padding:60px 20px;
    width:80%;
    margin:auto;

}
h2{
    text-align:center;
    margin-bottom:20px;
    font-size:2rem;
    color:#333;

}
.skills-list{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}
.skills-list li{
    list-style:none;
    margin:10px;
    padding:10px 20px;
    background:#333;
    color:white;
    border-radius:5px;

}
.project{
    background:#fff;
    padding:20px;
    margin:15px 0;
    border-radius:#333;
    color:#fff;
    margin-top:20px;
}
form{
    max-width:500px;
    margin :auto;
    display:flex;
    flex-direction:column;


}
form label{
    margin-top:10px;
    font-weight:bold;

}
form input,from textarea{
    padding:10px;
    margin-top:5px;
    border:1px solid #ccc;
    border-radius:5px;
}
form button{
    margin-top:15px;
    padding:12px;
    border:none;
    background:#ff9800;
    color:white;
    border-radius:5px;
    cursor:pointer;
}
form button:hover{
    background:#e68900;
}
body{
    background: #f9f9f9;
    color:#333;
    font-family:Arial,sans-serif;
    transition: background0.3s,color 0.3s;
}
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    background:#ff9800;
    color:white;

}
#darkModeToggle{
    padding:8px 12px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    background:#333;
    color:#fff;

}
#darkModetoggle:hover{
    background:#555;
    
}
body.dark-mode {
    background:#1e1e1e;
    color:#f1f1f1;

}
body.dark-mode header{
    background:#333;


}
body.dark-mode form input,
body.dark-mode form textarea{
    background:#333;
    color:white;
    border:1px solid #555;

}
body.dark-mode form button{
    background:#444;
}
#projects{
    padding:40px 20px;
    text-align:center;

}
.project-card:hover{
    backgound:#fff;
    margin:20px auto;
    padding:20px;
    border-radius:10px;
    max-width:500px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    transition:transform 0.3s;

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

}
.project-card h3{
    margin-bottom:10px;

}
.project-card a{
    display:inline-block;
    margin-top:10px;
    text-decoration:none;
    color:#ff9800;
    font-weight:bold;
}