/* =========================
   ROOT VARIABLES
========================= */

:root {
    --primary-color: #781414;
    --accent-color: #3C281E;
    --background-color: #F7F4EF;
    --surface-color: #E6DCCD;
    --text-color: #191919;
    --light-text: #FFFFFF;
}

/* =========================
   GLOBAL STYLES
========================= */

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: Georgia, serif;
}

/* =========================
   NAVBAR
========================= */

.custom-navbar {
    background-color: var(--primary-color);
}

.navbar-brand {
    color: var(--light-text);
    font-size: 1.8rem;
    font-weight: bold;
}

.nav-link {
    color: var(--light-text);
    font-size: 1.1rem;
    margin-left: 1rem;
}

.nav-link:hover {
    color: #f5d6a0;
}

/* =========================
   HERO SECTION
========================= */

.hero-section {
    background-color: var(--surface-color);
    padding: 4rem 2rem;
    border-radius: 1rem;
}

.hero-title {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.hero-text {
    max-width: 700px;
    margin: 0 auto;
}

/* =========================
   PAGE TITLES
========================= */

.page-title {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* =========================
   FOOTER
========================= */

.footer {
    background-color: var(--accent-color);
    color: var(--light-text);
    margin-top: 3rem;
}

/* =========================
   RESPONSIVE DESIGN
========================= */

@media (max-width: 768px) {

    .hero-section {
        padding: 2rem 1rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .nav-link {
        margin-left: 0;
    }

}