/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0D0D0D;
    color:#EDE6DA;
    font-family:'Inter',sans-serif;
}

/* HERO */

.reservation-hero{
    position:relative;

    height:70vh;

    background:url('images/reservation-hero.jpg');

    background-size:cover;
    background-position:center;

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

.overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.82)
    );
}

.reservation-content{
    position:relative;

    z-index:2;

    text-align:center;
}

.reservation-content p{
    color:#C8A46B;

    letter-spacing:4px;

    font-size:0.8rem;

    margin-bottom:25px;
}

.reservation-content h1{
    font-family:'Cormorant Garamond',serif;

    font-size:6rem;
    font-weight:300;

    line-height:1;
}

/* FORM SECTION */

.form-section{
    padding:140px 8%;

    max-width:850px;

    margin:auto;
}

.form-intro{
    text-align:center;

    margin-bottom:70px;
}

.form-intro h2{
    font-family:'Cormorant Garamond',serif;

    font-size:4rem;
    font-weight:300;

    margin-bottom:25px;
}

.form-intro p{
    color:#AFAFAF;

    line-height:2;
}

form{
    display:flex;

    flex-direction:column;

    gap:28px;
}

.input-group span{
    display:block;

    margin-bottom:14px;

    color:#C8A46B;

    letter-spacing:2px;

    font-size:0.75rem;
}

.input-group input,
.input-group textarea{
    width:100%;

    padding:24px;

    background:#151515;

    border:
    1px solid rgba(255,255,255,0.05);

    color:#EDE6DA;

    font-family:'Inter',sans-serif;

    font-size:1rem;

    outline:none;

    transition:0.4s ease;
}

.input-group textarea{
    height:180px;

    resize:none;
}

.input-group input:focus,
.input-group textarea:focus{
    border:
    1px solid rgba(200,164,107,0.4);
}

button{
    margin-top:20px;

    padding:22px;

    border:none;

    background:#C8A46B;

    color:#0D0D0D;

    font-size:0.85rem;

    letter-spacing:3px;

    cursor:pointer;

    transition:0.4s ease;
}

button:hover{
    opacity:0.85;
}

/* MOBILE */

@media(max-width:600px){

    .reservation-content h1{
        font-size:3.5rem;
    }

    .form-intro h2{
        font-size:3rem;
    }

    .form-section{
        padding:110px 7%;
    }

}