.preview-box {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    background-color: #f0f0f0;
}

.fixed-size-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    object-position: center;
}
.circle-player {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}

.play-button {
background-color: #d9534f;
color: white;
border: none;
border-radius: 50%;
width: 70px;
height: 70px;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center; 
transition: background-color 0.3s ease;
z-index: 2;
}

.play-button:hover {
background-color: #d9534f;
}





@keyframes pulse {
0% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}

.audio-time {
margin-top: 10px;
font-size: 16px;
color: #d9534f;
}




@keyframes bounce {
0%, 100% {
transform: scaleY(0.3);
}
50% {
transform: scaleY(1);
}
}



.equalizer {
display: flex;
justify-content: center;
align-items: flex-end;
margin-top: 15px;
height: 60px; /* ارتفاع نوارهای اکولایزر */
gap: 5px; /* فاصله بین نوارها */
overflow: hidden; /* جلوگیری از خروج نوارها از کادر */
}



.equalizer-index {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 78px;
    height: 90px;
    gap: 5px;
    overflow: hidden;
    }



.bar {
width: 8px; /* عرض هر نوار */
height: 100%;
background-color: #d9534f;
border-radius: 3px; /* لبه‌های گرد برای ظاهری نرم‌تر */
transform-origin: bottom; /* تغییر مقیاس از پایین نوار */
transition: transform 0.2s ease-in-out; /* انیمیشن نرم‌تر هنگام تغییر */
opacity: 0.8; /* کمی شفافیت برای ظاهر بهتر */
}

.bar:nth-child(odd) {
background-color: #d9534f; /* رنگ متفاوت برای نوارهای فرد */
}

.bar:nth-child(even) {
background-color: #333333; /* رنگ متفاوت برای نوارهای زوج */
}