.sound-card {
    width: 100%;

    background: linear-gradient(
    90deg,
    rgba(0, 50, 160, 0.35) 0%,
    rgba(10, 10, 10, 0.95) 50%,
    rgba(180, 0, 50, 0.35) 100%
    );
    border: 1px solid rgba(70, 100, 255, 0.3);

    backdrop-filter: blur(10px);



    border: 1px solid #2b2b2b;

    border-radius: 22px;

    padding: 24px;

    margin-bottom: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

    transition: 0.3s;
}

.sound-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.sound-info h2 {
    color: white;

    margin-bottom: 8px;
}

.sound-info p {
    color: #a0a0a0;
}

.card-buttons {

    display: flex;

    align-items: center;

    gap: 6px;
}

.download-button {

    margin-right: 12px;
}

.favorite-button {

    margin-right: 12px;
}



.play-button,
.download-button {
    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    font-size: 22px;

    color: white;

    background: linear-gradient(
        90deg,
        #ff4d4d,
        #ff9900,
        #ffd700,
        #00c853,
        #00b0ff,
        #aa00ff
    );

    transition: 0.3s;
}

.play-button:hover,
.download-button:hover {
    transform: scale(1.1);
}


.play-button:hover {
    transform: scale(1.1);

    box-shadow: 0 0 20px rgba(37, 99, 235, 0.8);
}

.download-button:hover {
    transform: scale(1.1);

    box-shadow: 0 0 20px rgba(220, 38, 38, 0.8);
}



.recent-section {

    width: 90%;

    max-width: 1200px;

    margin: 40px auto;
}

.recent-title {

    color: white;

    font-size: 28px;

    margin-bottom: 20px;
}

.recent-container {

    display: flex;

    gap: 15px;

    overflow-x: auto;

    padding-bottom: 10px;
}

.recent-item {

    min-width: 220px;

    max-width: 220px;

    padding: 15px 20px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.08);

    color: white;

    font-size: 16px;

    overflow: hidden;

    cursor: pointer;

    transition: 0.3s;
}

.recent-item span {

    display: inline-block;

    white-space: nowrap;

    animation: recentTextMove 8s linear infinite;
}

@keyframes recentTextMove {

    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}



.recent-item:hover {

    transform: translateY(-4px);
}



.favorite-button {

    width: 20px;

    height: 20px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    font-size: 25px;

    background: rgba(255, 255, 255, 0.1);

    transition: 0.3s;
}

.favorite-button:hover {

    transform: scale(1.1);

    background: rgba(255, 255, 255, 0.2);
}

.favorite-button.active {

    background: rgba(255, 0, 100, 0.2);
}

.share-button {

    width: 30px;

    height: 40px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    font-size: 20px;

    background: rgba(255, 255, 255, 0.1);

    transition: 0.3s;
}

.share-button:hover {

    transform: scale(1.1);

    background: rgba(59, 130, 246, 0.25);
}