.play-pause-btn {
        position: relative;
        border: 2px solid rgba(0, 128, 0, 0.7); 
        background-color: rgba(0, 128, 0, 0.2); 
        padding: 10px 20px;
        border-radius: 50%; 
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 8px rgba(0, 128, 0, 0.4);
        width: 50px; 
        height: 50px; 
    }

    .play-pause-btn:hover {
        transform: scale(1.1);
        background-color: rgba(0, 128, 0, 0.3); 
        box-shadow: 0 8px 16px rgba(0, 128, 0, 0.6);
    }

    .play-pause-btn:active {
        transform: scale(0.98);
        background-color: rgba(0, 128, 0, 0.4); 
    }

    .play-pause-btn .play-icon {
        font-size: 24px;
        color: rgba(0, 128, 0, 0.9); 
        transition: all 0.3s ease;
        margin-left: 5px;
    }

    .play-pause-btn .pause-icon {
        font-size: 24px;
        color: rgba(0, 128, 0, 0.9); 
    }

    
      body.modal-open {
        overflow: hidden;
      }
      body.modal-open .container {
        filter: blur(5px); 
      }

      @media (max-width: 576px) {
        .modal-dialog {
          max-width: 100%; 
          width: 100%; 
          margin: 2% auto;
        }
        .modal-content {
          font-size: 14px; 
          padding: 15px; 
        }
        .modal-body ul {
          padding-left: 15px; 
        }
        .modal-header h5 {
          font-size: 16px; 
        }
        .modal-footer button {
          font-size: 14px; 
        }
      }