/*====================================
FRAMEWORK 8 HERO
====================================*/

.hero8{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding-top:140px;

}

.hero-bg{

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 20%,#7B2DFF22,transparent 30%),

radial-gradient(circle at 80% 30%,#00E5FF22,transparent 30%),

radial-gradient(circle at 50% 90%,#FF2D9522,transparent 35%);

filter:blur(40px);

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

position:relative;

z-index:2;

}

.hero-badge{

display:inline-block;

padding:10px 22px;

border-radius:40px;

background:rgba(255,255,255,.06);

border:1px solid rgba(0,229,255,.25);

margin-bottom:25px;

}

.hero-left h1{

font-size:78px;

line-height:1.05;

margin-bottom:30px;

}

.hero-left h1 span{

color:#00E5FF;

text-shadow:

0 0 20px #00E5FF;

}

.hero-left p{

font-size:20px;

line-height:1.9;

color:#C8D5F0;

margin-bottom:45px;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

}

.btn-neon{

padding:18px 36px;

border-radius:60px;

background:linear-gradient(90deg,#7B2DFF,#00E5FF);

font-weight:700;

color:white;

box-shadow:

0 0 30px rgba(123,45,255,.45);

}

.btn-outline{

padding:18px 36px;

border-radius:60px;

border:1px solid #00E5FF;

color:#00E5FF;

}

.hero-stats{

display:flex;

gap:60px;

}

.hero-stats h2{

font-size:42px;

color:#00E5FF;

}

.hero-right{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.music-card{

padding:40px;

text-align:center;

background:rgba(255,255,255,.06);

border:1px solid rgba(0,229,255,.2);

border-radius:25px;

backdrop-filter:blur(20px);

transition:.4s;

font-size:60px;

}

.music-card h3{

margin-top:20px;

font-size:28px;

}

.music-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 35px rgba(0,229,255,.25);

}

.equalizer{

position:absolute;

left:50%;

bottom:40px;

transform:translateX(-50%);

display:flex;

gap:8px;

}

.equalizer span{

width:6px;

height:35px;

background:#00E5FF;

animation:eq 1s infinite ease-in-out;

border-radius:20px;

}

.equalizer span:nth-child(2){

animation-delay:.2s;

}

.equalizer span:nth-child(3){

animation-delay:.4s;

}

.equalizer span:nth-child(4){

animation-delay:.6s;

}

.equalizer span:nth-child(5){

animation-delay:.3s;

}

.equalizer span:nth-child(6){

animation-delay:.5s;

}

.equalizer span:nth-child(7){

animation-delay:.7s;

}

@keyframes eq{

0%,100%{

height:20px;

}

50%{

height:70px;

}

}

@media(max-width:991px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-left h1{

font-size:54px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-stats{

justify-content:center;

}

}