*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:Segoe UI;
background:#d99599;

}

.gallery-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 40px;

    background:#ffffff;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.brand{

    display:inline-flex;
    align-items:center;
    gap:10px;

}

.brand-icon{

    width:45px;
    height:45px;

    object-fit:cover;

    border-radius:8px;

}

.brand h1{

    margin:0;

    color:#111;

    font-size:30px;

    font-weight:800;

}

.back-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 22px;

    background:#c97278;

    color:#fff;

    text-decoration:none;

    font-weight:800;

    border-radius:8px;

    transition:.3s;

}

.back-btn:hover{

    background:#b45e64;

    transform:translateY(-2px);

}

.logo{

display:flex;
align-items:center;
gap:10px;

}

.logo img{

width:45px;

border-radius:6px;

}

.back{

padding:10px 25px;

background:#c97278;

color:white;

text-decoration:none;

font-weight:bold;

border-radius:6px;

}

.gallery{

padding:40px;

text-align:center;

}

.gallery h1{

font-size:45px;

margin-bottom:15px;

}

.gallery p{

margin-bottom:40px;

}

.gallery-grid{

display:grid;

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

gap:20px;

}

.card{

position:relative;

cursor:pointer;

overflow:hidden;

border-radius:10px;

}

.card img{

width:100%;

height:220px;

object-fit:cover;

display:block;

transition:.4s;

}

.card:hover img{

transform:scale(1.08);

}

.overlay{

position:absolute;

bottom:0;

width:100%;

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

color:white;

padding:10px;

opacity:0;

transition:.4s;

}

.card:hover .overlay{

opacity:1;

}


/* POPUP */

.popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

display:none;

justify-content:center;

align-items:center;

}

.popup-box{

    background:#9d5357;
    padding:25px;
    border-radius:15px;

    width:550px;
    max-width:90%;

    
    max-height:85vh;

    
    overflow-y:auto;

    position:relative;

    color:white;

}

.popup-box img{

    width:100%;
    max-height:350px;
    object-fit:contain;

    border-radius:10px;

    margin-bottom:15px;

}

#close{

position:absolute;

top:15px;

right:15px;

border:none;

background:black;

color:white;

width:30px;

height:30px;

border-radius:50%;

cursor:pointer;

}

#popup-title{
    margin:10px 0;
    font-size:28px;
    font-weight:bold;
    color:white;
}

#popup-description{
    margin-top:10px;
    font-size:16px;
    line-height:1.6;
    color:white;
}