.hero{

    position:relative;

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

    display:flex;

    align-items:center;

    justify-content:center;

    background:url("../images/hero/hero.jpg") center center/cover no-repeat;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(36,23,29,.60),
        rgba(36,23,29,.60)
    );

    z-index:1;

}

.hero-container{

    position:relative;

    z-index:2;

    width:100%;

}

.hero-content{

    max-width:820px;

    margin:auto;

    text-align:center;

    animation:fadeHero .8s ease;

}

.hero-top{

    display:inline-block;

    color:#ffffff;

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:15px;

    font-weight:600;

    margin-bottom:30px;

}

.hero h1{

    color:#fff;

    font-size:clamp(78px,8vw,130px);

    line-height:.88;

    margin-bottom:8px;

    text-shadow:0 10px 35px rgba(0,0,0,.45);

}

.hero h1 span{

    display:block;

    color:#D7B46A;

    font-size:.66em;

    font-weight:500;

    letter-spacing:6px;

    margin-top:-8px;

    text-shadow:0 8px 25px rgba(0,0,0,.35);

}

.hero p{

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

    max-width:640px;

    margin:42px auto 52px;

    font-size:22px;

    line-height:1.7;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

}

.hero-buttons a{

    width:230px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    font-weight:600;

}

.btn-book{

    background:#CF738D;

    color:#fff;

}

.btn-book:hover{

    background:#C76381;

}

.btn-outline{

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

    color:#fff;

    transition:.35s;

}

.btn-outline:hover{

    background:#fff;

    color:#4A2F39;

}

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ========================= */
/* TABLET */
/* ========================= */

@media(max-width:992px){

.hero{

    min-height:90vh;

}

.hero h1{

    font-size:72px;

}

.hero p{

    font-size:20px;

    max-width:560px;

}

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media(max-width:768px){

.hero{

    min-height:100svh;

    background-position:65% center;

    padding:90px 0;

}

.hero-content{

    width:100%;

}

.hero-top{

    font-size:12px;

    letter-spacing:3px;

}

.hero h1{

    font-size:52px;

}

.hero h1 span{

    letter-spacing:3px;

}

.hero p{

    font-size:18px;

    margin:30px auto 40px;

    max-width:95%;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

    gap:16px;

}

.hero-buttons a{

    width:270px;

}

}

/* ========================= */
/* SMALL PHONES */
/* ========================= */

@media(max-width:480px){

.hero h1{

    font-size:44px;

}

.hero p{

    font-size:17px;

}

}