.block-wrapper {
    padding: 40px 20px;
    margin-bottom: 40px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    color: #222;
}

.block-wrapper h2,
.block-wrapper h3 {
    font-weight: 600;
    margin-top: 0;
}

.block-wrapper p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.text-container {
    padding: 20px;
    margin: auto 0;
}

/* Background image block fills height */
.bg-image-block {
    width: 100%;
    height: 100%;
    min-height: 250px;
    background-size: cover;
    background-position: top center;
    /* ✅ Always show top of the image */
   // border-radius: 6px 0 0 6px;
}

/* Responsive: stack image on top for mobile */
@media (max-width: 768px) {

    .block-wrapper .row,
    .block-wrapper .d-flex {
        flex-direction: column !important;
    }

    .bg-image-block {
        height: 200px;
        display: block;
        /* ✅ Show image on mobile */
        background-position: top center;
        /* ✅ Top focus for mobile too */
        border-radius: 6px 6px 0 0;
    }

    .text-container {
        margin-top: 20px;
    }
}

/* ===============================
   Scroll Reveal Animation Support
   =============================== */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Animation Variants ===== */

[data-animation="fade-in"] {
    transform: translateY(40px);
}

.reveal.active[data-animation="fade-in"] {
    opacity: 1;
    transform: translateY(0);
}

[data-animation="zoom-in"] {
    transform: scale(0.95);
}

.reveal.active[data-animation="zoom-in"] {
    transform: scale(1);
    opacity: 1;
}

[data-animation="slide-up"] {
    transform: translateY(60px);
}

.reveal.active[data-animation="slide-up"] {
    transform: translateY(0);
    opacity: 1;
}

[data-animation="bounce-in"] {
    transform: translateY(60px);
}

.reveal.active[data-animation="bounce-in"] {
    animation: bounceIn 0.8s ease-out forwards;
}

@keyframes bounceIn {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }

    60% {
        transform: translateY(-15px);
        opacity: 1;
    }

    80% {
        transform: translateY(8px);
    }

    100% {
        transform: translateY(0);
    }
}