.hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    padding: 120px 20px 80px;

    background:
        linear-gradient(
            rgba(58,36,21,.45),
            rgba(58,36,21,.45)
        ),
        url("../images/hero.jpg");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-content {
    max-width: 900px;
    color: var(--white);
}

.hero-subtitle {
    color: var(--cream);
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(52px, 7vw, 88px);
    line-height: 1.1;
    color: var(--white);
    margin: 0 0 30px;
}

.hero-text {
    font-size: 24px;
    color: var(--white);
    line-height: 1.7;
    max-width: 700px;
    margin: auto;
}

.hero-buttons {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.hero .btn-primary {
   border: 2px solid var(--cream-light);
   color: var(--cream-light);   
}

.hero .btn-primary:hover {
    background: var(--border);
}

.hero .btn-secondary {
    border: 2px solid var(--cream-light);
    color: var(--cream-light);
}

.hero .btn-secondary:hover {
    background: var(--cream-light);
    color: var(--primary);
}