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

/* NAVBAR */
.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 50px;
    background:#0f172a;
    color:white;
    position:fixed;
    width:100%;
}

.logo{
    font-size:24px;
    font-weight:bold;
}

.nav-links a{
    color:white;
    text-decoration:none;
    margin:0 15px;
}

.btn{
    background:#38bdf8;
    padding:8px 18px;
    border-radius:20px;
    text-decoration:none;
    color:black;
}

/* HERO */
.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:120px 50px;
    background:linear-gradient(to right,#1e293b,#0ea5e9);
    color:white;
}

.hero-text{
    max-width:500px;
}

.hero-text span{
    color:#facc15;
}

.hero-btns button{
    margin:10px;
    padding:10px 20px;
    border:none;
    border-radius:20px;
    cursor:pointer;
}

.primary{
    background:#facc15;
}

.secondary{
    background:white;
}

.hero-img img{
    width:200px;
}

/* SERVICES */
.services{
    text-align:center;
    padding:50px;
}

.cards{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:30px;
}

.card{
    background:#f1f5f9;
    padding:20px;
    border-radius:10px;
    width:200px;
}

.card i{
    font-size:30px;
    margin-bottom:10px;
}

/* SKILLS */
.skills{
    text-align:center;
    padding:50px;
    background:#e0f2fe;
}

.skill-box{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.skill{
    background:#0ea5e9;
    color:white;
    padding:10px 20px;
    border-radius:20px;
}

/* CONTACT */
.contact{
    text-align:center;
    padding:50px;
}

form{
    display:flex;
    flex-direction:column;
    max-width:400px;
    margin:auto;
}

form input, form textarea{
    margin:10px 0;
    padding:10px;
}

form button{
    background:#0ea5e9;
    color:white;
    padding:10px;
    border:none;
}

/* FOOTER */
footer{
    background:#0f172a;
    color:white;
    text-align:center;
    padding:20px;
}

.icons i{
    margin:10px;
}

.copy{
    margin-top:10px;
    font-size:14px;
}