.hero-carousel {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

    /* IMPORTANT: your background images stay on these .carousel-item classes (saddle/casebound/etc) */
    .hero-carousel .carousel-item {
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

        /* Darken only a bit for readability */
        .hero-carousel .carousel-item::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 90deg, rgba(15,23,42,0.60) 0%, rgba(15,23,42,0.32) 55%, rgba(15,23,42,0.10) 100% );
            z-index: 1;
        }

    /* Key fix: anchor overlay content so it never “slides” or clips on the left */
    .hero-carousel .hero-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: clamp(18px, 4vw, 48px);
        pointer-events: none; /* so controls still feel normal */
    }

    .hero-carousel .hero-card {
        pointer-events: auto;
        width: min(640px, 92vw);
        background: rgba(255,255,255,0.94);
        border: 1px solid rgba(255,255,255,0.65);
        border-radius: 14px;
        padding: 18px 18px;
        box-shadow: 0 10px 26px rgba(0,0,0,0.12);
        backdrop-filter: blur(6px);
    }

    .hero-carousel .dv-carousel-title {
        font-weight: 700;
        letter-spacing: .2px;
        margin-bottom: 10px;
        font-size: clamp(22px, 2.2vw, 34px);
        line-height: 1.15;
        color: #0f172a;
    }

    .hero-carousel .dv-carousel-description {
        margin-bottom: 14px;
        color: rgba(15, 23, 42, 0.78);
        font-size: 0.95rem;
        line-height: 1.5;
        max-width: 60ch;
    }

    .hero-carousel .hero-cta {
        display: inline-flex;
        align-items: center;
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
        z-index: 3;
    }

    .hero-carousel .carousel-control-prev-icon,
    .hero-carousel .carousel-control-next-icon {
        filter: drop-shadow(0 2px 10px rgba(0,0,0,0.25));
    }

@media (max-width: 576px) {
    .hero-carousel .hero-card {
        padding: 14px 14px;
    }

    .hero-carousel .dv-carousel-description {
        font-size: 0.9rem;
    }
}