.page-banner{

    position:relative;

    width:100%;

    height:380px;

    background:url("../images/contact/banner.jpg") center center/cover no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(15,76,129,.75),
        rgba(15,76,129,.75)
    );

}

.banner-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

}

.banner-content h1{

    font-size:3rem;

    font-weight:700;

    margin-bottom:15px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.banner-content p{

    font-size:1rem;

    font-weight:500;

}

.banner-content a{

    color:#D4AF37;

    transition:.3s;

}

.banner-content a:hover{

    color:#fff;

}

.banner-content span{

    margin:0 8px;

    color:#fff;

}


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

.gallery-section{

    padding:90px 0;

    background:#F8FAFC;

}

.section-heading{

    text-align:center;

    margin-bottom:55px;

}

.section-heading h4{

    color:#F4C542;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:16px;

}

.section-heading h2{

    color:#0F4C81;

    font-size:42px;

    margin:12px 0;

}

.title-line{

    width:90px;

    height:4px;

    background:#F4C542;

    margin:auto;

    border-radius:20px;

}

/*=====================================
        FILTER BUTTONS
======================================*/

.gallery-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:60px;

}

.filter-btn{

    padding:12px 28px;

    border:none;

    border-radius:50px;

    background:#fff;

    color:#0F4C81;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.filter-btn:hover,

.filter-btn.active{

    background:#0F4C81;

    color:#fff;

    transform:translateY(-3px);

}

.filter-btn:hover{

    box-shadow:0 12px 25px rgba(15,76,129,.25);

}


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

.gallery-container{

    display:grid;

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

    gap:30px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

    background:#fff;

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

    transition:.4s;

}

.gallery-item:hover{

    transform:translateY(-8px);

}

.gallery-item img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:.6s;

}
/*====================================
        VIDEO CARD
====================================*/

.gallery-item.videos{
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

.gallery-item.videos video{

    width:100%;
    height:100%;

    min-height:250px;

    object-fit:cover;

    display:block;

    background:#000;

}


/*====================================
        PLAY BUTTON
====================================*/

.video-play{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:60px;
    height:60px;

    border-radius:50%;

    background:rgba(15,76,129,.9);

    color:#fff;

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

    font-size:20px;

    z-index:3;

    transition:.3s ease;

}

.gallery-item.videos:hover .video-play{

    transform:translate(-50%,-50%) scale(1.1);

    background:var(--secondary);

    color:var(--primary);

}


/*====================================
        VIDEO OVERLAY
====================================*/

.gallery-item.videos .gallery-overlay{

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    padding:35px 20px 18px;

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

    z-index:2;

}

.gallery-item.videos .gallery-overlay h3{

    color:#fff;

    font-size:16px;

    margin:0;

}



/*=====================================
            OVERLAY
======================================*/

.gallery-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,76,129,.82);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}

.gallery-overlay i{

    font-size:42px;

    color:#F4C542;

    margin-bottom:15px;

}

.gallery-overlay h3{

    color:#fff;

    font-size:22px;

    font-weight:600;

    text-align:center;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}


/*=====================================
        FILTER ANIMATION
======================================*/

.gallery-item.hide{

    display:none;

}

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

.lightbox{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    animation:fadeIn .35s ease;

}

.lightbox.active{

    display:flex;

}

#lightbox-img{

    max-width:90%;

    max-height:85vh;

    border-radius:15px;

    box-shadow:0 15px 40px rgba(255,255,255,.15);

}

.close-lightbox{

    position:absolute;

    top:25px;

    right:35px;

    font-size:45px;

    color:#fff;

    cursor:pointer;

    transition:.3s;

}

.close-lightbox:hover{

    color:#F4C542;

    transform:rotate(90deg);

}


/*=====================================
        PREVIOUS / NEXT
======================================*/

.lightbox-prev,

.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#0F4C81;

    color:#fff;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

}

.lightbox-prev{

    left:35px;

}

.lightbox-next{

    right:35px;

}

.lightbox-prev:hover,

.lightbox-next:hover{

    background:#F4C542;

    color:#0F4C81;

}


/*=====================================
            ANIMATION
======================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}





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

.video-lightbox{

    position:fixed;

    inset:0;

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

    display:none;

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

    z-index:10000;

    padding:20px;

}

.video-lightbox.active{

    display:flex;

}

.video-lightbox-content{

    position:relative;

    width:min(900px,95%);

}

.video-lightbox video{

    width:100%;

    max-height:85vh;

    display:block;

    background:#000;

    border-radius:10px;

}

.video-close{

    position:absolute;

    right:-15px;
    top:-15px;

    width:40px;
    height:40px;

    border:none;

    border-radius:50%;

    background:var(--secondary);

    color:var(--primary);

    font-size:18px;

    cursor:pointer;

    z-index:2;

    transition:.3s;

}

.video-close:hover{

    transform:scale(1.1);

}