.custom-audio-player {
    background-image: url(https://angeloasis.com/wp-content/uploads/2024/12/bg-player-audio.webp);
    border-radius: 10px;
    padding: 30px 20px 30px 30px;
    color: #FFF;
    align-items: center;
    justify-content: space-between;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    background-size: cover;
    background-position: top center;
}

.audio-title {
    font-size: 24px;flex: 1;
}
.custom-play-pause-btn {
    background: #CA2993;
    border: 1px solid;
    border-radius: 50%;
    outline: none;
    font-size: 24px;
    color: #FFF;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.3s, transform 0.3s;
}

.custom-play-pause-btn:hover,
.custom-play-pause-btn:focus {
   /* color: #FFD700;  Color change on hover for feedback */
    transform: scale(1.04); /* Slight increase in size on hover for feedback */
}

.custom-progress-container {
    display: flex;
    align-items: center;
    flex: 3;
    margin-bottom: 20px;
    margin-top: 30px;
}

.current-time,
.total-time {
font-size: 14px;
color: #FFF;
margin: 0 5px;
}

.custom-progress-bar {
flex-grow: 1;
-webkit-appearance: none; 
appearance: none;
	background:#fff;
height: 10px; 
cursor: pointer;
}


.custom-progress-bar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px; 
height: 15px; 
background: #CA2993; 
cursor: pointer;
border-radius: 50%;
}

.custom-progress-bar::-moz-range-thumb {
width: 15px; 
height: 15px; 
background: #CA2993;
cursor: pointer;
border-radius: 50%;
}

.custom-progress-bar::-ms-thumb {
width: 15px;
height: 15px;
background: #FFD700;
cursor: pointer;
border-radius: 50%;
}

.custom-progress-bar::-webkit-slider-runnable-track,
.custom-progress-bar::-moz-range-track,
.custom-progress-bar::-ms-track {
width: 100%;
height: 2px;
background: #FFF;
}
.custom-player-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
	.custom-audio-player {
	background-size: auto;
		padding:12px 12px 12px 12px;
	}
	.audio-title{
		font-size:22px;
	}
	.custom-progress-bar{
	width:100%;	
	}

.custom-play-pause-btn{
height:44px;
}
}