@keyframes showArrowAnimation {
    from {
        opacity: 0;
        height: 0%;
    }
    to {
        opacity: 1;
        height: 100%;
    }
}

@keyframes hideArrowAnimation {
    from {
        opacity: 1;
        height: 100%;
    }
    to {
        opacity: 0;
        height: 0%;
    }
}

.instr-arrow-image-wrapper
{
    z-index: 1;
    opacity: 1;
}
/* Kaart Styling */
.instr-arrow-image-wrapper.show {
    /* Koppel de animatie */
    animation: showArrowAnimation;
    animation-duration: 3s;
}
.instr-arrow-image-wrapper.hide {
    opacity: 0;
}

.instr-image-header
{
    position: relative;
    left: 35px;
    top: -10px;
}
.instr-arrow-image {
    position: absolute;
    z-index: 1;
    object-fit: cover;
    padding: 5px;
}
.instr-image {
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: 50% 20%;
    border-radius: 15px;
    box-shadow: 0px 3px 6px var(--brand-color);
}
.instr-desc-container
{
    text-align: left;
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 70px !important;
}
.instr-image-container
{
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}
.social-media-icon
{
    color: var(--brand-color);
}
.second-intro
{
    margin-top: 25px;
}