.sleep-fairy-hero {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background:
linear-gradient(
rgba(255,255,255,.55),
rgba(255,255,255,.55)
),
url('/s/hero-image.jpg');
background-size: cover;
background-position: center;
padding: 80px 30px;
}
.hero-content {
max-width: 850px;
}
.hero-content h1 {
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.15;
color: #313131;
margin-bottom: 20px;
}
.hero-content p {
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 35px;
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.primary-btn {
background: #5f7a65;
color: white;
padding: 16px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
}
.secondary-btn {
border: 2px solid #5f7a65;
color: #5f7a65;
padding: 16px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
}
.primary-btn:hover,
.secondary-btn:hover {
transform: translateY(-2px);
transition: .3s ease;
}