/* ===========================================
   GOOGLE FONT
=========================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

body{
    font-family:'Poppins',sans-serif;
    background:#f8fafc;
    color:#222;
}

/* ===========================================
   HERO SECTION
=========================================== */

.gallery-hero{
    height:65vh;
    background:url("../images/backgrounds/gallery-bg.jpg") center center/cover no-repeat;
    position:relative;

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

    overflow:hidden;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.hero-content{
    position:relative;
    z-index:5;

    width:100%;

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

    padding:25px;
}

/* ===========================================
   GLASS CARD
=========================================== */

.gallery-title-card{

    max-width:760px;

    padding:45px 55px;

    text-align:center;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-radius:25px;

    border:1px solid rgba(255,255,255,.30);

    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 35px rgba(255,255,255,.18);

    animation:heroGlow 4s ease-in-out infinite alternate;
}

.gallery-title-card h1{

    color:#fff;

    font-size:3rem;

    font-weight:800;

    margin-bottom:18px;

    text-shadow:0 3px 12px rgba(0,0,0,.4);
}

.gallery-title-card p{

    color:#fff;

    font-size:1.15rem;

    line-height:1.8;

    text-shadow:0 2px 10px rgba(0,0,0,.4);
}

@keyframes heroGlow{

    from{

        box-shadow:
            0 20px 50px rgba(0,0,0,.30),
            0 0 20px rgba(255,255,255,.15);

    }

    to{

        box-shadow:
            0 25px 70px rgba(0,0,0,.35),
            0 0 55px rgba(255,255,255,.35);

    }

}

/* ===========================================
   GALLERY
=========================================== */

.gallery-showcase{

    padding:80px 0;

    background:linear-gradient(to bottom,#ffffff,#f7f9fc);

    overflow:hidden;
}

.gallery-track{

    display:flex;

    gap:36px;

    width:max-content;

    animation:scrollGallery 45s linear infinite;
}

.gallery-showcase:hover .gallery-track{

    animation-play-state:paused;

}

@keyframes scrollGallery{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* ===========================================
   IMAGE CARD
=========================================== */

.gallery-card{

    width:380px;

    aspect-ratio:4/3;

    flex:0 0 auto;

    overflow:hidden;

    border-radius:24px;

    background:#fff;

    cursor:pointer;

    box-shadow:
        0 12px 30px rgba(0,0,0,.08);

    transition:.4s;
}

.gallery-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.18);

}

.gallery-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s;
}

.gallery-card:hover img{

    transform:scale(1.08);

}

/* ===========================================
   LIGHTBOX
=========================================== */

#galleryLightbox{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(10px);

    z-index:99999;

    padding:40px;
}

#galleryLightbox img{

    max-width:92%;

    max-height:90vh;

    border-radius:18px;

    box-shadow:0 30px 70px rgba(0,0,0,.5);

    animation:zoomIn .35s;
}

#closeLightbox{

    position:absolute;

    top:30px;

    right:40px;

    font-size:55px;

    color:#fff;

    cursor:pointer;

    transition:.3s;
}

#closeLightbox:hover{

    color:#ef4444;

    transform:rotate(90deg);

}

@keyframes zoomIn{

    from{

        transform:scale(.9);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* ===========================================
   MOBILE
=========================================== */

@media(max-width:900px){

    .gallery-title-card{

        padding:35px;

        margin:0 15px;

    }

    .gallery-title-card h1{

        font-size:2.2rem;

    }

    .gallery-title-card p{

        font-size:1rem;

    }

    .gallery-card{

        width:300px;

    }

}

@media(max-width:600px){

    .gallery-card{

        width:250px;

    }

    #closeLightbox{

        font-size:40px;

        top:20px;

        right:25px;

    }

}