.zo-hero-banner {
    position: relative;
    width: 100%;
    min-height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border-radius: 5px 20em 5px 5px;
}

.zo-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.zo-hero-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    transform: scale(1.02);
    will-change: transform;
}

.zo-hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay boven beeld */
.zo-hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Inner content */
.zo-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 4rem 5vw;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.zo-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Basis knop, je kunt via btn1_class/btn2_class eigen classes toevoegen */
.zo-hero-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}
a.zo-hero-btn.video-button {
    background: #ffffff40;
    backdrop-filter: blur(15px);
    color: white;
}
a.zo-hero-btn.impact-button {
    background: rgba(229, 106, 84, 0.5);
    backdrop-filter: blur(15px);
    color: white;
}

@media only screen and (max-width: 992px) {
    .zo-hero-banner {
        border-radius: 5px 5em 5px 5px;
        min-height: 26vh ;
    }
    a.zo-hero-btn.impact-button {
        display: none;
    }
}