:root {
    --accent-black: #000000;
    --accent-peach-cream: #FBE3C1;
    --accent-olive-green: #809848;
    --accent-golden-yellow: #EFB70F;

    --text-grey-75: #BFBFBF;
    --text-grey-50: #808080;
    --text-grey-25: #404040;
    --text-black:   #000000;
    --text-white:   #FFFFFF;

    --bg-peach-cream: var(--accent-peach-cream);
    --bg-light: #FEF6EC;
    --bg-white: #FFFFFF;
    --bg-black: #000000;

    --primary: var(--accent-black);
    --secondary: var(--accent-peach-cream);

    --font-primary: 'Urbanist', sans-serif;
    --font-secondary: 'Sniglet', cursive;
}


/* ============================
   URBANIST — PRIMARY FONT
============================ */

/* Thin (100) */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

/* ExtraLight (200) */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

/* Light (300) */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* Regular (400) */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Medium (500) */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

/* SemiBold (600) */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

/* Bold (700) */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* ExtraBold (800) */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

/* Black (900) */
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* ============================
   SNIGLET — SECONDARY FONT
============================ */

/* Regular (400) */
@font-face {
    font-family: 'Sniglet';
    src: url('../fonts/Sniglet-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* ExtraBold (800) */
@font-face {
    font-family: 'Sniglet';
    src: url('../fonts/Sniglet-ExtraBold_2.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: var(--font-primary);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

.primary-heading {
    font-family: var(--font-primary);
}

.heading {
    font-family: var(--font-secondary);
}


.m-space-top-xl {
    margin-top: 60px;
}

.m-space-bottom-xl {
    margin-bottom: 60px;
}

.m-space-bottom-m {
    margin-bottom: 40px;
}

.m-space-tb-xl {
    margin: 60px 0;
}

.m-space-top-s {
    margin-top: 20px;
}

.m-space-bottom-s {
    margin-bottom: 20px;
}

.m-space-tb-s {
    margin: 20px 0;
}

.p-space-top-xl {
    padding-top: 60px;
}

.p-space-bottom-xl {
    padding-bottom: 60px;
}

.p-space-tb-xl {
    padding: 60px 0;
}

.p-space-top-m {
    padding-top: 40px;
}

.p-space-bottom-m {
    padding-bottom: 40px;
}

.p-space-tb-m {
    padding: 40px 0;
}

.p-space-tb-lr-m {
    padding: 40px;
}


.fs-1 {
    font-size: 60px;
    line-height: 120%;
    font-family: var(--font-primary);
    font-weight: 600;
}
.fs-2 {
    font-size: 54px;
    line-height: 120%;
    font-weight: 800;
    font-family: var(--font-primary);
}

.fs-3 {
    font-size: 48px;
    line-height: 120%;
    font-weight: 500;
    font-family: var(--font-primary);
}

.fs-4 {
    font-size: 48px;
    line-height: 120%;
    font-weight: 800;
    font-family: var(--font-secondary);
}

.fs-5 {
    font-size: 32px;
    line-height: 140%;
    font-weight: 600;
    font-family: var(--font-primary);
}

.fs-6 {
    font-size: 24px;
    line-height: 140%;
    font-weight: 600;
    font-family: var(--font-primary);
}

.p1 {
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
}

.p2 {
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
}

.p3 {
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
}

.p4 {
    font-size: 20px;
    font-weight: 500;
    line-height: 140%;
}

.txt-align-center {
    text-align: center;
}

.txt-c-white {
    color: var( --text-white);
}

.txt-c-black {
    color: var( --text-black);
}

.b-bg-color-golden-yellow {
    background-color: var(--accent-golden-yellow);
}

.b-bg-color-olive-green {
    background-color: var(--accent-olive-green);
}

.b-bg-color-black {
    background-color: var(--bg-black);
}

.b-bg-color-white {
    background-color: var(--bg-white);
}

.b-bg-color-peach-cream {
    background-color: var(--bg-peach-cream);
}


.button-w-style-1 a {
    display: inline-block;
}

.button-w-style-1 button {
    background: transparent;
    border: 0;
    cursor: pointer;
}

.button-w-style-1 .button-image-group {
    display: grid;
    align-items: center;
    grid-template-columns: auto 56px;
}

.button-w-style-1 .button-image-group .label-txt {
    padding: 16px 32px;
    font-size: 16px;
    text-decoration: none;
    color: var(--text-white);
    border-radius: 35px;
    background-color: var(--accent-black);
    border: solid 4px var(--accent-black);
}

.button-w-style-1 .button-image-group .icon-holder {
    width: 56px;
    height: 56px;
    margin-left: -12px;
    border-radius: 100%;
    border: solid 4px var(--accent-black);
    background-color: var(--accent-golden-yellow);
    display: grid;
    align-items: center;
    justify-content: center;
}

.button-w-style-1 .button-image-group .icon-holder img {
    width: 24px;
}

.button-w-style-1 .button-image-group .active-on-hover {
    display: none;
}

.button-w-style-1 .button-image-group:hover .hidden-on-hover {
    display: none;
}

.button-w-style-1 .button-image-group:hover .active-on-hover {
    display: grid;
    transform: rotate(-45deg);
}

.button-w-style-1 .button-image-group:hover .icon-holder{
    background-color: var(--accent-olive-green);
}

.button-w-style-2 a {
    text-decoration: none;
    display: inline-block;
}

.button-w-style-2 .button-image-group {
    display: grid;
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    align-items: center;
    gap: 16px;
    grid-template-columns: auto 6px;
}

.button-w-style-2 a:hover .button-image-group {
    color: var(--accent-olive-green);
}

.button-w-style-3 {
    display: inline-block;
    border-radius: 35px;
}

.button-w-style-3 a {
    padding: 12px 25px;
    font-size: 16px;

    display: block;
    color: inherit;
    text-decoration: none;
}

.border-radius-m {
    border-radius: 35px;
}

.simple-img {
    max-width: 100%;
}


.form__error {
    color: #d32f2f;
    font-size: 0.85rem;
    margin-top: 4px;
}

.form__input.error,
.form__select.error,
.form__textarea.error {
    border-color: #d32f2f;
}