:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-1896039 *//*====================================================
                GALLERY SECTION
====================================================*/

.gallery-section{

    background:#000;

    padding:100px 5%;

    overflow:hidden;

}

.gallery-container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

}


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

.gallery-heading{

    text-align:center;

    margin-bottom:60px;

}

.gallery-heading span{

    display:inline-block;

    color:#ffc400;

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.gallery-heading h2{

    color:#fff;

    font-size:48px;

    line-height:1.2;

    margin:15px 0;

    font-weight:700;

}

.gallery-heading p{

    max-width:700px;

    margin:0 auto;

    color:#bdbdbd;

    line-height:1.8;

    font-size:17px;

}


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

.gallery-grid{

    width:100%;

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:25px;

}


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

.gallery-item{

    position:relative;

    width:100%;

    aspect-ratio:4 / 5;

    overflow:hidden;

    border-radius:18px;

    background:#111;

    cursor:pointer;

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

    transition:.35s ease;

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

.gallery-item:hover{

    transform:translateY(-8px);

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

}


/*====================================================
                IMAGES
====================================================*/

.gallery-item img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center center;

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

    transition:

        opacity .45s ease,

        transform .45s ease;

}


/*====================================================
                AFTER IMAGE
====================================================*/

.gallery-item .after-image{

    z-index:1;

    opacity:1;

}


/*====================================================
                BEFORE IMAGE
====================================================*/

.gallery-item .before-image{

    z-index:2;

    opacity:0;

}


/*====================================================
                HOVER BEFORE IMAGE
====================================================*/

.gallery-item:hover .after-image{

    opacity:0;

    transform:scale(1.06);

}

.gallery-item:hover .before-image{

    opacity:1;

    transform:scale(1.06);

}


/*====================================================
                GOLD BORDER
====================================================*/

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid transparent;

    border-radius:18px;

    z-index:5;

    pointer-events:none;

    transition:.35s ease;

}

.gallery-item:hover::before{

    border-color:#ffc400;

}


/*====================================================
                GOLD SHINE
====================================================*/

.gallery-item::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-120%;

    width:55%;

    height:320%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:rotate(25deg);

    pointer-events:none;

    z-index:6;

}

.gallery-item:hover::after{

    animation:goldShine .8s linear;

}

@keyframes goldShine{

    0%{

        left:-120%;

    }

    100%{

        left:180%;

    }

}


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

.gallery-overlay{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    box-sizing:border-box;

    padding:22px;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.92)

    );

    z-index:8;

    transform:translateY(100%);

    transition:.35s ease;

}

.gallery-item:hover .gallery-overlay{

    transform:translateY(0);

}

.gallery-overlay h3{

    color:#fff;

    font-size:20px;

    margin:0;

    font-weight:600;

}

.gallery-overlay span{

    display:inline-block;

    margin-top:8px;

    color:#ffc400;

    font-size:14px;

    letter-spacing:.5px;

}


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

.gallery-lightbox{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(8px);

    z-index:999999;

    animation:fadeIn .35s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.gallery-lightbox img{

    max-width:90%;

    max-height:90%;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:15px;

    border:3px solid #ffc400;

    animation:zoomIn .35s ease;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/*====================================================
                CLOSE BUTTON
====================================================*/

.gallery-close{

    position:absolute;

    top:25px;

    right:35px;

    font-size:44px;

    line-height:1;

    color:#fff;

    cursor:pointer;

    transition:.3s ease;

    z-index:10;

}

.gallery-close:hover{

    color:#ffc400;

    transform:rotate(90deg);

}


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

.gallery-prev,
.gallery-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border-radius:50%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:30px;

    cursor:pointer;

    transition:.3s ease;

    z-index:10;

}

.gallery-prev{

    left:30px;

}

.gallery-next{

    right:30px;

}

.gallery-prev:hover,
.gallery-next:hover{

    background:#ffc400;

    color:#000;

}


/*====================================================
                TABLET
====================================================*/

@media(max-width:1200px){

    .gallery-grid{

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

        gap:22px;

    }

}

@media(max-width:900px){

    .gallery-section{

        padding:80px 5%;

    }

    .gallery-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:18px;

    }

    .gallery-item{

        border-radius:16px;

    }

    .gallery-heading h2{

        font-size:40px;

    }

}


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

@media(max-width:600px){

    .gallery-section{

        padding:70px 0;

        width:100%;

        overflow:hidden;

    }

    .gallery-container{

        width:100%;

        max-width:none;

        padding:0 18px;

        box-sizing:border-box;

    }


    /* ONE CARD PER ROW */

    .gallery-grid{

        width:100%;

        display:grid;

        grid-template-columns:1fr;

        gap:20px;

    }


    .gallery-item{

        width:100%;

        aspect-ratio:4 / 5;

        border-radius:16px;

    }


    .gallery-heading{

        padding:0 5px;

        margin-bottom:40px;

    }

    .gallery-heading span{

        font-size:12px;

        letter-spacing:2px;

    }

    .gallery-heading h2{

        font-size:30px;

        line-height:1.2;

        margin:12px 0;

    }

    .gallery-heading p{

        font-size:14px;

        line-height:1.7;

    }


    /* Mobile overlay should remain usable */

    .gallery-overlay{

        padding:16px;

    }

    .gallery-overlay h3{

        font-size:17px;

    }

    .gallery-overlay span{

        font-size:12px;

    }


    /* LIGHTBOX */

    .gallery-lightbox img{

        max-width:88%;

        max-height:75%;

        border-width:2px;

    }

    .gallery-prev,
    .gallery-next{

        width:42px;

        height:42px;

        font-size:20px;

    }

    .gallery-prev{

        left:8px;

    }

    .gallery-next{

        right:8px;

    }

    .gallery-close{

        top:15px;

        right:18px;

        font-size:34px;

    }

}


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

@media(max-width:380px){

    .gallery-section{

        padding:60px 0;

    }

    .gallery-container{

        padding:0 14px;

    }

    .gallery-grid{

        gap:16px;

    }

    .gallery-item{

        aspect-ratio:4 / 5;

        border-radius:14px;

    }

    .gallery-heading h2{

        font-size:27px;

    }

    .gallery-heading p{

        font-size:13px;

    }

}/* End custom CSS */