.animated-left-bg {
      background: linear-gradient(135deg,
        #0dcaf0 0%,    /* Cyan 1 - Your main */
        #00c4ff 20%,   /* Cyan 2 - Bright */
        #1e90ff 40%,   /* Blue 1 - Dodger */
        #5e60ff 60%,   /* Indigo - Electric */
        #a855f7 100%   /* Purple - Vibrant */
      );
      background-size: 500% 500%;
      animation: colorCycle 20s ease-in-out infinite; /* 5 colors × 2s = 10s */
      min-height: 100vh;
    }

    @keyframes colorCycle {
      0%   { background-position: 0% 50%; }    /* Cyan 1 */
      20%  { background-position: 100% 0%; }   /* Cyan 2 - Dramatic shift */
      40%  { background-position: 0% 100%; }   /* Blue 1 */
      60%  { background-position: 100% 100%; } /* Indigo */
      80%  { background-position: 0% 0%; }     /* Purple */
      100% { background-position: 0% 50%; }    /* Back to Cyan 1 */
    }

    /* Ensure text is always visible */
    .animated-left-bg h1, .animated-left-bg p { 
      text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
      color: #fff !important; 
    }

    /* Stop on hover (optional) */
    .animated-left-bg:hover { animation-play-state: paused; }