.gallery-container {
    max-width: 400px;
    margin: 40px auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative; /* Required for arrow positioning */
}
.slick-list {
    max-height: 400px;

}
h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Style the gallery items */
.image-gallery .slick-slide {
    padding: 0 10px;
}

.image-gallery img {
    /*width: 100%;*/
    cursor: pointer;
    transition: transform 0.3s ease;
}

.image-gallery img:hover {
    transform: scale(1.03);
}

/* --- Arrow Styling & Hover Effect --- */
.slick-prev, .slick-next {
    width: 40px;
    height: 40px;
    z-index: 10;
    opacity: 0; /* Hide arrows by default */
    transition: opacity 0.3s ease;
}

/* Make arrows appear on container hover */
.gallery-container:hover .slick-prev,
.gallery-container:hover .slick-next {
    opacity: 0.8;
}

.slick-prev:hover, .slick-next:hover {
    opacity: 1;
}

.slick-prev { left: -50px; }
.slick-next { right: -50px; }

.slick-prev:before, .slick-next:before {
    font-size: 40px;
    color: #fff;
}

/* --- Indicator Dot Styling --- */
.slick-dots li button:before {
    font-size: 12px;
    color: #fff;
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    color: red;
    opacity: 1;
}
.fancybox__container {
    --fancybox-bg: #000;
}

/* gets rid of the little stripe on the left, the hacky way */
.image-gallery .slick-slide {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}