*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    background:#111;
    color:white;
    font-family:Arial,sans-serif;

}


/* HEADER */

header{

    background:#000;
    padding:15px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:1000;

}


.logo-box{

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

}


.logo{

    width:80px;
    height:auto;

}


.logo-box h1{

    color:red;
    font-size:28px;

}



nav a{

    color:white;
    text-decoration:none;
    margin-left:15px;
    font-weight:bold;

}


nav a:hover{

    color:red;

}




/* HERO */


.gallery-hero{

    text-align:center;
    padding:60px 20px;

}


.gallery-hero h2{

    color:red;
    font-size:40px;
    margin-bottom:15px;

}


.gallery-hero p{

    font-size:18px;

}





/* FILTER */

.filters{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    padding:20px;

}



.filter{

    background:#222;
    color:white;
    border:2px solid red;
    padding:10px 25px;
    border-radius:30px;
    cursor:pointer;
    transition:.3s;

}



.filter:hover,
.filter.active{

    background:red;

}





/* GALLERY */


.gallery{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    padding:30px;

}



.gallery-item{

    overflow:hidden;
    border-radius:15px;
    border:2px solid #333;
    cursor:pointer;
    transition:.4s;

}



.gallery-item img{

    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
    transition:.5s;

}



.gallery-item:hover{

    border-color:red;

}


.gallery-item:hover img{

    transform:scale(1.08);

}




/* HIDE FILTER */


.hide{

    display:none;

}





/* LIGHTBOX */


.lightbox{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:2000;

}



.lightbox.active{

    display:flex;

}



.lightbox-img{

    max-width:90%;
    max-height:85%;
    border-radius:15px;

}



.close,
.prev,
.next{

    position:absolute;
    color:white;
    font-size:45px;
    cursor:pointer;

}



.close{

    top:20px;
    right:30px;

}


.prev{

    left:30px;

}


.next{

    right:30px;

}





/* FOOTER */


footer{

    background:#000;
    text-align:center;
    padding:40px 20px;
    margin-top:40px;

}



footer h3{

    color:red;
    margin-bottom:15px;

}



.footer-buttons a{

    display:inline-block;
    margin:15px 5px;
    padding:12px 25px;
    border-radius:25px;
    background:red;
    color:white;
    text-decoration:none;

}





/* MOBILE */

@media(max-width:768px){


header{

    padding:12px;

}


.logo{

    width:60px;

}


.logo-box h1{

    font-size:22px;

}


nav a{

    font-size:13px;
    margin-left:8px;

}



.gallery{

    grid-template-columns:repeat(2,1fr);
    padding:15px;
    gap:12px;

}



.gallery-item img{

    height:170px;

}



.gallery-hero h2{

    font-size:32px;

}



.prev,
.next{

    font-size:35px;

}


}