/* Ensure gallery container is centered and does not overflow */
.gallery-container {
    position: relative;
    max-width: 90vw; /* Adjust width to fit within viewport */
    margin: auto;
    overflow: hidden;
}

/* Glide track should not exceed viewport width */
.glide__track {
    overflow: visible !important; /* Allows next/prev images to be partly visible */
}

/* Ensure slides fit properly within the container */
.glide__slides {
    display: flex;
    justify-content: center;
}

/* Make sure images are not too wide */
.glide__slide img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fix arrows positioning */
.glide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 24px;
}

.glide__arrow--left {
    left: 10px;
}

.glide__arrow--right {
    right: 10px;
}

/* Partial visibility of next image */
.glide__slide {
    width: 80%; /* Ensures next image is partly visible */
    margin-right: 10px; /* Creates a gap between images */
}

/* Zoom Overlay (Hidden by Default) */
.zoom-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Zoomed Image */
.zoomed-image {
    max-width: 90%;
    max-height: 90%;
    cursor: zoom-out;
}

/* Make sure the active slide is fully visible */
.glide__slide--active img {
    cursor: zoom-in;
}