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

body{
background:#111;
color:white;
}


/* NAVBAR */

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 10%;
background:black;
position:sticky;
top:0;
z-index:1000;
}

.logo{
font-size:28px;
font-weight:bold;
letter-spacing:2px;
}

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

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

nav ul li a{
text-decoration:none;
color:white;
transition:.3s;
}

nav ul li a:hover,
.active{
color:#caa45f;
}


/* HEADER */

.gallery-header{
text-align:center;
padding:80px 20px;
background:url("images/gallery-bg.jpg") center/cover;
}

.gallery-header h1{
font-size:45px;
margin-bottom:10px;
}


/* FILTERS */

.filters{
text-align:center;
padding:40px 0;
}

.filters button{
background:#caa45f;
border:none;
padding:12px 25px;
margin:5px;
cursor:pointer;
font-weight:bold;
}


/* GALLERY GRID */

.gallery-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

padding:40px 10%;

}


.gallery-item{

position:relative;

overflow:hidden;

border-radius:8px;

cursor:pointer;

}


.gallery-item img{

width:100%;

height:300px;

object-fit:cover;

transition:.5s;

}


.gallery-item:hover img{

transform:scale(1.1);

}


/* INFO OVERLAY */

.info{

position:absolute;

bottom:0;

left:0;

right:0;

background:rgba(0,0,0,0.8);

padding:20px;

transform:translateY(100%);

transition:.4s;

}


.gallery-item:hover .info{

transform:translateY(0);

}


.price{

color:#caa45f;

margin:5px 0;

}


.order{

display:inline-block;

background:#25D366;

padding:8px 15px;

color:white;

text-decoration:none;

border-radius:4px;

font-size:14px;

}


/* LIGHTBOX */

.lightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.9);

display:none;

justify-content:center;

align-items:center;

}


.lightbox-img{

max-width:90%;

max-height:80%;

}


.close{

position:absolute;

top:30px;

right:50px;

font-size:40px;

cursor:pointer;

}