:root {
       --donation-progress: 90%; /* Adjust this to match the donation progress */
   }

   .donation-progress-wrapper {
       /*display: flex;
       flex-direction: column;
       align-items: center;*/
       width: 60%;
	padding: 30px;
       max-width: 500px;
	margin: 0 auto; /* Horizontally centers the div */
   }

   .donation-progress-text {
	font-family: 'Open Sans', sans-serif;
       font-size: 26px;
       font-weight: bold;
       color: darkslateblue;
       margin-bottom: 5px;
	text-align: center;
   }

   .donation-progress-container {
       position: relative;
       width: 100%;
       height: 50px;
       background: #222;
       border-radius: 5px;
       overflow: hidden;
   }

   .donation-progress-bar {
    height: 100%;
    width: calc(var(--donation-progress) * 1); /* Ensures proper percentage scaling */
    max-width: 100%; /* Prevents overflow */
    background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
    transition: width 0.5s ease-in-out;
    }