/* ---------------------------------------------- /*
*  Font Imports
/* ---------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&family=Poppins:wght@300;400;600;700&display=swap');


/* ---------------------------------------------- /*
*  Root Colors & Fonts
/* ---------------------------------------------- */

:root {
    --white: #FFF;
    --black: #000;
    --grey: whitesmoke;
    --grey-dark: #191919;
    --grey-faded: rgba(0, 0, 0, 0.15);

    --poppins: 'Poppins', sans-serif;
    --dmsans: 'DM Sans', sans-serif;

    --html-font-family: var(--dmsans);
    --html-font-size: 18px;
    --html-font-weight: 300;
    --html-font-style: normal;
    --html-line-height: 1.8em;
    --html-letter-spacing: 0;
    --html-text-transform: none;
    --html-text-decoration: none;
    --html-color: var(--black);

    --h1-font-family: var(--poppins);
    --h1-font-size: 3.5rem;
    --h1-font-weight: 700;
    --h1-font-style: inherit;
    --h1-line-height: 1.3em;
    --h1-letter-spacing: inherit;
    --h1-text-transform: inherit;
    --h1-text-decoration: inherit;
    --h1-color: inherit;

    --h2-font-family: var(--poppins);
    --h2-font-size: 2rem;
    --h2-font-weight: 700;
    --h2-font-style: inherit;
    --h2-line-height: 1.3em;
    --h2-letter-spacing: inherit;
    --h2-text-transform: inherit;
    --h2-text-decoration: inherit;
    --h2-color: inherit;

    --h3-font-family: var(--poppins);
    --h3-font-size: 1.75rem;
    --h3-font-weight: 500;
    --h3-font-style: inherit;
    --h3-line-height: 1.3em;
    --h3-letter-spacing: inherit;
    --h3-text-transform: inherit;
    --h3-text-decoration: inherit;
    --h3-color: inherit;

    --h4-font-family: var(--poppins);
    --h4-font-size: 1.5rem;
    --h4-font-weight: 400;
    --h4-font-style: inherit;
    --h4-line-height: 1.3em;
    --h4-letter-spacing: inherit;
    --h4-text-transform: inherit;
    --h4-text-decoration: inherit;
    --h4-color: inherit;

    --h5-font-family: var(--poppins);
    --h5-font-size: 1.25rem;
    --h5-font-weight: 400;
    --h5-font-style: inherit;
    --h5-line-height: 1.3em;
    --h5-letter-spacing: inherit;
    --h5-text-transform: inherit;
    --h5-text-decoration: inherit;
    --h5-color: inherit;

    --body-background-color: var(--white);
    --bold-font-weight: 700;
    --link-color: var(--black);
    --link-color-hover: var(--black);
    --border: 1px solid var(--grey-faded);
    --shadow: 0 0.5rem 1rem var(--grey-faded);
    --transition: 0.3s;

    --txt-1-color: var(--black);
    --txt-2-color: var(--black);
    --txt-3-color: var(--black);

    --background-color-1: var(--grey);
    --background-color-2: var(--grey);
    --background-color-3: var(--grey);

    --primary: rgb(63 85 54 / 100%) !important;
  --theme-bg100: rgb(63 85 54 / 100%);
  --theme-bg100-trlct: rgb(63 85 54 / 50%);
  --theme-bg30: rgb(63 85 54 / 30%);
  --light: rgb(237, 230, 137);
  --light-bg96: rgb(237, 240, 160);
}

/* ---------------------------------------------- /*
*  Responsive Font Sizes
/* ---------------------------------------------- */


@media only screen and (max-width: 1350px) {
    :root {
        --html-font-size: 17.5px;
    }
}

@media only screen and (max-width: 1100px) {
    :root {
        --html-font-size: 17px;
    }
}

@media only screen and (max-width: 800px) {
    :root {
        --html-font-size: 16.5px;
    }
}

@media only screen and (max-width: 501px) {
    :root {
        --html-font-size: 16px;
    }
}

/* ---------------------------------------------- /*
*  Root Element Styles
/* ---------------------------------------------- */

:root {
    --btn-1-font-family: inherit;
    --btn-1-font-size: inherit;
    --btn-1-font-weight: inherit;
    --btn-1-line-height: inherit;
    --btn-1-letter-spacing: inherit;
    --btn-1-text-transform: inherit;
    --btn-1-text-decoration: inherit;
    --btn-1-color: var(--white);
    --btn-1-padding: 0.75rem 1.25rem;
    --btn-1-background: var(--black);
    --btn-1-border: 2px solid var(--black);
    --btn-1-border-radius: 0rem;
    --btn-1-box-shadow: initial;

    --btn-1-color-hover: var(--black);
    --btn-1-background-hover: var(--white);
    --btn-1-border-hover: 2px solid var(--black);

    --btn-2-font-family: inherit;
    --btn-2-font-size: inherit;
    --btn-2-font-weight: inherit;
    --btn-2-line-height: inherit;
    --btn-2-letter-spacing: inherit;
    --btn-2-text-transform: inherit;
    --btn-2-text-decoration: inherit;
    --btn-2-color: var(--black);
    --btn-2-padding: 0.75rem 1.25rem;
    --btn-2-background: var(--white);
    --btn-2-border: 2px solid var(--black);
    --btn-2-border-radius: 0rem;
    --btn-2-box-shadow: initial;

    --btn-2-color-hover: var(--white);
    --btn-2-background-hover: var(--black);
    --btn-2-border-hover: 2px solid var(--black);
}

/* ---------------------------------------------- /*
*  Fonts
/* ---------------------------------------------- */
html {
    font-family: var(--html-font-family);
    font-size: var(--html-font-size);
    font-weight: var(--html-font-weight);
    font-style: var(--html-font-style);
    line-height: var(--html-line-height);
    letter-spacing: var(--html-letter-spacing);
    text-transform: var(--html-text-transform);
    text-decoration: var(--html-text-decoration);
    color: var(--html-color);
}

h1,
.h1 {
    font-family: var(--h1-font-family);
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
    font-style: var(--h1-font-style);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: var(--h1-text-transform);
    text-decoration: var(--h1-text-decoration);
    color: var(--h1-color);
}

h2,
.h2 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    font-style: var(--h2-font-style);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    text-transform: var(--h2-text-transform);
    text-decoration: var(--h2-text-decoration);
    color: var(--h2-color);
}

h3,
.h3 {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    font-style: var(--h3-font-style);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    text-transform: var(--h3-text-transform);
    text-decoration: var(--h3-text-decoration);
    color: var(--h3-color);
}

h4,
.h4 {
    font-family: var(--h4-font-family);
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight);
    font-style: var(--h4-font-style);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    text-transform: var(--h4-text-transform);
    text-decoration: var(--h4-text-decoration);
    color: var(--h4-color);
}

h5,
.h5 {
    font-family: var(--h5-font-family);
    font-size: var(--h5-font-size);
    font-weight: var(--h5-font-weight);
    font-style: var(--h5-font-style);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    text-transform: var(--h5-text-transform);
    text-decoration: var(--h5-text-decoration);
    color: var(--h5-color);
}

/* ---------------------------------------------- /*
*  Colors
/* ---------------------------------------------- */


.txt-1 {
    color: var(--txt-1-color);
}

.txt-2 {
    color: var(--txt-2-color);
}

.txt-3 {
    color: var(--txt-3-color);
}

a {
    color: var(--link-color);
    transition: color var(--transition);
}

a:hover {
    color: var(--link-color-hover);
}

body {
    background: var(--body-background-color);
}

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

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

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


/* ---------------------------------------------- /*
*  Components
/* ---------------------------------------------- */

.btn-1 {
    font-family: var(--btn-1-font-family);
    font-size: var(--btn-1-font-size);
    font-weight: var(--btn-1-font-weight);
    line-height: var(--btn-1-line-height);
    letter-spacing: var(--btn-1-letter-spacing);
    text-transform: var(--btn-1-text-transform);
    text-decoration: var(--btn-1-text-decoration);
    color: var(--btn-1-color);
    padding: var(--btn-1-padding);
    background: var(--btn-1-background);
    border: var(--btn-1-border);
    border-radius: var(--btn-1-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}

.btn-1:hover {
    color: var(--btn-1-color-hover);
    background: var(--btn-1-background-hover);
    border: var(--btn-1-border-hover);
}

a.btn-1 {
    display: inline-block;
}

.btn-2 {
    font-family: var(--btn-2-font-family);
    font-size: var(--btn-2-font-size);
    font-weight: var(--btn-2-font-weight);
    line-height: var(--btn-2-line-height);
    letter-spacing: var(--btn-2-letter-spacing);
    text-transform: var(--btn-2-text-transform);
    text-decoration: var(--btn-2-text-decoration);
    color: var(--btn-2-color);
    padding: var(--btn-2-padding);
    background: var(--btn-2-background);
    border: var(--btn-2-border);
    border-radius: var(--btn-2-border-radius);
    box-shadow: var(--btn-1-box-shadow);
}

.btn-2:hover {
    color: var(--btn-2-color-hover);
    background: var(--btn-2-background-hover);
    border: var(--btn-2-border-hover);
}

a.btn-2 {
    display: inline-block;
}

@media only screen and (max-width: 1100px) {
    .btn-1:hover {
        background: var(--btn-1-background);
        color: var(--btn-1-color);
        border: var(--btn-1-border);
    }

    .btn-2:hover {
        background: var(--btn-2-background);
        color: var(--btn-2-color);
        border: var(--btn-2-border);
    }
}