/*=========================
PLAYER
=========================*/

.demo-player{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:30px;

    margin-bottom:30px;

}

.play-btn{

    width:56px;

    height:56px;

    border-radius:50%;

    border:1px solid var(--gold);

    background:transparent;

    color:var(--gold);

    cursor:pointer;

    font-size:1rem;

    transition:.3s;

}

.play-btn:hover{

    background:var(--gold);

    color:#000;

}

.player-info{

    display:flex;

    flex-direction:column;

}

.player-info strong{

    font-family:Syne,sans-serif;

    font-size:.95rem;

}

.player-info span{

    opacity:.5;

    font-size:.8rem;

}

.progress{

    flex:1;

    height:4px;

    background:#333;

    border-radius:20px;

    position:relative;

    overflow:hidden;

}

.progress::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:35%;

    background:var(--gold);

}