.hero {
position: relative;
width: 100%;
min-height: 850px;
display: flex;
align-items: center;
justify-content: center;
padding: 190px 32px 80px;
overflow: hidden;
font-family: var(--siga-font, "Montserrat", sans-serif);
} .hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(35, 62, 85, 0.7),
rgba(35, 62, 85, 0.49)
);
} .hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
width: 100%;
max-width: 870px;
} .hero__card {
width: 100%;
background-color: rgba(35, 62, 85, 0.8);
border-radius: 16px;
padding: 14px 35px 27px 34px;
display: flex;
flex-direction: column;
gap: 16px;
}
.hero__titles {
display: flex;
gap: 0;
align-items: stretch;
}
.hero__accent-line {
flex-shrink: 0;
width: 3px;
background-color: #fa0400;
border-radius: 2px;
margin-right: 35px;
}
.hero__title-text {
display: flex;
flex-direction: column;
}
.hero__title-main {
font-size: 72px;
font-weight: 600;
line-height: 1;
color: #fdf1d5;
letter-spacing: 10.8px;
text-transform: uppercase;
margin: 0;
white-space: nowrap;
}
.hero__title-sub {
font-size: 40px;
font-weight: 600;
line-height: 52px;
color: #fdf1d5;
letter-spacing: 12px;
text-transform: uppercase;
margin: 0;
}
.hero__tagline {
font-size: 24px;
font-weight: 500;
line-height: 32px;
color: #ffffff;
letter-spacing: -0.48px;
margin: 0;
} .hero__actions {
display: flex;
gap: 16px;
align-items: center;
}
.hero__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
font-family: var(--siga-font, "Montserrat", sans-serif);
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 1000px;
white-space: nowrap;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.hero__btn:hover {
transform: translateY(-1px);
}
.hero__btn--primary {
background-color: #fa0400;
color: #ffffff;
}
.hero__btn--primary:hover {
background-color: #d80300;
color: #ffffff;
}
.hero__btn--secondary {
background-color: #f2e2ce;
color: #1f323a;
}
.hero__btn--secondary:hover {
background-color: #e8d4bc;
color: #1f323a;
} @media (max-width: 1100px) {
.hero {
min-height: 750px;
padding-top: 160px;
}
.hero__title-main {
font-size: 56px;
letter-spacing: 8px;
}
.hero__title-sub {
font-size: 32px;
line-height: 44px;
letter-spacing: 8px;
}
.hero__tagline {
font-size: 20px;
line-height: 28px;
}
} @media (max-width: 860px) {
.hero {
min-height: 650px;
padding: 130px 24px 60px;
}
.hero__title-main {
font-size: 42px;
letter-spacing: 6px;
white-space: normal;
}
.hero__title-sub {
font-size: 26px;
line-height: 38px;
letter-spacing: 6px;
}
.hero__accent-line {
margin-right: 20px;
}
.hero__card {
padding: 14px 24px 24px 20px;
}
.hero__tagline {
font-size: 18px;
line-height: 26px;
}
} @media (max-width: 520px) {
.hero {
min-height: 560px;
padding: 110px 16px 48px;
}
.hero__content {
gap: 24px;
}
.hero__title-main {
font-size: 28px;
letter-spacing: 4px;
}
.hero__title-sub {
font-size: 19px;
line-height: 30px;
letter-spacing: 4px;
}
.hero__accent-line {
margin-right: 14px;
}
.hero__card {
padding: 12px 16px 20px 14px;
}
.hero__tagline {
font-size: 16px;
line-height: 24px;
}
.hero__actions {
flex-direction: column;
width: 100%;
}
.hero__btn {
width: 100%;
justify-content: center;
}
}