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

#hero{

    position:relative;

    height:100vh;

    min-height:900px;

    overflow:hidden;

}

/* ==========================
   IMAGEM
========================== */

.hero-background{
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-background img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:60% center;
}

/* ==========================
   OVERLAY
========================== */

.hero-overlay{

    background:
    linear-gradient(
        90deg,
        rgba(18,13,10,.65) 0%,
        rgba(18,13,10,.45) 38%,
        rgba(18,13,10,.15) 70%,
        rgba(18,13,10,0) 100%
    );

}

/* ==========================
   CONTEÚDO
========================== */

.hero-content{

    position:relative;

    z-index:3;

    height:100vh;

    min-height:900px;

    max-width:620px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    padding-top:0;
    
    margin-top:-50px;

}

.hero-subtitle{

    margin-bottom:28px;

    color:#C18B55;
     
    opacity:1;

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.85rem;

    font-weight:600;

}

.hero h1{

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

    font-size:clamp(5rem,7vw,7rem);

    line-height:.92;

    color:#fff;

    margin-bottom:28px;

}

.hero p{

    max-width:560px;

    color:rgba(255,255,255,.90);

    font-size:1.15rem;

    line-height:1.85;

    margin-bottom:42px;

}

/* ==========================
   BOTÃO
========================== */

.hero .btn{

    width:260px;

    height:56px;

    font-size:1.05rem;

}

/* ==========================
   SCROLL
========================== */

#hero::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:240px;

    background:linear-gradient(
        transparent,
        var(--color-background)
    );

    z-index:2;

}