*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif;}
body{background:#111;color:#fff;}

header{
position:fixed;width:100%;top:0;
display:flex;justify-content:space-between;
padding:20px;background:rgba(0,0,0,0.7);
z-index:999;
}

header a{color:#fff;text-decoration:none;margin:0 10px;}

.hero{
height:100vh;
background:url('#') center/cover;
display:flex;align-items:center;justify-content:center;
text-align:center;
}

.hero h1{font-size:60px;}
.hero p{margin:20px 0;}

.btn{
padding:12px 25px;
border:1px solid #fff;
display:inline-block;margin:5px;
text-decoration:none;color:#fff;
}

.section{padding:100px 10%;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

.box{
background:#1a1a1a;
padding:30px;
border-radius:10px;
}

.portfolio{
display:flex;
height:400px;
}

.panel{
flex:1;
overflow:hidden;
cursor:pointer;
transition:0.5s;
background-size:cover;
display:flex;
align-items:end;
padding:20px;
}

.panel.active{flex:5;}

.lightbox{
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:rgba(0,0,0,0.9);
display:none;
justify-content:center;
align-items:center;
}

.lightbox img{max-width:90%;}

footer{text-align:center;padding:40px;}