/* ======================================================
   HERO - IMPERIUM CAFÉ
====================================================== */

.hero{

    position:relative;

    min-height:calc(100vh - 85px);

    margin-top:85px;

    display:grid;

    grid-template-columns:45% 55%;

    align-items:center;

    gap:80px;

    padding:60px 7%;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,
    rgba(184,138,60,.12),
    transparent 25%),

    linear-gradient(
    90deg,
    #050505 25%,
    rgba(5,5,5,.85) 45%,
    rgba(5,5,5,.25) 65%,
    transparent);

}

/* ========================= */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,.10),
        rgba(0,0,0,.55)
    );

    pointer-events:none;

}

/* ========================= */

.hero-content{

    position:relative;

    z-index:10;

    max-width:620px;

}

/* ========================= */

.hero-subtitle{

    color:#B88A3C;

    text-transform:uppercase;

    letter-spacing:.35rem;

    font-size:.85rem;

    margin-bottom:20px;

}

/* ========================= */

.hero h1{

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

    line-height:.95;

    margin-bottom:35px;

}

/* ========================= */

.hero p{

    font-size:1.12rem;

    max-width:520px;

    margin-bottom:45px;

}

/* ========================= */

.hero-actions{

    display:flex;

    gap:18px;

}

/* ========================= */

.hero-image{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

/* ========================= */

.hero-image img{

    width:100%;

    max-width:760px;

    height:82vh;

    object-fit:cover;

    border-radius:26px;

    box-shadow:

    0 40px 90px rgba(0,0,0,.55),

    0 0 60px rgba(184,138,60,.15);

}

/* ========================= */

.hero-image::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    right:-80px;

    bottom:-80px;

    background:radial-gradient(

        circle,

        rgba(184,138,60,.25),

        transparent 70%

    );

    filter:blur(30px);

}

/* ========================= */

.btn-secondary{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:15px 34px;

    border-radius:999px;

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

    color:#fff;

    transition:.35s;

}

.btn-secondary:hover{

    background:#fff;

    color:#000;

}

/* ========================= */

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:30px;

    width:2px;

    height:70px;

    background:#333;

    transform:translateX(-50%);

}

.scroll-indicator::after{

    content:"";

    display:block;

    width:100%;

    height:18px;

    background:#B88A3C;

    animation:scroll 2s infinite;

}

@keyframes scroll{

0%{

transform:translateY(0);

opacity:0;

}

30%{

opacity:1;

}

100%{

transform:translateY(50px);

opacity:0;

}

}

/* ========================= */

@media(max-width:992px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:50px;

gap:40px;

}

.hero-content{

margin:auto;

}

.hero-actions{

justify-content:center;

flex-wrap:wrap;

}

.hero-image{

justify-content:center;

}

.hero-image img{

    width:100%;

    height:380px;

    object-fit:cover;

    border-radius:20px;

}

.scroll-indicator{

display:none;

}

}

@media(max-width:768px){

.hero{

    margin-top:85px;

    min-height:calc(100vh - 85px);

}

@media (max-width:768px){

    .hero{

        margin-top:75px;

        min-height:auto;

    }

}

.hero h1{

font-size:3rem;

}

.hero p{

font-size:1rem;

}

.hero-image img{

height:420px;

}

}