.hero-section {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
.hero-banner {
width: 100%;
height: 100%;
position: relative;
.hero-image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
object-position: center;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.65));
}
}
}
.hero-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
padding: 0 var(--spacing-md);
box-sizing: border-box;
text-align: center;
h1 {
font-size: var(--font-size-6xl);
font-weight: 700;
color: var(--color-white);
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
letter-spacing: 1px;
max-width: 1000px;
margin: 0 auto var(--spacing-md);
line-height: 1.2;
}
.hero-subtitle {
font-size: var(--font-size-2xl);
color: rgba(255, 255, 255, 0.9);
max-width: 800px;
margin: 0 auto var(--spacing-xl);
line-height: 1.6;
font-weight: 400;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}
.hero-action {
margin-top: var(--spacing-md);
.hero-btn {
font-size: var(--font-size-md);
font-weight: 600;
background-color: var(--color-primary);
border: 2px solid var(--color-primary);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
&:hover {
background-color: transparent;
color: var(--color-white);
border-color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
}
}
}
} @media (max-width: 992px) {
.hero-section .hero-content {
h1 {
font-size: var(--font-size-5xl);
max-width: 800px;
}
.hero-subtitle {
font-size: var(--font-size-xl);
max-width: 700px;
}
}
}
@media (max-width: 768px) {
.hero-section {
min-height: 450px;
.hero-content {
h1 {
font-size: var(--font-size-4xl);
max-width: 600px;
letter-spacing: 1px;
}
.hero-subtitle {
font-size: var(--font-size-lg);
max-width: 500px;
margin-bottom: var(--spacing-lg);
}
.hero-action .hero-btn {
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-sm);
}
}
}
}
@media (max-width: 576px) {
.hero-section {
min-height: 400px;
.hero-content {
h1 {
font-size: var(--font-size-3xl);
max-width: 100%;
letter-spacing: 0;
}
.hero-subtitle {
font-size: var(--font-size-md);
max-width: 100%;
margin-bottom: var(--spacing-md);
}
.hero-action .hero-btn {
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-xs);
}
}
}
}