.animated-background {
      color: white;
    width: 100%;
      padding-left: 10px;
    height: 250px; /* Or adjust as needed */
    background-image: url('images/muziq-visual-demo.gif'); /* Replace with your image path */
    background-size: cover; /* Ensures the image covers the div */
    background-repeat: no-repeat;
    position: relative; /* Needed for background-position animation */
    overflow: hidden; /* Hides content outside the div */

    /* Animation properties */
    animation: scrollBackground 20s linear infinite; /* Name, duration, timing, repetition */
}
.animated-background .headercontent {
      background-color: rgba(0, 0, 0, 0.3); /* 30% opaque black background */
}


@keyframes scrollBackground {
    0% {
        background-position: 0% 0%; /* Starting position (top-left) */
    }
    100% {
        background-position: 100% 100%; /* Ending position (bottom-right) */
    }
}