/*==========================================================
  LISTEN SECTION
==========================================================*/

.listen-section{

    padding:100px 0;
    transition:.3s;
    margin-top: 0px;

}



.listen-section .section-title{

    text-align:center;

    margin-bottom:30px;

}

.listen-section .section-title h2{

    font-size:3.5rem;

    color:#fff;

    margin-bottom:10px;

}

.listen-section .section-title p{

    color:#b8b8b8;

    font-size:1.05rem;

}

/*==========================================================
  MUSIC CARD
==========================================================*/

.music-card{

    display:grid;

    grid-template-columns:140px 1fr 240px;

    gap:35px;

    align-items:center;

    background:#141414;

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    padding:28px 35px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.music-card:hover{

    transform:translateY(-6px);

    border-color:#1DB954;

    box-shadow:
        0 20px 45px rgba(29,185,84,.18),
        0 0 40px rgba(29,185,84,.08);

}

/*==========================================================
  COVER
==========================================================*/

.card-cover{

    display:flex;

    justify-content:center;

}

.card-cover img{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:16px;

    transition:.4s;

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

}

.music-card:hover .card-cover img{

    transform:scale(1.05);

}

/*==========================================================
  CONTENT
==========================================================*/

.platform-name{

    display:flex;

    align-items:center;

    gap:10px;

    color:#1DB954;

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:8px;

}

.platform-name i{

    font-size:1.7rem;

}

.card-content h3{

    color:#fff;

    font-size:2.2rem;

    margin-bottom:5px;

}

.card-content p{

    color:#a9a9a9;

    margin-bottom:10px;

}

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

.audio-player{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

}

/*==========================================================
  PLAY BUTTON
==========================================================*/

#playBtn{

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:#1DB954;
    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:all .3s ease;

    flex-shrink:0;

}

#playBtn i{

    font-size:15px;

}

#playBtn:hover{

    background:#1DB954;

    color:#fff;

    transform:scale(1.08);

    box-shadow:0 0 18px rgba(29,185,84,.35);

}

#playBtn:active{

    transform:scale(.95);

}

#currentTime,
#duration{

    color:#bfbfbf;

    font-size:.9rem;

}

/*==========================================================
  PROGRESS BAR
==========================================================*/

#progress{

    width:100%;

    appearance:none;

    height:5px;

    background:#3a3a3a;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

}

#progress::-webkit-slider-runnable-track{

    height:5px;

    background:#3a3a3a;

    border-radius:50px;

}

#progress::-webkit-slider-thumb{

    appearance:none;

    width:16px;

    height:16px;

    border-radius:50%;

    background:#1DB954;

    margin-top:-6px;

    transition:.3s;

}

#progress:hover::-webkit-slider-thumb{

    transform:scale(1.2);

    box-shadow:0 0 12px rgba(29,185,84,.6);

}
/*==========================================================
  ACTION
==========================================================*/

.card-action{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    border-left:1px solid rgba(255,255,255,.08);

    min-height:170px;

    padding-left:40px;

}

.listen-link{

    display:flex;

    align-items:center;

    white-space:nowrap;

    gap:12px;

    color:#1DB954;

    text-decoration:none;

    font-size:1.15rem;

    font-weight:700;

    transition:.3s;

}

.listen-link:hover{

    color:#35df72;

}

.listen-link i{

    transition:.3s;

}

.listen-link:hover i{

    transform:translateX(6px);

}

/*==========================================================
  GLOW
==========================================================*/

.music-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:#1DB954;

    filter:blur(130px);

    opacity:.07;

    top:-100px;

    right:-80px;

    pointer-events:none;

}

/*==========================================================
  MOBILE
==========================================================*/

@media(max-width:991px){

.music-card{

    grid-template-columns:1fr;

    text-align:center;

}

.card-cover{

    justify-content:center;

}

.platform-name{

    justify-content:center;

}

.audio-player{

    grid-template-columns: 160px 1fr 210px;

}

.card-action{

    border-left:none;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:25px;

}

}