/* ================= Slider Section ================= */

/* Fixed slider wrapper height */
.slider-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 250px; /* desktop height */
    margin-bottom: -50px; /* overlap content below */
    z-index: 1;
}


/* Force carousel items to take full height */
.carousel-item {
    height: 100%;
}

    /* Images fill the carousel-item container */
    .carousel-item img.slider-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }

/* Slider caption */
.slider-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0.35);
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    color: #fff;
    animation: fadeInUp 1s;
    pointer-events: auto;
    z-index: 2;
}

/* Fade-in animation for captions */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Hover zoom effect */
.carousel-item:hover img.slider-image {
    transform: scale(1.03);
}

/* Make carousel full width but avoid extra scroll */
.carousel-inner,
.carousel-item {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    height: 100%;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* Responsive heights */
/* Desktop (992px+) */
@media (min-width: 992px) {
    .slider-image-wrapper,
    .carousel-item {
        height: 250px;
    }
}

/* Tablet (<992px) */
@media (max-width: 992px) {
    .slider-image-wrapper,
    .carousel-item {
        height: 230px;
    }
}

/* Mobile (<576px) */
@media (max-width: 576px) {
    .slider-image-wrapper,
    .carousel-item {
        height: 180px;
    }
}