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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:850px;

    overflow:hidden;

    background:#000;

}

/*==================================================
BACKGROUND
==================================================*/

.hero-image{

    position:absolute;

    inset:0;

    z-index:1;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    transition:transform 10s ease;

}

.hero:hover .hero-image img{

    transform:scale(1.06);

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.20) 0%,
        rgba(0,0,0,.25) 35%,
        rgba(0,0,0,.55) 75%,
        rgba(0,0,0,.80) 100%
    );

}

/*==================================================
CONTENT
==================================================*/

.hero-content{

    position:relative;

    z-index:5;

    width:min(1500px,92%);

    height:100%;

    margin:auto;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

/*==================================================
TEXT
==================================================*/

.hero-inner{

    width:580px;

    text-align:left;

    color:#fff;

    animation:heroFade .9s ease;

}

/*==================================================
SUBTITLE
==================================================*/

.hero-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:#C89255;

    font-size:13px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:600;

}

/*==================================================
TITLE
==================================================*/

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:72px;

    line-height:1.05;

    font-weight:700;

    margin-bottom:24px;

}

/*==================================================
DESCRIPTION
==================================================*/

.hero p{

    font-size:18px;

    line-height:1.8;

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

    margin-bottom:40px;

}

/*==================================================
BUTTONS
==================================================*/

.hero-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

/*==================================================
BUTTON
==================================================*/

.hero-btn{

    height:54px;

    padding:0 34px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:4px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    transition:.35s;

}

.hero-btn.primary{

    background:#C89255;

    color:#fff;

}

.hero-btn.primary:hover{

    background:#b37a42;

    transform:translateY(-3px);

}

.hero-btn.secondary{

    border:1px solid rgba(255,255,255,.45);

    color:#fff;

    backdrop-filter:blur(8px);

}

.hero-btn.secondary:hover{

    background:#fff;

    color:#111;

}

/*==================================================
ANIMATION
==================================================*/

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

    .hero h1{

        font-size:60px;

    }

    .hero-inner{

        width:500px;

    }

}

@media(max-width:991px){

    .hero{

        min-height:700px;

    }

    .hero-content{

        justify-content:center;

        text-align:center;

    }

    .hero-inner{

        width:90%;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero h1{

        font-size:50px;

    }

}

@media(max-width:768px){

    .hero{

        min-height:620px;

    }

    .hero h1{

        font-size:38px;

    }

    .hero p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-btn{

        width:100%;

        max-width:280px;

    }

}

@media(max-width:480px){

    .hero{

        min-height:560px;

    }

    .hero h1{

        font-size:32px;

    }

    .hero-subtitle{

        font-size:12px;

        letter-spacing:2px;

    }

}