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


.image-lightbox {

    position: fixed;

    inset: 0;

    background: var(--overlay-maroon-dark);

    backdrop-filter:
        blur(10px);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;


    opacity:0;

    visibility:hidden;

    transition:.4s ease;

}



.image-lightbox.active {

    opacity:1;

    visibility:visible;

}




.image-lightbox img {


    max-width:85%;

    max-height:85vh;

    object-fit:contain;


    border-radius:20px;


    animation:
        zoomIn .4s ease;

}



@keyframes zoomIn {


    from {

        transform:scale(.8);

        opacity:0;

    }


    to {

        transform:scale(1);

        opacity:1;

    }


}



.image-lightbox.active {

    opacity:1;

    visibility:visible;

}



.image-lightbox img {

    max-width:85%;

    max-height:85vh;

    object-fit:contain;

    border-radius:20px;

}



/* RESET BUTTON LIGHTBOX */

.lightbox-prev,
.lightbox-next,
.lightbox-close {

    border:none;

    background:none;

    cursor:pointer;

}



/* CLOSE BUTTON */

.lightbox-close {

    position:absolute;

    top:30px;

    right:40px;

    font-size:45px;

    color:white;

}



/* NAVIGATION BUTTON */

.lightbox-prev,
.lightbox-next {

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border-radius:50%;

    background: var(--color-secondary);

    color: var(--color-primary-dark);

    font-size:35px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.lightbox-prev {

    left:40px;

}


.lightbox-next {

    right:40px;

}

/* IMAGE COUNTER */

.lightbox-counter {

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:14px;

    letter-spacing:2px;

}


@media(max-width:768px){


    .image-lightbox img {

        max-width:92%;

    }


    .lightbox-prev {

        left:15px;

    }


    .lightbox-next {

        right:15px;

    }


}