/*======================================
    D-40 AV & Entertainment
    Gallery Styles
======================================*/


/*======================================
    Gallery Page Hero
======================================*/

.page-hero{

    min-height:60vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:

    linear-gradient(
        rgba(0,0,0,.7),
        rgba(0,0,0,.85)
    ),

    url("../images/gallery/gallery-hero.jpg");

    background-size:cover;

    background-position:center;

    padding-top:120px;

}


.page-hero h1{

    font-size:6rem;

    color:white;

    text-shadow:

    0 0 25px rgba(26,115,255,.7);

}


.page-hero p{

    max-width:750px;

    margin:25px auto 0;

    font-size:20px;

}





/*======================================
    Gallery Section
======================================*/

.gallery-section{

    background:#080808;

}




/*======================================
    Filter Buttons
======================================*/

.gallery-filters{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:50px;

}


.filter{

    padding:12px 28px;

    background:#151515;

    color:white;

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

    border-radius:50px;

    cursor:pointer;

    font-family:'Inter',sans-serif;

    font-weight:600;

    transition:.35s;

}


.filter:hover,

.filter.active{

    background:var(--primary);

    border-color:var(--primary);

    box-shadow:

    0 0 25px rgba(26,115,255,.45);

}





/*======================================
    Gallery Grid
======================================*/


.gallery-grid{

    columns:3;

    column-gap:25px;

}


.gallery-item{

    break-inside:avoid;

    margin-bottom:25px;

    position:relative;

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

}


.gallery-item img{

    width:100%;

    display:block;

    border-radius:15px;

    transition:.5s;

}


.gallery-item:hover img{

    transform:scale(1.08);

}





/*======================================
    Gallery Overlay
======================================*/


.gallery-overlay{

    position:absolute;

    inset:0;

    background:

    rgba(26,115,255,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}


.gallery-overlay i{

    font-size:45px;

    color:white;

    transform:scale(.5);

    transition:.4s;

}


.gallery-item:hover .gallery-overlay{

    opacity:1;

}


.gallery-item:hover .gallery-overlay i{

    transform:scale(1);

}





/*======================================
    Filter Animation
======================================*/


.gallery-item.hide{

    display:none;

}


.gallery-item.show{

    animation:

    galleryShow .5s ease;

}


@keyframes galleryShow{

from{

    opacity:0;

    transform:translateY(30px);

}


to{

    opacity:1;

    transform:translateY(0);

}

}





/*======================================
    Lightbox
======================================*/


.lightbox{

    position:fixed;

    inset:0;

    background:

    rgba(0,0,0,.95);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    z-index:9999;

    transition:.4s;

}


.lightbox.active{

    opacity:1;

    pointer-events:auto;

}



.lightbox img{

    max-width:90%;

    max-height:85vh;

    border-radius:15px;

    box-shadow:

    0 0 50px rgba(26,115,255,.5);

    animation:

    zoomImage .4s ease;

}



@keyframes zoomImage{

from{

transform:scale(.8);

}


to{

transform:scale(1);

}

}



.close{

    position:absolute;

    top:40px;

    right:50px;

    color:white;

    font-size:35px;

    cursor:pointer;

    transition:.3s;

}


.close:hover{

    color:var(--primary);

    transform:rotate(90deg);

}





/*======================================
    Video Showcase
======================================*/


.video-showcase{

    background:#111;

}



.video-box{

    position:relative;

    max-width:1200px;

    margin:auto;

    overflow:hidden;

    border-radius:20px;

    height:600px;

}


.video-box video{

    width:100%;

    height:100%;

    object-fit:cover;

}



.video-box::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        transparent,
        rgba(0,0,0,.85)
    );

}



.video-text{

    position:absolute;

    bottom:50px;

    left:50px;

    z-index:2;

}



.video-text h3{

    font-size:3.5rem;

}



.video-text p{

    font-size:18px;

}





/*======================================
    Gallery CTA
======================================*/


.gallery-section + .cta{

    margin-top:0;

}





/*======================================
    Gallery Responsive
======================================*/


@media(max-width:1200px){

    .gallery-grid{

        columns:2;

    }


    .page-hero h1{

        font-size:5rem;

    }


}





@media(max-width:768px){


    .gallery-grid{

        columns:1;

    }


    .page-hero{

        min-height:50vh;

    }


    .page-hero h1{

        font-size:3.5rem;

    }


    .page-hero p{

        font-size:16px;

        padding:0 20px;

    }


    .gallery-filters{

        gap:10px;

    }


    .filter{

        padding:10px 18px;

        font-size:14px;

    }


    .video-box{

        height:350px;

    }


    .video-text{

        left:25px;

        bottom:25px;

    }


    .video-text h3{

        font-size:2.3rem;

    }


}


@media(max-width:450px){


    .close{

        right:25px;

        top:20px;

    }


    .video-text h3{

        font-size:1.9rem;

    }


}