.responsive-arrow-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.responsive-arrow-svg {
    display: block;
    max-width: 100%;
    height: auto;
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform 0.5s ease, fill 0.5s ease;
    box-sizing: border-box;
}

/* Rotate down on mobile screens (typically < 768px in Elementor) */
@media (max-width: 767px) {
    .responsive-arrow-wrapper {
        padding: 25px 0; /* Add vertical space for the rotated vertical arrow layout */
    }
    .responsive-arrow-svg {
        transform: rotate(90deg);
        max-width: 15px; /* Restricts width to the narrow dimension when oriented vertically */
    }
}