/* ========================================
   HERO COMPONENT
======================================== */

.hero-component {

    min-height: 600px;

    padding: 80px 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.25)
        ),
        url("https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1800&q=80")
        center / cover no-repeat;

    color: white;
}


.hero-content {
    max-width: 800px;
}


.hero-eyebrow {

    display: block;

    margin-bottom: 20px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;
}


.hero-component h1 {

    margin: 0 0 15px;

    font-family: var(--font-heading);

    font-size: clamp(55px, 9vw, 110px);

    font-weight: 400;

    line-height: 0.95;
}


.hero-component p {

    margin: 0 0 30px;

    font-size: 20px;
}


.hero-button {

    display: inline-flex;

    padding: 13px 30px;

    background: var(--primary);

    color: white;

    border-radius: var(--radius);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;

    transition: 0.2s ease;
}


.hero-button:hover {

    transform: translateY(-2px);

    opacity: 0.9;
}