/*==========================
PREMIUM HEADER
==========================*/

body{

background:#09111f;
font-family:Poppins,sans-serif;
color:#fff;

}

.modern-navbar{

background:rgba(9,17,31,.95);

backdrop-filter:blur(15px);

position:sticky;

top:0;

z-index:999;

padding:15px 0;

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

}

.logo{

font-size:28px;

font-weight:700;

color:#fff!important;

}

.nav-link{

color:#cbd5e1!important;

font-weight:500;

margin:0 10px;

transition:.3s;

}

.nav-link:hover{

color:#3b82f6!important;

}

.search-box{

width:280px;

background:#162032;

border:none;

border-radius:50px;

padding:12px 20px;

color:#fff;

}

.search-box:focus{

background:#1f2d45;

box-shadow:0 0 0 3px rgba(59,130,246,.25);

color:#fff;

}

.container.bg-white{

background:transparent!important;

}

.card{

background:#162032!important;

border:none!important;

border-radius:18px;

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

overflow:hidden;

}

.card-header{

background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;

color:#fff!important;

font-size:18px;

font-weight:700;

border:none;

}

.card-body{

background:#162032;

}

.card-footer{

background:#111827;

border:none;

}

@media(max-width:768px){

.search-box{

width:100%;

margin-top:10px;

}

.logo{

font-size:22px;

}

}

/*==========================
PREMIUM SONG CARD
==========================*/

.song-card{

display:flex;

align-items:center;

justify-content:space-between;

padding:15px;

background:#162032;

border-radius:18px;

margin-bottom:15px;

transition:.35s;

color:#fff;

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

}

.song-card:hover{

transform:translateY(-4px);

background:#1e293b;

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

}

.song-thumb{

position:relative;

width:90px;

height:90px;

overflow:hidden;

border-radius:16px;

flex-shrink:0;

}

.song-thumb img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.song-card:hover img{

transform:scale(1.08);

}

.play-btn{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:42px;

height:42px;

background:#22c55e;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

opacity:0;

transition:.3s;

color:#fff;

font-size:22px;

}

.song-card:hover .play-btn{

opacity:1;

}

.song-info{

flex:1;

padding:0 18px;

}

.song-info h5{

margin:0;

font-size:18px;

font-weight:700;

color:#fff;

}

.song-info p{

margin:6px 0;

color:#94a3b8;

font-size:14px;

}

.song-badges .badge{

margin-right:6px;

border-radius:30px;

padding:5px 10px;

}

.download-btn{

width:50px;

height:50px;

border-radius:50%;

background:#2563eb;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

color:#fff;

transition:.3s;

}

.song-card:hover .download-btn{

background:#22c55e;

transform:rotate(-15deg);

}

@media(max-width:768px){

.song-card{

padding:12px;

}

.song-thumb{

width:70px;

height:70px;

}

.song-info h5{

font-size:15px;

}

.song-info p{

font-size:12px;

}

.download-btn{

width:42px;

height:42px;

}

}

/*==========================
HOME PAGE
==========================*/

.music-section{

margin-bottom:35px!important;

border-radius:22px!important;

overflow:hidden;

background:#111827!important;

box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.section-title{

margin:0;

padding:18px 22px;

font-size:22px;

font-weight:700;

background:linear-gradient(135deg,#2563eb,#7c3aed);

color:#fff;

display:flex;

align-items:center;

gap:12px;

}

.section-title i{

font-size:24px;

}

.music-body{

padding:18px!important;

background:#162032;

}

.music-footer{

padding:14px;

text-align:center;

background:#0f172a!important;

}

.music-footer a{

color:#22c55e!important;

font-weight:600;

transition:.3s;

}

.music-footer a:hover{

letter-spacing:1px;

}

/* Sidebar */

.col-lg-4 .music-section{

position:sticky;

top:90px;

}

/* Section spacing */

.row{

row-gap:25px;

}

/* Category */

.list-group-item{

border-radius:14px!important;

margin-bottom:8px;

font-weight:500;

}

/* Header icons */

.bi{

vertical-align:middle;

}

/* Responsive */

@media(max-width:991px){

.col-lg-4 .music-section{

position:relative;

top:auto;

}

.section-title{

font-size:18px;

padding:15px;

}

}