/* =========================================
   GLOBAL RESET
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    color: #222;
    background: #f8f6f2;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input {
    font-family: inherit;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================
   GLOBAL VARIABLES
========================================= */

:root {

    --black: #1c1a18;
    --dark: #24211e;

    --gold: #b28a52;
    --gold-light: #d0ad72;

    --cream: #f8f6f2;
    --ivory: #f4f0e9;

    --white: #ffffff;

    --text: #22201e;
    --muted: #77736d;

    --border: #ddd8d0;

    --serif: "Cormorant Garamond", serif;
    --sans: "Inter", sans-serif;

}


/* =========================================
   CONTAINER
========================================= */

.container {
    width: min(1400px, 90%);
    margin: auto;
}


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

.btn {
    min-width: 185px;

    padding: 16px 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-family: var(--sans);

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: all 0.35s ease;
}

.btn-primary {
    background: var(--white);
    color: var(--black);
}

.btn-primary:hover {
    background: var(--gold);
    color: var(--white);
}

.btn-dark {
    background: var(--black);
    color: var(--white);
}

.btn-dark:hover {
    background: var(--gold);
}

.btn-outline {
    border: 1px solid rgba(255,255,255,0.75);
    color: var(--white);
}

.btn-outline:hover {
    background: var(--white);
    color: var(--black);
}


/* =========================================
   SECTION COMMON
========================================= */

.section {
    padding: 110px 0;
}

.section-heading {
    text-align: center;
    margin-bottom: 55px;
}

.section-eyebrow {
    display: block;

    margin-bottom: 14px;

    font-size: 10px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--gold);
}

.section-title {
    font-family: var(--serif);

    font-size: clamp(42px, 5vw, 70px);

    font-weight: 400;

    line-height: 1;

    color: var(--black);
}

.section-description {
    max-width: 550px;

    margin: 20px auto 0;

    font-size: 14px;

    line-height: 1.8;

    color: var(--muted);
}


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

@media (max-width: 768px) {

    .section {
        padding: 75px 0;
    }

    .btn {
        min-width: 175px;
    }

}