/* -------------------------------
   GALLERY SECTION
-------------------------------- */

.gallery-section{
    background:var(--light-bg);
    padding:4rem 2rem;
}

/* Header above gallery */

.gallery-header{
    max-width:1300px;
    margin:auto;
    margin-bottom:2.5rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
}

/* -------------------------------
   GALLERY GRID
-------------------------------- */

.gallery-grid{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:1.8rem;
}

/* -------------------------------
   GALLERY CARD
-------------------------------- */

.gallery-item{
    position:relative;
    overflow:hidden;

    border-radius:14px;

    box-shadow:0 6px 22px rgba(0,0,0,0.08);
    border:1px solid #f1f5f9;

    cursor:pointer;

    transition:transform .35s ease,
               box-shadow .35s ease;

    background:white;
}

/* Hover card effect */

.gallery-item:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 20px 45px rgba(0,0,0,0.15);
}

/* -------------------------------
   IMAGE
-------------------------------- */

.gallery-item img{
    width:100%;
    height:320px;
    object-fit:cover;

    display:block;

    transition:transform .6s ease;
}

/* image zoom */

.gallery-item:hover img{
    transform:scale(1.15);
}

/* -------------------------------
   IMAGE OVERLAY
-------------------------------- */

.gallery-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:flex-end;

    padding:1.2rem;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.2),
        transparent
    );

    opacity:0;

    transition:opacity .35s ease;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

/* overlay text */

.gallery-overlay p{
    color:white;
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.3px;
}

/* -------------------------------
   ENTRY ANIMATION
-------------------------------- */

.gallery-item{
    opacity:0;
    transform:translateY(25px);
    animation:fadeInUp .6s forwards;
}

.gallery-item:nth-child(1){animation-delay:.05s;}
.gallery-item:nth-child(2){animation-delay:.1s;}
.gallery-item:nth-child(3){animation-delay:.15s;}
.gallery-item:nth-child(4){animation-delay:.2s;}
.gallery-item:nth-child(5){animation-delay:.25s;}
.gallery-item:nth-child(6){animation-delay:.3s;}
.gallery-item:nth-child(7){animation-delay:.35s;}
.gallery-item:nth-child(8){animation-delay:.4s;}
.gallery-item:nth-child(9){animation-delay:.45s;}
.gallery-item:nth-child(10){animation-delay:.5s;}

/* -------------------------------
   EMPTY GALLERY MESSAGE
-------------------------------- */

.empty-gallery{
    text-align:center;
    padding:6rem 2rem;

    border-radius:14px;

    border:2px dashed #e5e7eb;

    background:white;

    max-width:700px;
    margin:3rem auto;
}

.empty-gallery h3{
    font-size:1.4rem;
    margin-bottom:.6rem;
}

.empty-gallery p{
    color:var(--soft-gray);
}

/* -------------------------------
   LIGHTBOX
-------------------------------- */

.lightbox{
    position:fixed;
    inset:0;

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

    display:none;

    justify-content:center;
    align-items:center;

    z-index:2000;

    padding:2rem;
}

/* lightbox image */

.lightbox img{
    max-width:92%;
    max-height:90%;

    border-radius:12px;

    box-shadow:0 10px 35px rgba(0,0,0,.5);
}

/* close button */

.lightbox-close{
    position:absolute;
    top:30px;
    right:35px;

    font-size:42px;
    color:white;

    cursor:pointer;

    transition:opacity .2s;
}

.lightbox-close:hover{
    opacity:.7;
}

/* -------------------------------
   SCROLL TO TOP BUTTON
-------------------------------- */

#scrollTopBtn{
    position:fixed;

    bottom:32px;
    right:32px;

    background:var(--secondary-blue);
    color:white;

    border:none;

    padding:12px 14px;

    border-radius:50%;

    font-size:18px;

    cursor:pointer;

    display:none;

    box-shadow:0 5px 14px rgba(0,0,0,.25);

    transition:transform .25s,
               box-shadow .25s;
}

#scrollTopBtn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(0,0,0,.35);
}

/* ================= FOOTER ================= */

footer{
background:#111827;
color:white;
padding:4rem 2rem;
border-top:2px solid var(--primary-blue);
}

.footer-container{
max-width:1400px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;
align-items:start;
}

/* LEFT */

.footer-left{
display:flex;
flex-direction:column;
gap:1.5rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.footer-logo{
width:70px;
height:70px;
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.footer-logo img{
width:100%;
height:100%;
object-fit:cover;
}

.footer-title{
font-family:'Bebas Neue',sans-serif;
font-size:2rem;
letter-spacing:2px;
color:var(--primary-blue);
text-transform:uppercase;
}

.footer-info{
color:#9ca3af;
line-height:1.7;
}

.footer-info a{
color:var(--secondary-blue);
text-decoration:none;
}

.footer-info a:hover{
text-decoration:underline;
}

.footer-copy{
font-size:.85rem;
color:#6b7280;
margin-top:1rem;
}

/* RIGHT MAP */

.footer-right{
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}

/* MOBILE */

@media (max-width:768px){

.footer-container{
grid-template-columns:1fr;
text-align:center;
}

.footer-brand{
justify-content:center;
}

.footer-left{
align-items:center;
}

.footer-right iframe{
height:250px;
}

}
/* -------------------------------
   RESPONSIVE TABLET
-------------------------------- */

@media(max-width:1024px){

.gallery-grid{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

}

/* -------------------------------
   RESPONSIVE MOBILE
-------------------------------- */

@media(max-width:768px){

.gallery-section{
    padding:3rem 1.5rem;
}

.gallery-grid{
    grid-template-columns:1fr;
    gap:1.4rem;
}

.gallery-item img{
    height:auto;
}

}

/* -------------------------------
   SMALL MOBILE
-------------------------------- */

@media(max-width:480px){

.gallery-overlay p{
    font-size:.85rem;
}

}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

.footer-container{
grid-template-columns:1fr;
text-align:center;
gap:2rem;
}

.footer-logo{
justify-content:center;
}

.footer-right iframe{
height:220px;
}

}


#header,
header,
nav{
border-bottom:none !important;
box-shadow:none !important;
}
