/*==========================================================
  BUTLER FONT
==========================================================*/

@font-face {
    font-family: "Butler";
    src: url("../fonts/butler/Butler-Lgt.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Butler";
    src: url("../fonts/butler/Butler-Rmn.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Butler";
    src: url("../fonts/butler/Butler-Med.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Butler";
    src: url("../fonts/butler/Butler-SBd.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Butler";
    src: url("../fonts/butler/Butler-Bd.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Butler";
    src: url("../fonts/butler/Butler-XBd.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Butler";
    src: url("../fonts/butler/Butler-Blk.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



/*==========================================================
  MODERN BEAUTY DESIGN SYSTEM
  VARIABLES
==========================================================*/

:root{

    /* Brand Colors */

    --mb-primary: #5A3A2B;
    --mb-primary-dark: #3D261C;
    --mb-secondary: #E8CFC2;

    --mb-black: #1F1F1F;
    --mb-white: #FFFFFF;
    --mb-text: #4D4D4D;

    --mb-light: #F8F8F8;

    --mb-border: #1F1F1F;

    /* Typography */

    --mb-heading: "Oswald", sans-serif;
    --mb-body: "Butler", serif;

    /* Animation */

    --mb-transition: .45s cubic-bezier(.4,0,.2,1);

/* Button Variables */

--mb-btn-bg: #5A3A2B;
--mb-btn-hover: #E8CFC2;
--mb-btn-text: #FFFFFF;
--mb-btn-text-hover: #5A3A2B;
--mb-btn-border: #1F1F1F;

--mb-btn-font: "Oswald", sans-serif;

--mb-btn-font-size: 22px;

--mb-btn-padding-y: 12px;
--mb-btn-padding-x: 28px;

--mb-btn-border-width: 3px;
--mb-btn-gap: 4px;

--mb-btn-radius: 0;

--mb-btn-transition: .45s cubic-bezier(.4,0,.2,1);

}