/* =========================================================
   Brand Color Utilities for Bootstrap
   Uses names like:
   bg-brand-primary
   text-brand-dark
   btn-brand-accent
   border-brand-secondary
   ========================================================= */

:root {
    --brand-primary:   #6BB9D4; 
    --brand-secondary: #084463;
	--brand-tertiary:  #6BBBD5;
    --brand-accent:    #FFC64F;
    --brand-light:     #F6F7F2;
    --brand-dark:      #32021F;
}


/* =========================================================
   BACKGROUND UTILITIES
   ========================================================= */

.bg-brand-primary {
    background-color: var(--brand-primary) !important;
}

.bg-brand-secondary {
    background-color: var(--brand-secondary) !important;
}

.bg-brand-accent {
    background-color: var(--brand-accent) !important;
}

.bg-brand-light {
    background-color: var(--brand-light) !important;
}

.bg-brand-dark {
    background-color: var(--brand-dark) !important;
}


/* =========================================================
   TEXT UTILITIES
   ========================================================= */

.text-brand-primary {
    color: var(--brand-primary) !important;
}

.text-brand-secondary {
    color: var(--brand-secondary) !important;
}

.text-brand-tertiary {
    color: var(--brand-tertiary) !important;
}

.text-brand-accent {
    color: var(--brand-accent) !important;
}

.text-brand-light {
    color: var(--brand-light) !important;
}

.text-brand-dark {
    color: var(--brand-dark) !important;
}


/* =========================================================
   BORDER UTILITIES
   ========================================================= */

.border-brand-primary {
    border-color: var(--brand-primary) !important;
}

.border-brand-secondary {
    border-color: var(--brand-secondary) !important;
}

.border-brand-tertiary {
    border-color: var(--brand-tertiary) !important;
}

.border-brand-accent {
    border-color: var(--brand-accent) !important;
}

.border-brand-light {
    border-color: var(--brand-light) !important;
}

.border-brand-dark {
    border-color: var(--brand-dark) !important;
}


/* =========================================================
   BUTTONS
   Usage: class="btn btn-brand-primary"
   ========================================================= */

.btn-brand-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #0B4650;
    --bs-btn-border-color: #0B4650;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #083A42;
    --bs-btn-hover-border-color: #083A42;
    --bs-btn-focus-shadow-rgb: 11, 70, 80;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #062F36;
    --bs-btn-active-border-color: #062F36;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #0B4650;
    --bs-btn-disabled-border-color: #0B4650;
}

.btn-brand-secondary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #6F7F78;
    --bs-btn-border-color: #6F7F78;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #5F6E68;
    --bs-btn-hover-border-color: #5F6E68;
    --bs-btn-focus-shadow-rgb: 111, 127, 120;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #53605B;
    --bs-btn-active-border-color: #53605B;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #6F7F78;
    --bs-btn-disabled-border-color: #6F7F78;
}

.btn-brand-accent {
    --bs-btn-color: #272F3C;
    --bs-btn-bg: #FFEF4D;
    --bs-btn-border-color: #FFEF4D;
    --bs-btn-hover-color: #272F3C;
    --bs-btn-hover-bg: #E8D93F;
    --bs-btn-hover-border-color: #E8D93F;
    --bs-btn-focus-shadow-rgb: 255, 239, 77;
    --bs-btn-active-color: #272F3C;
    --bs-btn-active-bg: #D9CA35;
    --bs-btn-active-border-color: #D9CA35;
    --bs-btn-disabled-color: #272F3C;
    --bs-btn-disabled-bg: #FFEF4D;
    --bs-btn-disabled-border-color: #FFEF4D;
}

.btn-brand-light {
    --bs-btn-color: #272F3C;
    --bs-btn-bg: #F9F7F2;
    --bs-btn-border-color: #F9F7F2;
    --bs-btn-hover-color: #272F3C;
    --bs-btn-hover-bg: #E8E5DF;
    --bs-btn-hover-border-color: #E8E5DF;
    --bs-btn-focus-shadow-rgb: 249, 247, 242;
    --bs-btn-active-color: #272F3C;
    --bs-btn-active-bg: #DDDAD3;
    --bs-btn-active-border-color: #DDDAD3;
    --bs-btn-disabled-color: #272F3C;
    --bs-btn-disabled-bg: #F9F7F2;
    --bs-btn-disabled-border-color: #F9F7F2;
}

.btn-brand-dark {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #272F3C;
    --bs-btn-border-color: #272F3C;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #1F2631;
    --bs-btn-hover-border-color: #1F2631;
    --bs-btn-focus-shadow-rgb: 39, 47, 60;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #181E27;
    --bs-btn-active-border-color: #181E27;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #272F3C;
    --bs-btn-disabled-border-color: #272F3C;
}


/* =========================================================
   OUTLINE BUTTONS
   Usage: class="btn btn-outline-brand-primary"
   ========================================================= */

.btn-outline-brand-primary {
    --bs-btn-color: #0B4650;
    --bs-btn-border-color: #0B4650;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #0B4650;
    --bs-btn-hover-border-color: #0B4650;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #0B4650;
    --bs-btn-active-border-color: #0B4650;
}

.btn-outline-brand-secondary {
    --bs-btn-color: #6F7F78;
    --bs-btn-border-color: #6F7F78;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #6F7F78;
    --bs-btn-hover-border-color: #6F7F78;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #6F7F78;
    --bs-btn-active-border-color: #6F7F78;
}

.btn-outline-brand-accent {
    --bs-btn-color: #272F3C;
    --bs-btn-border-color: #FFEF4D;
    --bs-btn-hover-color: #272F3C;
    --bs-btn-hover-bg: #FFEF4D;
    --bs-btn-hover-border-color: #FFEF4D;
    --bs-btn-active-color: #272F3C;
    --bs-btn-active-bg: #FFEF4D;
    --bs-btn-active-border-color: #FFEF4D;
}

.btn-outline-brand-light {
    --bs-btn-color: #F9F7F2;
    --bs-btn-border-color: #F9F7F2;
    --bs-btn-hover-color: #272F3C;
    --bs-btn-hover-bg: #F9F7F2;
    --bs-btn-hover-border-color: #F9F7F2;
    --bs-btn-active-color: #272F3C;
    --bs-btn-active-bg: #F9F7F2;
    --bs-btn-active-border-color: #F9F7F2;
}

.btn-outline-brand-dark {
    --bs-btn-color: #272F3C;
    --bs-btn-border-color: #272F3C;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #272F3C;
    --bs-btn-hover-border-color: #272F3C;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #272F3C;
    --bs-btn-active-border-color: #272F3C;
}


/* =========================================================
   LINK UTILITIES
   ========================================================= */

.link-brand-primary {
    color: var(--brand-primary) !important;
}
.link-brand-primary:hover {
    color: #083A42 !important;
}

.link-brand-secondary {
    color: var(--brand-secondary) !important;
}
.link-brand-secondary:hover {
    color: #5F6E68 !important;
}

.link-brand-accent {
    color: var(--brand-accent) !important;
}
.link-brand-accent:hover {
    color: #E8D93F !important;
}

.link-brand-light {
    color: var(--brand-light) !important;
}
.link-brand-light:hover {
    color: #E8E5DF !important;
}

.link-brand-dark {
    color: var(--brand-dark) !important;
}
.link-brand-dark:hover {
    color: #1F2631 !important;
}


@font-face {
  font-family: "MomcakeBold";
  src: url('fonts/MomcakeBold/font.woff2') format('woff2'), url('fonts/MomcakeBold/font.woff') format('woff');
}
@font-face {
  font-family: "MomcakeMedium";
  src: url('fonts/MomcakeMedium/font.woff2') format('woff2'), url('fonts/MomcakeMedium/font.woff') format('woff');
}
@font-face {
  font-family: "MomcakeRegular";
  src: url('fonts/MomcakeRegular/font.woff2') format('woff2'), url('fonts/MomcakeRegular/font.woff') format('woff');
}
@font-face {
  font-family: "MomcakeThin";
  src: url('fonts/MomcakeThin/font.woff2') format('woff2'), url('fonts/MomcakeThin/font.woff') format('woff');
}


/* =========================================================
   OPTIONAL DEFAULTS
   Remove if you only want utility classes
   ========================================================= */

body {
    background-color: var(--brand-light);
    color: var(--brand-dark);
}

a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-secondary);
}