/* Define the Pulsate animation */
@keyframes pulsate {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02); /* Slightly grow the text */
    }

    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

/* Apply the animation to the modal title */
.modal-header .modal-title.animated-ad {
    /* Apply the keyframe animation */
    animation: pulsate 2s infinite ease-in-out;
    /* Optional: Add a subtle text shadow to enhance the glow effect */
    text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
    /* Ensure the text has a fixed width to prevent layout shifts */
    display: inline-block;
}
/* Define the keyframe animation for scrolling */
@keyframes scrolling {
    0% { transform: translateX(100%); } /* Start off-screen right */
    100% { transform: translateX(-100%); } /* End off-screen left */
}

.marquee-container {
    overflow: hidden; /* Hide content that flows outside */
    white-space: nowrap; /* Keep the text on a single line */
    background-color: #f7e090; /* Light background for visibility */
    color: #333;
    padding: 5px 0;
    font-weight: bold;
    border-top: 2px solid #ffcc00;
    border-bottom: 2px solid #ffcc00;
}

.marquee-text {
    display: inline-block;
    animation: scrolling 30s linear infinite; /* 25s speed, linear path, endless loop */
    margin: 0; /* Remove default paragraph margin */
}

/* Optional: Pause animation on hover */
.marquee-text:hover {
    animation-play-state: paused;
}