function looping_marquee_shortcode($atts, $content = null) {
    $default_atts = shortcode_atts(array(
        'speed' => '20s',
        'direction' => 'left',
        'pause' => 'true',
        'gap' => '0px',
        'font_size' => 'inherit',
        'color' => 'inherit',
        'background' => 'transparent',
        'height' => 'auto',
        'img_height' => '100px',
        'align' => 'center'
    ), $atts);

    $horizontal = in_array($default_atts['direction'], ['left', 'right']);
    $reverse = in_array($default_atts['direction'], ['right', 'down']) ? 'reverse' : 'normal';
    $pause = $default_atts['pause'] === 'true';
    $id = 'marquee_' . uniqid();

    ob_start(); ?>

    <style>
        #<?php echo $id; ?> .marquee-wrapper {
            overflow: hidden;
            position: relative;
            background: <?php echo esc_attr($default_atts['background']); ?>;
            height: <?php echo esc_attr($default_atts['height']); ?>;
            display: flex;
            align-items: <?php echo esc_attr($default_atts['align']); ?>;
        }

        #<?php echo $id; ?> .marquee-content {
            display: flex;
            gap: <?php echo esc_attr($default_atts['gap']); ?>;
            font-size: <?php echo esc_attr($default_atts['font_size']); ?>;
            color: <?php echo esc_attr($default_atts['color']); ?>;
            animation: marqueeAnim_<?php echo $id; ?> <?php echo esc_attr($default_atts['speed']); ?> linear infinite <?php echo $reverse; ?>;
        }

        <?php if ($pause): ?>
        #<?php echo $id; ?> .marquee-wrapper:hover .marquee-content {
            animation-play-state: paused;
        }
        <?php endif; ?>

        #<?php echo $id; ?> .marquee-content > * {
            display: inline-flex;
            align-items: center;
            white-space: normal;
        }

        #<?php echo $id; ?> .marquee-content img {
            max-height: <?php echo esc_attr($default_atts['img_height']); ?>;
            vertical-align: middle;
            border-radius: 5px;
        }

        @keyframes marqueeAnim_<?php echo $id; ?> {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        @media (max-width: 768px) {
            #<?php echo $id; ?> .marquee-content img {
                max-height: 40px;
            }
        }
    </style>

    <div id="<?php echo $id; ?>" class="modern-marquee">
        <div class="marquee-wrapper">
            <div class="marquee-content">
                <?php echo do_shortcode($content); ?>
                <?php echo do_shortcode($content); // duplicate for seamless loop ?>
            </div>
        </div>
    </div>

    <?php
    return ob_get_clean();
}
add_shortcode('looping_marquee', 'looping_marquee_shortcode');