.progress-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 30px;
      background-color: #f0f0f0;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      opacity: 1;
      transition: opacity 0.5s;
    
    }

    .progress-bar {
      width: 0%;
      height: 100%;
      background-color: #4caf50;
      border-radius: 5px;
      animation: progress-animation 2s ease-out forwards;
    }

    @keyframes progress-animation {
      0% { width: 0%; }
      100% { width: 100%; }
    }

   .hide-progress {
      opacity: 0;
      pointer-events: none;
    }