*{
    box-sizing:border-box;
}



body{

    margin:0;

    background:#111;

    color:#eee;

    font-family:
    Arial,
    sans-serif;

}



header{

    height:80px;

    padding:30px 50px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo{

    font-size:24px;

    letter-spacing:5px;

}



nav a{

    color:white;

    text-decoration:none;

    margin-left:40px;

    font-size:14px;

}





.hero{

    min-height:90vh;

    padding:60px 50px;


    display:flex;

    gap:50px;

    align-items:center;

}



.hero-text{

    flex:1;

}



.hero-text h1{


    font-size:80px;

    line-height:0.9;

    letter-spacing:8px;

}



.hero-text p{

    margin-top:40px;

    font-size:20px;

}





.hero-image{


    flex:1;


    height:600px;


    background:#c94c4c;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:40px;


    image-rendering:pixelated;

}





.projects{


    padding:80px 50px;


}



.projects h2{

    font-size:50px;

}





.project-grid{


    display:grid;

    grid-template-columns:
    repeat(3,1fr);


    gap:30px;


}



.image-box{


    height:300px;

    background:#355caa;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:30px;

}



.card h3{

    font-size:24px;

}





.about{


    padding:100px 50px;


    background:#222;


}


.about p{

    max-width:500px;

    font-size:20px;

    line-height:1.8;

}