/* =========================
Hero
=========================*/


.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #010101;
    padding: 100px 0 60px;
}


/* CENTERED CONTENT */

.hero-container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;

    position: relative;
    z-index: 3;
}


/* TEXT - LEFT */

.hero-content {
    width: 50%;
    max-width: 550px;
}

.hero-subtitle {
    display: inline-block;
    color: #C59B67;
    letter-spacing: 3px;
    font-size: .9rem;
    margin-bottom: 15px;
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin: 20px 0;

    font-family: "Cormorant Garamond", serif;
    color: #A8A8A8;
}

.hero h1 span {
    display: block;
    color: #C59B67;
}

.hero p {
    color: #A8A8A8;
    line-height: 1.9;
    max-width: 520px;
    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-gold{
    border-radius:4px;
}

.btn-outline {
    border: 1px solid #A8A8A8;
    border-radius: 4px;
    color: #A8A8A8;
}


/* IMAGE - RIGHT */

.hero-image {
    position: absolute;

    top: 50%;
    right: 0;

    width: 60%;
    height: 75vh;

    transform: translateY(-50%);

    z-index: 1;

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

.hero-image img {
    width: 95%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    display: block;
}


/* FADE */

.hero-fade {
    position: absolute;
    inset: 0;

    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            to right,
            #010101 5%,
            #010101 20%,
            rgba(1, 1, 1, .95) 32%,
            rgba(1, 1, 1, .65) 45%,
            rgba(1, 1, 1, .15) 60%,
            transparent 78%
        );
}