:root {
    --green: #173d32;
    --dark-green: #102c24;
    --cream: #f5f2e9;
    --gold: #c9a96b;
    --white: #fbfaf6;

    --heading: "Playfair Display", Georgia, serif;
    --body: "DM Sans", Arial, sans-serif;
}

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

body {
    font-family: var(--body);
    background: var(--white);
    color: var(--green);
    line-height: 1.7;
}

/* HEADER */

.header {
    height: 85px;
    padding: 0 7%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    
}


.logo h3 {
    display:block;
    font-size:14px;
    letter-spacing:2px;
    line-height:1.4
}

.logo small {
    display:block;
    font-size:10px;
    letter-spacing:2px;
    color:#7d847c
}

.opening-status {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

.dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    background: var(--gold);
    border-radius: 50%;

    margin-right: 8px;
}

/* HERO SECTION */

.hero {
    min-height: 750px;

    display: flex;
    align-items: center;

    position: relative;

    background-image: url(
      main.jpeg
    );

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

.overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(13, 38, 30, 0.88),
        rgba(13, 38, 30, 0.45)
    );
}

.hero-content {
    position: relative;

    max-width: 600px;
    margin-left: 12%;

    color: white;
    padding: 70px 20px;
}

.eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 600;

    color: var(--gold);

    margin-bottom: 25px;
}

.hero h1 {
    font-family: var(--heading);
    font-size: clamp(55px, 7vw, 88px);
    line-height: 1.1;

    font-weight: 500;

    margin-bottom: 25px;
}

.hero h1 em {
    color: var(--gold);
}

.description {
    max-width: 430px;
    font-size: 14px;
    color: #e2e8e1;
}

.gold-line {
    width: 200px;
    height: 1px;
    background: var(--gold);
    margin: 35px 0 20px;
}

.hero-content h4 {
    font-size: 11px;
    letter-spacing: 2px;
    color: #f1dfb9;
}

.location {
    margin-top: 10px;

    font-size: 9px;
    letter-spacing: 2px;
    color: #d3dbd2;
}

/* WELCOME SECTION */

.welcome {
    background: var(--cream);

    padding: 90px 12%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12%;

    align-items: center;
}

.welcome h2 {
    font-family: var(--heading);
    font-size: 45px;
    line-height: 1.2;

    font-weight: 500;

    margin-bottom: 20px;
}

.welcome h2 em {
    color: var(--gold);
}

.welcome-text > p:last-child {
    font-size: 13px;
    color: #68736a;
}

.contact {
    border-left: 1px solid #d9d2c3;
    padding-left: 12%;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 25px;
}

.contact-item span {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border: 1px solid var(--gold);
    border-radius: 50%;

    color: var(--gold);
}

.contact-item small {
    font-size: 9px;
    letter-spacing: 2px;
    color: #9a8051;
}

.contact-item pre {
    font-family: var(--heading);
    font-size: 16px;
}

.notice {
    font-size: 11px;
    color: #81877e;
    margin-top: 20px;
}

/* FOOTER */

footer {
    min-height: 90px;

    background: var(--dark-green);
    color: white;

    padding: 25px 7%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;
}

.footer-logo {
    font-size: 12px;
    letter-spacing: 2px;
}

footer p,
footer span {
    font-size: 10px;
    color: #c3cec3;
}

/* MOBILE RESPONSIVENESS */

@media (max-width: 700px) {

    .header {
        height: 75px;
        padding: 0 5%;
    }

    .logo h3 {
        font-size: 10px;
    }

    .opening-status {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .hero {
        min-height: 620px;
        background-position: 60% center;
    }

    .hero-content {
        margin-left: 5%;
        padding: 50px 20px;
    }

    .hero h1 {
        font-size: 55px;
    }

    .welcome {
        padding: 65px 8%;

        grid-template-columns: 1fr;
        gap: 40px;
    }

    .welcome h2 {
        font-size: 36px;
    }

    .contact {
        border-left: none;
        border-top: 1px solid #d9d2c3;

        padding: 30px 0 0;
    }

    footer {
        flex-wrap: wrap;
        padding: 25px 7%;
    }

    footer p {
        width: 100%;
        order: 3;
    }
}