/* MAIN CAROUSEL IMAGE */
        .carousel-inner img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            border-radius: 8px;
        }

        /* VERTICAL THUMBNAILS */
        .thumb-container {
            height: 500px;              /* same height as slider */
            overflow-y: auto;           /* enable scrolling */
            overflow-x: hidden;
        }

        .thumb {
            cursor: pointer;
            margin-bottom: 10px;
            border: 2px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            transition: 0.3s ease;
        }

        .thumb img {
            width: 100%;
            height: 90px;
            object-fit: cover;
            border-radius: 4px;
        }

        .thumb.active,
        .thumb:hover {
            border: 2px solid #007bff;
        }

        /* Hide scrollbar (optional) */
        .thumb-container::-webkit-scrollbar {
            width: 6px;
        }
        .thumb-container::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 5px;
        }

.carousel.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.4s ease-in-out; /* smooth + fast */
    pointer-events: none;
}

.carousel.carousel-fade .carousel-item.active {
    opacity: 1;
    pointer-events: auto;
}

/* Remove Bootstrap slide-left animation */
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right,
.carousel-item.active.carousel-item-left,
.carousel-item.active.carousel-item-right {
    transform: translateX(0) !important;
}


.carousel-inner img {
    transition: transform 0.4s ease-in-out;
}

/* Zoom on hover */
.carousel-inner:hover img {
    transform: scale(1.08);   /* adjust zoom level */
}

/* Desktop (vertical thumbnails) */
.thumb-container {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile view: thumbnails become inline horizontally */
@media (max-width: 768px) {

    .thumb-container {
        height: auto;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
    }

    .thumb {
        display: inline-block;
        width: 90px;        /* adjust for size you want */
        margin-right: 8px;
    }

    .thumb img {
        height: 70px;
        width: 100%;
        object-fit: cover;
    }
}