body{

margin:0;
font-family:'Montserrat',sans-serif;
color:#333;
text-align:center;

}

.hero{

height:90vh;
background-image:url("images/hero.jpg");
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
justify-content:center;

}

.hero-overlay{

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.35);

}

.hero-content{

position:relative;
color:white;
max-width:700px;

}

.hero h1{

font-family:'Playfair Display',serif;
font-size:56px;
margin:20px 0;

}

.hero p{

font-size:18px;
opacity:.9;

}

.hero-buttons{

margin-top:30px;

}

.primary-btn{

background:#f47b2c;
color:white;
padding:14px 28px;
text-decoration:none;
border-radius:6px;
margin-right:10px;
display:inline-block;

}

.secondary-btn{

border:2px solid white;
color:white;
padding:12px 26px;
text-decoration:none;
border-radius:6px;

}

.songs{

padding:80px 20px;
background:#f7f7f7;

}

.song-grid{

display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;

}

.song-card{

width:280px;

}

.song-card img{

width:100%;
border-radius:6px;

}

.how{

padding:80px 20px;

}

.steps{

display:flex;
gap:40px;
justify-content:center;
flex-wrap:wrap;

}

.step{

max-width:260px;

}

.pricing{

padding:80px 20px;
background:#fafafa;

}

.pricing h1{

font-size:48px;
margin:10px 0;

}

.pricing ul{

list-style:none;
padding:0;

}

.cta{

padding:80px 20px;
background:#2b2f38;
color:white;

}

footer{

padding:30px;
background:#222;
color:#aaa;

}

@media(max-width:768px){

.hero h1{

font-size:36px;

}

.song-grid{

flex-direction:column;
align-items:center;

}

}