.soundwave {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 20px;
}

.bar {
    width: 3px;
    height: 5px;
    background-color: #ff2c57;
    border-radius: 2px;
    animation: shoot 0.6s infinite ease-in-out alternate;
}

.bar:nth-child(1) {
    animation-delay: 0.1s;
}

.bar:nth-child(2) {
    animation-delay: 0.2s;
}

.bar:nth-child(3) {
    animation-delay: 0.3s;
}

.bar:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes shoot {
    0% {
        height: 5px;
    }

    100% {
        height: 20px;
    }
}

/* Customize the progress bar */
#progress-bar,
#progress-bar-mobile {
    appearance: none;
    /* width: 100%; */
    width: 380px;
    height: 4px;
    background: linear-gradient(to right, #ff2c57 0%, #d1d5db 0%);
    border-radius: 2px;
    outline: none;
}

@media (max-width: 768px) {
    #progress-bar,
    #progress-bar-mobile {
        width: calc(100vw - 150px);
    }

    /* Customize volume control similarly if needed */
    #volume-control {
        width: calc(100vw - 305px) !important;
    }
}

#progress-bar::-webkit-slider-thumb,
#progress-bar-mobile::-webkit-slider-thumb {
    appearance: none;
    width: 10px;
    height: 10px;
    background: #ff2c57;
    border-radius: 50%;
    cursor: pointer;
}

#progress-bar::-moz-range-thumb,
#progress-bar-mobile::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #ff2c57;
    border-radius: 50%;
    cursor: pointer;
}

#progress-bar::-ms-thumb,
#progress-bar-mobile::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #ff2c57;
    border-radius: 50%;
    cursor: pointer;
}

#progress-bar::-webkit-slider-runnable-track,
#progress-bar-mobile::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
}

/* Customize volume control similarly if needed */
#volume-control {
    appearance: none;
    width: 100%;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    outline: none;
}

#volume-control::-webkit-slider-thumb {
    appearance: none;
    width: 10px;
    height: 10px;
    background: #ff2c57;
    border-radius: 50%;
    cursor: pointer;
}