/*
========================================================== 
    GLOBAL VARIABLES
==========================================================
*/
:root {
    /* == SPACING == */
    --space-0: 0;
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-28: 1.75rem;
    --space-32: 2rem;
    --space-36: 2.25rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-56: 3.5rem;
    --space-64: 4rem;
    --space-72: 4.5rem;
    --space-80: 5rem;
    --space-96: 6rem;
    --space-128: 8rem;
    --space-256: 16rem;
    --space-512: 32rem;


    /* == GRID == */
    --grid-xs: 1px;
    --grid-margin-xs: 1.25rem;

    --grid-sm: 30em;
    --grid-margin-sm: 2rem;

    --grid-md: 45em;
    --grid-margin-md: 2.5rem;

    --grid-lg: 60em;
    --grid-margin-lg: 4rem;

    --grid-xl: 75em;
    --grid-margin-xl: 6.5rem;

    --grid-hg: 96em;
    --grid-margin-hg: 7.25rem;

    --grid-uw: 120em;
    --grid-margin-uw: 11rem;

    --grid-size: 100%;
    --grid-margin: var(--grid-margin-xs);
    --grid-content-area: calc(var(--grid-size) - (var(--grid-margin) * 2));

    --section-spacer: 2.5rem;
    --section-spacer-sm: 2.5rem;
    --section-spacer-md: 3rem;
    --section-spacer-lg: 3rem;
    --section-spacer-xl: 3.5rem;
    --section-spacer-hg: 5rem;

    --section-spacer-small: 1.5rem;
    --section-spacer-small-sm: 2rem;
    --section-spacer-small-md: 3rem;
    --section-spacer-small-lg: 3.5rem;
    --section-spacer-small-xl: 4rem;
    --section-spacer-small-hg: 4.5rem;

    --page-intro-bottom-spacing: 2.25rem;
    --page-intro-bottom-spacing-sm: 2.25rem;
    --page-intro-bottom-spacing-md: 2.5rem;
    --page-intro-bottom-spacing-lg: 3rem;
    --page-intro-bottom-spacing-xl: 3rem;
    --page-intro-bottom-spacing-hg: 2rem;


    /* == FONTS == */
    --font-display: "Passion One";
    --font-body: "Poppins";

    /* Font Sizes */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-md: 1.25rem;
    --font-lg: 1.5rem;
    --font-xl: 2rem;
    --font-hg: 2.5rem;
    --font-dp-1: 3.5rem;
    --font-dp-2: 5rem;
    --font-dp-3: 6rem;

    /* Font Weights */
    --font-100: 100;
    --font-200: 200;
    --font-300: 300;
    --font-400: 400;
    --font-500: 500;
    --font-600: 600;
    --font-700: 700;
    --font-800: 800;
    --font-900: 900;

    /* Line Height */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-compact: 1.4;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    --leading-loose: 2;

    /* Word Spacing */
    --tracking-tighter: -0.05rem;
    --tracking-tight: -0.025rem;
    --tracking-normal: 0;
    --tracking-wide: 0.01rem;
    --tracking-wider: 0.025rem;
    --tracking-widest: 0.05rem;


    /* == COLORS == */
    /* Primary Color */
    --gold: hsl(47, 99%, 51%);
    --gold-light: hsl(47, 90%, 60%);
    --gold-dark: hsl(47, 99%, 44%);

    /* Secondary Color */
    --blue: hsl(251, 88%, 37%);
    --blue-faint: hsl(251, 88%, 88%);
    --blue-light: hsl(251, 88%, 72%);
    --blue-bold: hsl(251, 88%, 26%);
    --blue-dark: hsl(252, 87%, 15%);
    --inverse-blue-dark: hsl(252, 89%, 12.5%);

    /* Grey Color */
    --grey-1: hsl(240, 1%, 99%);
    --grey-2: hsl(240, 1%, 95%);
    --grey-3: hsl(240, 1%, 85%);
    --grey-4: hsl(240, 2%, 70%);
    --grey-5: hsl(240, 2%, 57%);
    --grey-6: hsl(240, 2%, 48%);
    --grey-7: hsl(240, 2%, 39%);
    --grey-8: hsl(240, 2%, 28%);
    --grey-9: hsl(240, 2%, 18%);
    --grey-10: hsl(240, 2%, 10%);

    /* Neutral Color */
    --black: hsl(0, 0%, 20%);
    --black-light: hsl(0, 0%, 30%);

    --white: hsl(0, 0%, 100%);
    --off-white: hsl(0, 1%, 99.5%);

    /* Utility Colors */
    --green: hsl(126, 40%, 48%);
    --red: hsl(0, 100%, 56%);

    /* Other Colors */
    --silver: #C0C0C0;
    --copper: #B87333;

    /* Inverse Palette - Dark Mode */
    --inverse-background:hsl(240, 2%, 9%);
    --inverse-background-mid: hsl(240, 3%, 12%);
    --inverse-background-light:hsl(240, 3%, 25%);

    --inverse-text-heading: hsl(0, 0%, 85%);
    --inverse-text-body: hsl(0, 0%, 80%);
    --inverse-text-secondary: hsl(0, 2%, 78%);
    --inverse-text-dark: hsl(0, 2%, 56%) ;

    --inverse-component: hsl(240, 6%, 13%);
    --inverse-component-mid: hsl(240, 6%, 16%);
    --inverse-component-light:hsl(240, 6%, 20%);
    --inverse-component-rich: hsl(240, 10%, 30%);
    --inverse-component-rich-dark: hsl(240, 12.5%, 20%);


    /* == ICONS == */
    --icon-tiny: 1rem;
    --icon-small: 1.25rem;
    --icon-medium: 1.5rem;
    --icon-large: 2rem;
    --icon-xlarge: 2.5rem;
    --icon-huge: 4rem;


    /* == BORDER RADIUS == */
    --border-radius-xs: 0.25rem 0.25rem 0.25rem 0.25rem/0.25rem 0.25rem 0.25rem 0.25rem;
    --border-radius-sm: 0.5rem 0.5rem 0.5rem 0.5rem/0.5rem 0.5rem 0.5rem 0.5rem;
    --border-radius-md: 0.75rem 0.75rem 0.75rem 0.75rem/0.75rem 0.75rem 0.75rem 0.75rem;
    --border-radius-lg: 1rem 1rem 1rem 1rem/1rem 1rem 1rem 1rem;
    --border-radius-xl: 1.5rem 1.5rem 1.5rem 1.5rem/1.5rem 1.5rem 1.5rem 1.5rem;
    --border-radius-hg: 2rem 2rem 2rem 2rem/2rem 2rem 2rem 2rem;
    --border-radius-full: 100%;
    --border-radius-rounded: 999px;


    /* == Z-INDEX == */
    --layer-1: 10;
    --layer-2: 20;
    --layer-3: 30;
    --layer-4: 40;
    --layer-5: 50;
    --layer-6: 60;
    --layer-7: 70;
    --layer-8: 80;
    --layer-9: 90;
    --layer-10: 100;
    --layer-top: 100;
    --layer-bottom: -10;
    --layer-above-all: 1000000;


    /* == TRANSITIONS == */
    /* Transition Speeds */
    --transition-swiftly: 150ms;
    --transition-quickly: 300ms;
    --transition-mildly: 500ms;
    --transition-slowly: 750ms;
    --transition-lazily: 1000ms;

    /* Timing Functions */
    --ease-linear: cubic-bezier(0, 0, 1, 1);
    --ease-in: cubic-bezier(0.47, 0, 0.75, 0.72);
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-both: cubic-bezier(0.46, 0.03, 0.52, 0.96);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);

    /* Delays */
    --delay-1: 100ms;
    --delay-2: 200ms;
    --delay-3: 300ms;
    --delay-4: 400ms;
    --delay-5: 500ms;
    --delay-6: 600ms;
    --delay-7: 700ms;
    --delay-8: 800ms;
    --delay-9: 900ms;
    --delay-10: 1000ms;


    /* == SHADOWS == */
    --shadow-0: 0px 0px 0px 0px rgba(11, 11, 11, 0.2), 0px 0px 0px 0px rgba(11, 11, 11, 0.14), 0px 0px 0px 0px rgba(11, 11, 11, 0.12);
    --shadow-1: 0px 2px 1px -1px rgba(11, 11, 11, 0.2), 0px 1px 1px 0px rgba(11, 11, 11, 0.14), 0px 1px 3px 0px rgba(11, 11, 11, 0.12);
    --shadow-2: 0px 3px 1px -2px rgba(11, 11, 11, 0.2), 0px 2px 2px 0px rgba(11, 11, 11, 0.14), 0px 1px 5px 0px rgba(11, 11, 11, 0.12);
    --shadow-3: 0px 3px 3px -2px rgba(11, 11, 11, 0.2), 0px 3px 4px 0px rgba(11, 11, 11, 0.14), 0px 1px 8px 0px rgba(11, 11, 11, 0.12);
    --shadow-4: 0px 2px 4px -1px rgba(11, 11, 11, 0.2), 0px 4px 5px 0px rgba(11, 11, 11, 0.14), 0px 1px 10px 0px rgba(11, 11, 11, 0.12);
    --shadow-5: 0px 3px 5px -1px rgba(11, 11, 11, 0.2), 0px 5px 8px 0px rgba(11, 11, 11, 0.14), 0px 1px 14px 0px rgba(11, 11, 11, 0.12);
    --shadow-6: 0px 3px 5px -1px rgba(11, 11, 11, 0.2), 0px 6px 10px 0px rgba(11, 11, 11, 0.14), 0px 1px 18px 0px rgba(11, 11, 11, 0.12);
    --shadow-7: 0px 4px 5px -2px rgba(11, 11, 11, 0.2), 0px 7px 10px 1px rgba(11, 11, 11, 0.14), 0px 2px 16px 1px rgba(11, 11, 11, 0.12);
    --shadow-8: 0px 5px 5px -3px rgba(11, 11, 11, 0.2), 0px 8px 10px 1px rgba(11, 11, 11, 0.14), 0px 3px 14px 2px rgba(11, 11, 11, 0.12);
    --shadow-9: 0px 5px 6px -3px rgba(11, 11, 11, 0.2), 0px 9px 12px 1px rgba(11, 11, 11, 0.14), 0px 3px 16px 2px rgba(11, 11, 11, 0.12);
    --shadow-10: 0px 6px 6px -3px rgba(11, 11, 11, 0.2), 0px 10px 14px 1px rgba(11, 11, 11, 0.14), 0px 4px 18px 3px rgba(11, 11, 11, 0.12);
    --shadow-11: 0px 6px 7px -4px rgba(11, 11, 11, 0.2), 0px 11px 15px 1px rgba(11, 11, 11, 0.14), 0px 4px 20px 3px rgba(11, 11, 11, 0.12);
    --shadow-12: 0px 7px 8px -4px rgba(11, 11, 11, 0.2), 0px 12px 17px 2px rgba(11, 11, 11, 0.14), 0px 5px 11px 4px rgba(11, 11, 11, 0.12);
    --shadow-13: 0px 7px 8px -4px rgba(11, 11, 11, 0.2), 0px 13px 19px 2px rgba(11, 11, 11, 0.14), 0px 5px 24px 4px rgba(11, 11, 11, 0.12);
    --shadow-14: 0px 7px 9px -4px rgba(11, 11, 11, 0.2), 0px 14px 21px 2px rgba(11, 11, 11, 0.14), 0px 5px 26px 4px rgba(11, 11, 11, 0.12);
    --shadow-15: 0px 8px 9px -5px rgba(11, 11, 11, 0.2), 0px 15px 11px 2px rgba(11, 11, 11, 0.14), 0px 6px 28px 5px rgba(11, 11, 11, 0.12);
    --shadow-16: 0px 8px 10px -5px rgba(11, 11, 11, 0.2), 0px 16px 24px 2px rgba(11, 11, 11, 0.14), 0px 6px 30px 5px rgba(11, 11, 11, 0.12);
    --shadow-17: 0px 8px 11px -5px rgba(11, 11, 11, 0.2), 0px 17px 26px 2px rgba(11, 11, 11, 0.14), 0px 6px 32px 5px rgba(11, 11, 11, 0.12);
    --shadow-18: 0px 9px 11px -5px rgba(11, 11, 11, 0.2), 0px 18px 28px 2px rgba(11, 11, 11, 0.14), 0px 7px 34px 6px rgba(11, 11, 11, 0.12);
    --shadow-19: 0px 9px 12px -6px rgba(11, 11, 11, 0.2), 0px 19px 29px 2px rgba(11, 11, 11, 0.14), 0px 7px 36px 6px rgba(11, 11, 11, 0.12);
    --shadow-20: 0px 10px 13px -6px rgba(11, 11, 11, 0.2), 0px 20px 31px 3px rgba(11, 11, 11, 0.14), 0px 8px 38px 7px rgba(11, 11, 11, 0.12);
    --shadow-21: 0px 10px 13px -6px rgba(11, 11, 11, 0.2), 0px 21px 33px 3px rgba(11, 11, 11, 0.14), 0px 8px 40px 7px rgba(11, 11, 11, 0.12);
    --shadow-22: 0px 10px 14px -6px rgba(11, 11, 11, 0.2), 0px 11px 35px 3px rgba(11, 11, 11, 0.14), 0px 8px 42px 7px rgba(11, 11, 11, 0.12);
    --shadow-23: 0px 11px 14px -7px rgba(11, 11, 11, 0.2), 0px 23px 36px 3px rgba(11, 11, 11, 0.14), 0px 9px 44px 8px rgba(11, 11, 11, 0.12);
    --shadow-24: 0px 11px 15px -7px rgba(11, 11, 11, 0.2), 0px 24px 38px 3px rgba(11, 11, 11, 0.14), 0px 9px 46px 8px rgba(11, 11, 11, 0.12);
}


/*
========================================================== 
    FONT-FACE LOAD
==========================================================
*/

/* === PASSION ONE === */
@font-face {
    font-family: 'Passion One';
    src: url('../fonts/passion-one/passionone-black.woff2') format('woff2'),
         url('../fonts/passion-one/passionone-black.woff') format('woff');
    font-display: swap;
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Passion One';
    src: url('../fonts/passion-one/passionone-bold.woff2') format('woff2'),
         url('../fonts/passion-one/passionone-bold.woff') format('woff');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Passion One';
    src: url('../fonts/passion-one/passionone-regular.woff2') format('woff2'),
         url('../fonts/passion-one/passionone-regular.woff') format('woff');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}


/* === POPPINS === */
/* POPPINS BOLD*/
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-bold.woff2') format('woff2'),
         url('../fonts/poppins/poppins-bold.woff') format('woff');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-bold-italic.woff2') format('woff2'),
         url('../fonts/poppins/poppins-bold-italic.woff') format('woff');
    font-display: swap;
    font-weight: 700;
    font-style: italic;
}

/* POPPINS SEMI-BOLD */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-semibold.woff2') format('woff2'),
         url('../fonts/poppins/poppins-semibold.woff') format('woff');
    font-display: swap;
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-semibold-italic.woff2') format('woff2'),
         url('../fonts/poppins/poppins-semibold-italic.woff') format('woff');
    font-display: swap;
    font-weight: 600;
    font-style: italic;
}

/* POPPINS MEDIUM */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-medium.woff2') format('woff2'),
         url('../fonts/poppins/poppins-medium.woff') format('woff');
    font-display: swap;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-medium-italic.woff2') format('woff2'),
         url('../fonts/poppins/poppins-medium-italic.woff') format('woff');
    font-display: swap;
    font-weight: 500;
    font-style: italic;
}

/* POPPINS REGULAR */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-regular.woff2') format('woff2'),
         url('../fonts/poppins/poppins-regular.woff') format('woff');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-italic.woff2') format('woff2'),
         url('../fonts/poppins/poppins-italic.woff') format('woff');
    font-display: swap;
    font-weight: 400;
    font-style: italic;
}

/* POPPINS LIGHT */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-light.woff2') format('woff2'),
         url('../fonts/poppins/poppins-light.woff') format('woff');
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-light-italic.woff2') format('woff2'),
         url('../fonts/poppins/poppins-light-italic.woff') format('woff');
    font-display: swap;
    font-weight: 300;
    font-style: italic;
}


/* === REMIX ICONS === */
@font-face {
    font-family: "remixicon";
    src: url("../icons/remixicon/remixicon.woff") format("woff"),
         url("../icons/remixicon/remixicon.woff2") format("woff2");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}


/*
========================================================== 
    RESET & DEFAULTS
==========================================================
*/
*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
    font-family: "Poppins";
    font-size: 1rem;
    font-weight: var(--font-400);
    line-height: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--grey-6);
    background-color: var(--off-white);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
pre {
    line-height: 1;
    margin-top: 0;
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
}

p,
ul,
ol,
li,
pre {
    font-family: var(--font-body);
}

ul {
    list-style: none;
    padding-left: 0;
}

a {
    text-decoration: none;
}

[class^="ri-"],
[class*=" ri-"] {
    font-size: inherit;
    line-height: var(--leading-none);
}


/*
========================================================== 
    TYPOGRAPHY
==========================================================
*/
.heading-main {
    --heading-main-font: var(--font-body);
    --heading-main-size: var(--font-base);
    --heading-main-weight: var(--font-500);
    --heading-main-leading: var(--leading-none);
    --heading-main-tracking: var(--tracking-normal);
    --heading-main-color: var(--grey-8);

    font-family: var(--heading-main-font);
    font-size: var(--heading-main-size);
    font-weight: var(--heading-main-weight);
    line-height: var(--heading-main-leading);
    letter-spacing: var(--heading-main-tracking);
    color: var(--heading-main-color);
}

.heading-section {
    --heading-section-font: var(--font-body);
    --heading-section-size: var(--font-xl);
    --heading-section-weight: var(--font-700);
    --heading-section-leading: var(--leading-tight);
    --heading-section-tracking: var(--tracking-normal);
    --heading-section-color: var(--grey-9);

    font-family: var(--heading-section-font);
    font-size: var(--heading-section-size);
    font-weight: var(--heading-section-weight);
    line-height: var(--heading-section-leading);
    letter-spacing: var(--heading-section-tracking);
    color: var(--heading-section-color);
}

.heading-tertiary {
    --heading-tertiary-font: var(--font-body);
    --heading-tertiary-size: var(--font-lg);
    --heading-tertiary-weight: var(--font-600);
    --heading-tertiary-leading: var(--leading-tight);
    --heading-tertiary-tracking: var(--tracking-normal);
    --heading-tertiary-color: var(--grey-7);
    
    font-family: var(--heading-tertiary-font);
    font-size: var(--heading-tertiary-size);
    font-weight: var(--heading-tertiary-weight);
    line-height: var(--heading-tertiary-leading);
    letter-spacing: var(--heading-tertiary-tracking);
    color: var(--heading-tertiary-color);
}

.heading-topic {
    --heading-topic-font: var(--font-body);
    --heading-topic-size: var(--font-md);
    --heading-topic-weight: var(--font-600);
    --heading-topic-leading: var(--leading-tight);
    --heading-topic-tracking: var(--tracking-normal);
    --heading-topic-color: var(--grey-6);
    
    font-family: var(--heading-topic-font);
    font-size: var(--heading-topic-size);
    font-weight: var(--heading-topic-weight);
    line-height: var(--heading-topic-leading);
    letter-spacing: var(--heading-topic-tracking);
    color: var(--heading-topic-color);
}

.heading-minor {
    --heading-minor-font: var(--font-body);
    --heading-minor-size: var(--font-base);
    --heading-minor-weight: var(--font-600);
    --heading-minor-leading: var(--leading-none);
    --heading-minor-tracking: var(--tracking-normal);
    --heading-minor-color: var(--grey-5);
    
    font-family: var(--heading-minor-font);
    font-size: var(--heading-minor-size);
    font-weight: var(--heading-minor-weight);
    line-height: var(--heading-minor-leading);
    letter-spacing: var(--heading-minor-tracking);
    color: var(--heading-minor-color);
}

.heading-accent {
    --heading-accent-font: var(--font-body);
    --heading-accent-size: var(--font-base);
    --heading-accent-weight: var(--font-500);
    --heading-accent-leading: var(--leading-none);
    --heading-accent-tracking: var(--tracking-normal);
    --heading-accent-color: var(--grey-4);
    
    font-family: var(--heading-accent-font);
    font-size: var(--heading-accent-size);
    font-weight: var(--heading-accent-weight);
    line-height: var(--heading-accent-leading);
    letter-spacing: var(--heading-accent-tracking);
    color: var(--heading-accent-color);
}

.text-body,
.text-bold,
.text-italic,
.text-list-item {
    --text-body-font: var(--font-body);
    --text-body-size: var(--font-base);
    --text-body-weight: var(--font-400);
    --text-body-leading: var(--leading-relaxed);
    --text-body-tracking: var(--tracking-normal);
    --text-body-color: var(--grey-5);
    
    font-family: var(--text-body-font);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-leading);
    letter-spacing: var(--text-body-tracking);
    color: var(--text-body-color);
}

.text-bold {
    --text-body-weight: var(--font-600);
    --text-body-leading: inherit;
    --text-body-color: inherit;
}

.text-italic {
    --text-body-style: italic;

    font-style: var(--text-body-style);
}

p {
    font-size: 1rem;
}


@media screen and (min-width: 60em) {
    .heading-main {
        --heading-main-font: var(--font-body);
        --heading-main-size: var(--font-base);
        --heading-main-weight: var(--font-500);
        --heading-main-leading: var(--leading-none);
        --heading-main-tracking: var(--tracking-normal);
        --heading-main-color: var(--grey-8);
    }
    
    .heading-section {
        --heading-section-font: var(--font-body);
        --heading-section-size: var(--font-hg);
        --heading-section-weight: var(--font-700);
        --heading-section-leading: var(--leading-tight);
        --heading-section-tracking: var(--tracking-normal);
        --heading-section-color: var(--grey-8);
    }
    
    .heading-tertiary {
        --heading-tertiary-font: var(--font-body);
        --heading-tertiary-size: var(--font-xl);
        --heading-tertiary-weight: var(--font-600);
        --heading-tertiary-leading: var(--leading-tight);
        --heading-tertiary-tracking: var(--tracking-normal);
        --heading-tertiary-color: var(--grey-6);
    }
    
    .heading-topic {
        --heading-topic-font: var(--font-body);
        --heading-topic-size: var(--font-lg);
        --heading-topic-weight: var(--font-600);
        --heading-topic-leading: var(--leading-tight);
        --heading-topic-tracking: var(--tracking-normal);
        --heading-topic-color: var(--grey-6);
    }
    
    .heading-minor {
        --heading-minor-font: var(--font-body);
        --heading-minor-size: var(--font-md);
        --heading-minor-weight: var(--font-600);
        --heading-minor-leading: var(--leading-none);
        --heading-minor-tracking: var(--tracking-normal);
        --heading-minor-color: var(--grey-5);
    }
    
    .heading-accent {
        --heading-accent-font: var(--font-body);
        --heading-accent-size: var(--font-base);
        --heading-accent-weight: var(--font-500);
        --heading-accent-leading: var(--leading-none);
        --heading-accent-tracking: var(--tracking-normal);
        --heading-accent-color: var(--grey-4);
    }
}

@media screen and (min-width: 96em) {
    .heading-main {
        --heading-main-font: var(--font-body);
        --heading-main-size: var(--font-base);
        --heading-main-weight: var(--font-500);
        --heading-main-leading: var(--leading-none);
        --heading-main-tracking: var(--tracking-normal);
        --heading-main-color: var(--grey-8);
    
    }
    
    .heading-section {
        --heading-section-font: var(--font-body);
        --heading-section-size: 3rem;
        --heading-section-weight: var(--font-700);
        --heading-section-leading: var(--leading-tight);
        --heading-section-tracking: var(--tracking-normal);
        --heading-section-color: var(--grey-8);
    }
    
    .heading-tertiary {
        --heading-tertiary-font: var(--font-body);
        --heading-tertiary-size: var(--font-xl);
        --heading-tertiary-weight: var(--font-600);
        --heading-tertiary-leading: var(--leading-tight);
        --heading-tertiary-tracking: var(--tracking-normal);
        --heading-tertiary-color: var(--grey-6);
    }
    
    .heading-topic {
        --heading-topic-font: var(--font-body);
        --heading-topic-size: var(--font-lg);
        --heading-topic-weight: var(--font-600);
        --heading-topic-leading: var(--leading-tight);
        --heading-topic-tracking: var(--tracking-normal);
        --heading-topic-color: var(--grey-6);
    }
    
    .heading-minor {
        --heading-minor-font: var(--font-body);
        --heading-minor-size: var(--font-md);
        --heading-minor-weight: var(--font-600);
        --heading-minor-leading: var(--leading-none);
        --heading-minor-tracking: var(--tracking-normal);
        --heading-minor-color: var(--grey-5);
    }
    
    .heading-accent {
        --heading-accent-font: var(--font-body);
        --heading-accent-size: var(--font-base);
        --heading-accent-weight: var(--font-500);
        --heading-accent-leading: var(--leading-none);
        --heading-accent-tracking: var(--tracking-normal);
        --heading-accent-color: var(--grey-4);
    }

    .text-body,
    .text-bold,
    .text-italic,
    .text-list-item {
        --text-body-size: 1.125rem;
    }
}

@media screen and (min-width: 120em) {
    .heading-main {
        --heading-main-font: var(--font-body);
        --heading-main-size: var(--font-base);
        --heading-main-weight: var(--font-500);
        --heading-main-leading: var(--leading-none);
        --heading-main-tracking: var(--tracking-normal);
        --heading-main-color: var(--grey-8);
    
    }
    
    .heading-section {
        --heading-section-font: var(--font-body);
        --heading-section-size: var(--font-dp-1);
        --heading-section-weight: var(--font-700);
        --heading-section-leading: var(--leading-tight);
        --heading-section-tracking: var(--tracking-normal);
        --heading-section-color: var(--grey-8);
    }
    
    .heading-tertiary {
        --heading-tertiary-font: var(--font-body);
        --heading-tertiary-size: var(--font-xl);
        --heading-tertiary-weight: var(--font-600);
        --heading-tertiary-leading: var(--leading-tight);
        --heading-tertiary-tracking: var(--tracking-normal);
        --heading-tertiary-color: var(--grey-6);
    }
    
    .heading-topic {
        --heading-topic-font: var(--font-body);
        --heading-topic-size: var(--font-lg);
        --heading-topic-weight: var(--font-600);
        --heading-topic-leading: var(--leading-tight);
        --heading-topic-tracking: var(--tracking-normal);
        --heading-topic-color: var(--grey-6);
    }
    
    .heading-minor {
        --heading-minor-font: var(--font-body);
        --heading-minor-size: var(--font-md);
        --heading-minor-weight: var(--font-600);
        --heading-minor-leading: var(--leading-none);
        --heading-minor-tracking: var(--tracking-normal);
        --heading-minor-color: var(--grey-5);
    }
    
    .heading-accent {
        --heading-accent-font: var(--font-body);
        --heading-accent-size: var(--font-base);
        --heading-accent-weight: var(--font-500);
        --heading-accent-leading: var(--leading-none);
        --heading-accent-tracking: var(--tracking-normal);
        --heading-accent-color: var(--grey-4);
    }

    .text-body,
    .text-bold,
    .text-italic,
    .text-list-item {
        --text-body-size: 1.125rem;
    }
}




/*
========================================================== 
    LAYOUT UTILS 
==========================================================
*/

.flex-layout {
    display: flex;
}

.grid-layout {
    display: grid;
}

.full-bleed {
    margin-inline: -1.25rem;
    padding-inline: var(--grid-margin);
}


/*
========================================================== 
    GRID 
==========================================================
*/
.page-grid {
    position: relative;
    display: grid;
    grid-template-columns: [margin-left-edge] var(--grid-margin) [content-start] var(--grid-content-area) [content-end] var(--grid-margin) [margin-right-edge];
    grid-template-rows: [header-start] min-content [header-end content-start] 1fr [content-end map-start] min-content [map-end footer-start] min-content [footer-end regulation-start] min-content [regulation-end];
    max-width: 100%;
}

.page-section {
    grid-column: content-start / content-end;
}

.page-section-wide {
    grid-column: margin-left-edge / margin-right-edge;
}


.navigation-bar {
    grid-column: margin-left-edge / margin-right-edge;
    grid-row: header-start / header-end;
    padding-inline: var(--grid-margin);
}

.main-content {
    grid-column: content-start / content-end;
    grid-row: content-start / content-end;
}

.page-footer {
    grid-column: margin-left-edge / margin-right-edge;
    grid-row: footer-start / footer-end;
    padding-inline: var(--grid-margin);
}

.regulations {
    grid-column: margin-left-edge / margin-right-edge;
    grid-row: regulation-start / regulation-end;
}


@media screen and (min-width: 30em) {
    :root {
        --grid-margin: var(--grid-margin-sm);
    }

    .full-bleed {
        margin-inline: -2rem;
        padding-inline: var(--grid-margin);
    }
}

@media screen and (min-width: 45em) {
    :root {
        --grid-margin: var(--grid-margin-md);
    }

    .full-bleed {
        margin-inline: -2.5rem;
        padding-inline: var(--grid-margin);
    }
}

@media screen and (min-width: 60em) {
    :root {
        --grid-margin: var(--grid-margin-lg);
    }

    .full-bleed {
        margin-inline: -4rem;
        padding-inline: var(--grid-margin);
    }
}

@media screen and (min-width: 80em) {
    :root {
        --grid-margin: var(--grid-margin-xl);
    }

    .full-bleed {
        margin-inline: -6.5rem;
        padding-inline: var(--grid-margin);
    }
}

@media screen and (min-width: 90em) {
    :root {
        --grid-margin: var(--grid-margin-hg);
    }

    .full-bleed {
        margin-inline: -7.25rem;
        padding-inline: var(--grid-margin);
    }
}

@media screen and (min-width: 120em) {
    :root {
        --grid-margin: var(--grid-margin-uw);
    }

    .full-bleed {
        margin-inline: -11rem;
        padding-inline: var(--grid-margin);
    }
}


/*
========================================================== 
    SECTION SPACING
==========================================================
*/
.new-jackpots,
.incentives,
.help-us,
.sites,
.site-location,
.site-map,
.nearby-locations,
.promotions,
.true-wap,
.best-games,
.contacts,
.privacy-policy,
.subpage-hero,
.google-map,
.follow-us {
    padding-block: var(--section-spacer);
}

.last-jackpot {
    margin-block: var(--section-spacer);
}

.page-footer {
    margin-block-start: var(--section-spacer);
}


.new-jackpots .text-block:first-of-type,
.incentives .text-block:first-of-type,
.help-us .text-block:first-of-type,
.sites .text-block:first-of-type,
.site-location .text-block:first-of-type,
.nearby-locations .text-block:first-of-type,
.promotions .text-block:first-of-type,
.true-wap .text-block:first-of-type,
.best-games .text-block:first-of-type,
.contacts .text-block:first-of-type,
.privacy-policy .text-block:first-of-type {
    margin-bottom: var(--page-intro-bottom-spacing);
}


.new-jackpots .heading-section,
.incentives .heading-section,
.last-jackpot .heading-section,
.help-us .heading-section,
.nearby-locations .heading-section {
    margin-block-end: var(--space-20);
}

.sites .heading-section,
.site-location .heading-section,
.nearby-locations .heading-section,
.promotions .heading-section,
.true-wap .heading-section,
.best-games .heading-section,
.contacts .heading-section,
.privacy-policy .heading-section {
    margin-block-end: var(--space-16);
}


@media screen and (min-width: 30em) {
    .new-jackpots,
    .incentives,
    .last-jackpot,
    .help-us,
    .sites,
    .site-location,
    .site-map,
    .nearby-locations,
    .promotions,
    .true-wap,
    .best-games,
    .contacts,
    .privacy-policy,
    .subpage-hero,
    .google-map {
        padding-block: var(--section-spacer-sm);
    }

    .last-jackpot {
        margin-block: var(--section-spacer-sm);
    }

    .follow-us {
        padding-block: var(--section-spacer-small-sm);
    }
    
    .homepage-hero,
    .page-footer {
        margin-block-start: var(--section-spacer-small-sm);
    }

    .new-jackpots .heading-section,
    .incentives .heading-section,
    .last-jackpot .heading-section,
    .help-us .heading-section,
    .sites .heading-section,
    .site-location .heading-section,
    .site-map .heading-section,
    .nearby-locations .heading-section,
    .promotions .heading-section,
    .true-wap .heading-section,
    .best-games .heading-section,
    .contacts .heading-section,
    .privacy-policy .heading-section {
        margin-block-end: var(--space-16);
    }
}

@media screen and (min-width: 45em) {

    .new-jackpots,
    .incentives,
    .last-jackpot,
    .help-us,
    .sites,
    .site-location,
    .site-map,
    .nearby-locations,
    .promotions,
    .true-wap,
    .best-games,
    .contacts,
    .privacy-policy,
    .subpage-hero,
    .google-map {
        padding-block: var(--section-spacer-md);
    }

    .last-jackpot {
        margin-block: var(--section-spacer-md);
    }

    .follow-us {
        padding-block: var(--section-spacer-small-md);
    }
    
    .homepage-hero {
        margin-block-start: var(--section-spacer-small-sm);
    }

    .page-footer {
        margin-block-start: var(--section-spacer-small-md);
    }

    .new-jackpots .text-block:first-of-type,
    .incentives .text-block:first-of-type,
    .help-us .text-block:first-of-type,
    .sites .text-block:first-of-type,
    .site-location .text-block:first-of-type,
    .nearby-locations .text-block:first-of-type,
    .promotions .text-block:first-of-type,
    .true-wap .text-block:first-of-type,
    .best-games .text-block:first-of-type,
    .contacts .text-block:first-of-type,
    .privacy-policy .text-block:first-of-type {
        margin-bottom: var(--page-intro-bottom-spacing-md);
    }


    .new-jackpots .heading-section,
    .incentives .heading-section,
    .last-jackpot .heading-section,
    .help-us .heading-section,
    .sites .heading-section,
    .site-location .heading-section,
    .site-map .heading-section,
    .nearby-locations .heading-section,
    .promotions .heading-section,
    .true-wap .heading-section,
    .best-games .heading-section,
    .contacts .heading-section,
    .privacy-policy .heading-section {
        margin-block-end: var(--space-16);
    }
}

@media screen and (min-width: 60em) {
    .new-jackpots,
    .incentives,
    .help-us,
    .sites,
    .site-location,
    .site-map,
    .nearby-locations,
    .promotions,
    .true-wap,
    .best-games,
    .contacts,
    .privacy-policy,
    .subpage-hero,
    .google-map {
        padding-block: var(--section-spacer-lg);
    }

    .last-jackpot {
        margin-block: var(--section-spacer-lg);
    }

    .new-jackpots .text-block:first-of-type,
    .incentives .text-block:first-of-type,
    .help-us .text-block:first-of-type,
    .sites .text-block:first-of-type,
    .site-location .text-block:first-of-type,
    .nearby-locations .text-block:first-of-type,
    .promotions .text-block:first-of-type,
    .true-wap .text-block:first-of-type,
    .best-games .text-block:first-of-type,
    .contacts .text-block:first-of-type,
    .privacy-policy .text-block:first-of-type {
        margin-bottom: var(--page-intro-bottom-spacing-lg);
    }

    .follow-us {
        padding-block: var(--section-spacer-small);
    }


    .new-jackpots .heading-section,
    .incentives .heading-section,
    .last-jackpot .heading-section,
    .help-us .heading-section {
        margin-block-end: var(--space-20);
    }

    .sites .heading-section,
    .site-location .heading-section,
    .nearby-locations .heading-section,
    .promotions .heading-section,
    .true-wap .heading-section,
    .best-games .heading-section,
    .contacts .heading-section,
    .privacy-policy .heading-section {
        margin-block-end: var(--space-16);
    }

}

@media screen and (min-width: 80em) {
    .new-jackpots,
    .incentives,
    .help-us,
    .sites,
    .site-location,
    .site-map,
    .nearby-locations,
    .promotions,
    .true-wap,
    .best-games,
    .contacts,
    .privacy-policy,
    .subpage-hero,
    .google-map,
    .follow-us {
        padding-block: var(--section-spacer-xl);
    }

    .last-jackpot {
        margin-block: var(--section-spacer-xl);
    }

    .new-jackpots .text-block:first-of-type,
    .incentives .text-block:first-of-type,
    .help-us .text-block:first-of-type,
    .sites .text-block:first-of-type,
    .site-location .text-block:first-of-type,
    .nearby-locations .text-block:first-of-type,
    .promotions .text-block:first-of-type,
    .true-wap .text-block:first-of-type,
    .best-games .text-block:first-of-type,
    .contacts .text-block:first-of-type,
    .privacy-policy .text-block:first-of-type {
        margin-bottom: var(--page-intro-bottom-spacing-xl);
    }

    

    .sites .heading-section + .text-body,
    .site-location .heading-section + .text-body,
    .nearby-locations .heading-section + .text-body,
    .promotions .heading-section + .text-body,
    .true-wap .heading-section + .text-body,
    .best-games .heading-section + .text-body,
    .contacts .heading-section + .text-body,
    .privacy-policy .heading-section + .text-body {
        font-size: 1.125rem;
        font-weight: var(--font-300);
    }

    .google-map.site-map {
        padding-block: var(--section-spacer-small-md);
    }

}

@media screen and (min-width: 90em) {
    .new-jackpots,
    .incentives,
    .help-us,
    .sites,
    .site-location,
    .site-map,
    .nearby-locations,
    .promotions,
    .true-wap,
    .best-games,
    .contacts,
    .privacy-policy,
    .subpage-hero,
    .google-map,
    .follow-us {
        padding-block: var(--section-spacer-xl);
    }

    .homepage-hero {
        margin-block-start: var(--section-spacer-small-md);
    }

    .last-jackpot {
        margin-block: var(--section-spacer-xl);
    }
}


@media screen and (min-width: 96em) {
    .new-jackpots,
    .incentives,
    .help-us,
    .sites,
    .site-location,
    .site-map,
    .nearby-locations,
    .promotions,
    .true-wap,
    .best-games,
    .contacts,
    .privacy-policy,
    .subpage-hero,
    .google-map,
    .follow-us {
        padding-block: var(--section-spacer-hg);
    }

    .last-jackpot {
        margin-block: var(--section-spacer-hg);
    }

    .homepage-hero {
        margin-block-start: var(--section-spacer-small-md);
    }

    .new-jackpots .text-block:first-of-type,
    .incentives .text-block:first-of-type,
    .help-us .text-block:first-of-type,
    .sites .text-block:first-of-type,
    .site-location .text-block:first-of-type,
    .nearby-locations .text-block:first-of-type,
    .promotions .text-block:first-of-type,
    .true-wap .text-block:first-of-type,
    .best-games .text-block:first-of-type,
    .contacts .text-block:first-of-type,
    .privacy-policy .text-block:first-of-type {
        margin-bottom: var(--space-48);
    }


    .new-jackpots .heading-section,
    .last-jackpot .heading-section,
    .help-us .heading-section,
    .sites .heading-section,
    .site-location .heading-section,
    .site-map .heading-section,
    .nearby-locations .heading-section,
    .promotions .heading-section,
    .true-wap .heading-section,
    .best-games .heading-section,
    .contacts .heading-section,
    .privacy-policy .heading-section {
        margin-block-end: var(--space-20);
    }
}

@media screen and (min-width: 120em) {
    .new-jackpots,
    .incentives,
    .help-us,
    .sites,
    .site-location,
    .site-map,
    .nearby-locations,
    .promotions,
    .true-wap,
    .best-games,
    .contacts,
    .privacy-policy,
    .subpage-hero,
    .google-map,
    .follow-us {
        padding-block: var(--section-spacer-hg);
    }

    .last-jackpot {
        margin-block: var(--section-spacer-hg);
    }

    .new-jackpots .text-block:first-of-type,
    .incentives .text-block:first-of-type,
    .help-us .text-block:first-of-type,
    .sites .text-block:first-of-type,
    .site-location .text-block:first-of-type,
    .nearby-locations .text-block:first-of-type,
    .promotions .text-block:first-of-type,
    .true-wap .text-block:first-of-type,
    .best-games .text-block:first-of-type,
    .contacts .text-block:first-of-type,
    .privacy-policy .text-block:first-of-type {
        margin-bottom: var(--space-56);
    }


    .new-jackpots .heading-section,
    .last-jackpot .heading-section,
    .help-us .heading-section,
    .sites .heading-section,
    .site-location .heading-section,
    .site-map .heading-section,
    .nearby-locations .heading-section,
    .promotions .heading-section,
    .true-wap .heading-section,
    .best-games .heading-section,
    .contacts .heading-section,
    .privacy-policy .heading-section {
        margin-block-end: var(--space-20);
    }

    .new-jackpots .heading-section + .text-body,
    .follow-us .heading-section + .text-body,
    .sites .heading-section + .text-body,
    .promotions .heading-section + .text-body,
    .best-games .heading-section + .text-body,
    .privacy-policy .heading-section + .text-body {
        font-size: var(--font-md);
        font-weight: var(--font-300);
    }
}

/*
========================================================== 
    NAVIGATION
==========================================================
*/
.navigation-bar {
    --navigation-bar-background: var(--white);
    --navigation-bar-shadow: var(--shadow-1);

    position: relative;
    width: 100%;
    background-color: var(--navigation-bar-background);
    box-shadow: var(--navigation-bar-shadow);
    overflow: visible;
    z-index: var(--layer-5);
}

.navigation-bar.elevated {
    --navigation-bar-shadow: var(--shadow-4);
}

.navigation {
    --navigation-font: var(--font-body);
    --navigation-color: var(--grey-5);
    --navigation-block-padding: var(--space-8);

    --navigation-grid-columns: repeat(2, max-content);
    --navigation-grid-rows: max-content auto;
    --navigation-grid-content-alignment: center;
    --navigation-grid-content-justification: space-between;

    position: relative;
    display: grid;
    grid-template-columns: var(--navigation-grid-columns);
    grid-template-rows: var(--navigation-grid-rows);
    align-content: var(--navigation-grid-content-alignment);
    justify-content: var(--navigation-grid-content-justification);
    font-family: var(----navigation-font);
    padding-block: var(--navigation-block-padding);
    color: var(--navigation-color);
}


.navigation-brand {
    --navigation-brand-column: 1/2;
    --navigation-brand-row: 1/2;
    --navigation-brand-height: fit-content;
    --navigation-brand-width: fit-content;
    --navigation-brand-color: var(--grey-6);
    --navigation-brand-z-index: var(--layer-2);

    grid-column: var(--navigation-brand-column);
    grid-row: var(--navigation-brand-row);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: var(--navigation-brand-height);
    width: var(--navigation-brand-width);
    color: var(--navigation-brand-color);
    z-index: var(--navigation-brand-z-index);
}

.navigation-brand-link {
    display: block;
    text-decoration: none;
    width: fit-content;
    height: fit-content;
}

.navigation-brand-title {
    --navigation-brand-title-size: var(--font-md);
    --navigation-brand-title-weight: var(--font-700);
    --navigation-brand-title-leading: var(--leading-none);
    --navigation-brand-title-tracking: var(--tracking-normal);
    --navigation-brand-title-color: inherit;

    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: inherit;
}

.navigation-brand-image {
    --navigation-brand-image-width: var(--space-56);
    --navigation-brand-image-height: auto;

    width: var(--navigation-brand-image-width);
    height: var(--navigation-brand-image-width);
    border-radius: var(--border-radius-full);
}


.navigation-menu {
    --navigation-menu-column: 1/3;
    --navigation-menu-row: 1/2;

    grid-column: var(--navigation-menu-column);
    grid-row: var(--navigation-menu-row);
}

.navigation-menu-canvas {
    --navigation-menu-canvas-gap: var(--space-8);

    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    gap: var(--navigation-menu-canvas-gap);
    padding-left: 0;
}


.navigation-link {
    --navigation-link-size: var(--font-base);
    --navigation-link-weight: var(--font-400);
    --navigation-link-tracking: var(--tracking-wider);
    --navigation-link-leading: 1;

    --navigation-link-color: var(--grey-4);
    --navigation-link-hover-color: var(--gold);
    --navigation-link-background: none;
    --navigation-link-block-padding: var(--space-12);

    font-size: var(--navigation-link-size);
    font-weight: var(--navigation-link-weight);
    letter-spacing: var(--navigation-link-tracking);
    line-height: var(--navigation-link-leading);
    padding-block: var(--navigation-link-block-padding);
    color: var(--navigation-link-color);
    background-color: var(--navigation-link-background);
    border: none;
    text-decoration: none;
    cursor: pointer;
    outline: 1px solid transparent;
}

.is-current {
    --navigation-link-active-color: var(--gold);

    color: var(--navigation-link-active-color);
    background-color: hsl(252, 89%, 12.5%);
    border-radius: 8px;
    overflow: hidden;
}


.slide-in-canvas {
    --slide-in-canvas-position: fixed;
    --slide-in-canvas-top-offset: 0;
    --slide-in-canvas-left-offset: 0;
    --slide-in-canvas-height: 100%;
    --slide-in-canvas-width: 0;
    --slide-in-canvas-padding-top: var(--space-40);
    --slide-in-canvas-background: var(--blue-dark);
    --slide-in-canvas-z-index: var(--layer-2);

    position: var(--slide-in-canvas-position);
    top: var(--slide-in-canvas-top-offset);
    left: var(--slide-in-canvas-left-offset);
    height: var(--slide-in-canvas-height);
    width: var(--slide-in-canvas-width);
    padding-top: var(--slide-in-canvas-padding-top);
    background-color: var(--slide-in-canvas-background);
    z-index: var(--slide-in-canvas-z-index);
    overflow: hidden;
    transition-property: width, margin;
    transition-duration: 0.5s;
}

.slide-in-canvas::after {
    --slide-in-canvas-animation-bar-top-offset: 0;
    --slide-in-canvas-animation-bar-left-offset: 80%;
    --slide-in-canvas-animation-bar-height: 100%;
    --slide-in-canvas-animation-bar-width: 200%;
    --slide-in-canvas-animation-bar-background: var(--gold);
    --slide-in-canvas-animation-bar-z-index: -1;

    position: absolute;
    content: "";
    top: var(--slide-in-canvas-animation-bar-top-offset);
    left: var(--slide-in-canvas-animation-bar-left-offset);
    height: var(--slide-in-canvas-animation-bar-height);
    width: var(--slide-in-canvas-animation-bar-width);
    background-color: var(--slide-in-canvas-animation-bar-background);
    z-index: var(--slide-in-canvas-animation-bar-z-index);
}

.slide-in-canvas .navigation-link {
    display: inline-block;
    width: fit-content;
    margin-left: -156px;
    opacity: 0;
    transition: 0.5s;
}

.slide-in-canvas.is-visible {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100%;
    z-index: var(--layer-5);
    overflow: hidden;
}

.slide-in-canvas.is-visible .navigation-link {
    --navigation-link-size: calc(var(--font-base) + 2px);
    --navigation-link-weight: var(--font-500);
    
    display: inline-block;
    margin-left: var(--space-20);
    opacity: 1;
    padding-inline: var(--space-16) var(--space-24);
}


.navigation-toggle {
    grid-column: 2/3;
    grid-row: 1/2;
    position: relative;
    display: flex;
    justify-content: end;
    align-items: center;
}

.navigation-toggle-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--space-40);
    height: var(--space-40);
    padding: 0;
    border: none;
    outline: none;
    background-color: var(--white);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    z-index: var(--layer-1);
}

.toggle-lines-group {
    position: relative;
    display: block;
    width: var(--space-20);
    height: var(--space-16);
}

.toggle-line {
    position: absolute;
    display: block;
    height: 2px;
    width: var(--space-20);
    background-color: var(--gold);
    border-radius: var(--border-radius-xs);
    opacity: 1;
    transform: rotate(0deg);
}

.toggle-line:nth-child(1) {
    top: 0px;
}

.toggle-line:nth-child(2),
.toggle-line:nth-child(3) {
    top: 6px;
}

.toggle-line:nth-child(4) {
    top: 12px;
}


.navigation-toggle-button.is-toggled {
    position: fixed;
    color: var(--gold);
    background-color: var(--blue);
    border-radius: var(--border-radius-rounded);
    z-index: var(--layer-5);
    transform: translate(var(--space-4), var(--space-20));
    transition: all 500ms ease-out 350ms;
}

.navigation-toggle-button.is-toggled .toggle-line {
    transition: 500ms ease-out 350ms;

}

.navigation-toggle-button.is-toggled .toggle-line:nth-child(1),
.navigation-toggle-button.is-toggled .toggle-line:nth-child(4) {
    top: 6px;
    width: 0;
    opacity: 0;
    transform: translateY(50%);
    z-index: var(--layer-bottom);
}

.navigation-toggle-button.is-toggled .toggle-line:nth-child(2),
.navigation-toggle-button.is-toggled .toggle-line:nth-child(3) {
    background-color: var(--off-white);
    height: 3px;
}
.navigation-toggle-button.is-toggled .toggle-line:nth-child(2) {
    transform: rotate(45deg);
}

.navigation-toggle-button.is-toggled .toggle-line:nth-child(3) {
    transform: rotate(-45deg);
}


@media screen and (min-width: 30em) {
    
    .navigation-toggle-button.is-toggled {
        transform: translate(var(--space-4), var(--space-24));
    }
}

@media screen and (min-width: 37.5em) {

    .navigation-toggle-button.is-toggled {
        width: var(--space-48);
        height: var(--space-48);
        transform: translate(-12px, var(--space-24));
    }
}

@media screen and (min-width: 45em) {
    .navigation-menu-canvas {
        --navigation-menu-canvas-gap: var(--space-16);
    }

    .slide-in-canvas.is-visible {
        --slide-in-canvas-padding-top: var(--space-80);
    }

    .slide-in-canvas.is-visible .navigation-link {
        margin-left: var(--space-48);
        padding-inline: var(--space-16) var(--space-24);
    }

    .navigation-toggle-button.is-toggled {
        transform: translate(var(--space-4), var(--space-48));
    }
}

@media screen and (min-width: 60em) {

    .navigation {
        --navigation-block-padding: var(--space-12);

        position: relative;
        display: grid;
        grid-template-columns: repeat(2, max-content);
        grid-template-rows: 1fr;
        justify-content: space-between;
        align-items: center;
        height: fit-content;
    }

    .navigation-brand {
        grid-column: 1/2;
        grid-row: 1/1;
    }

    .navigation-brand-image {
        --navigation-brand-image-width: var(--space-56);
    }

    .navigation-menu {
        grid-column: 2/3;
        grid-row: 1/1;
        background-color: var(--white);
        z-index: var(--layer-2);
    }

    .navigation-menu-canvas {
        --navigation-menu-canvas-gap: var(--space-20);
        
        flex-flow: row nowrap;
    }

    .navigation-link {
        --navigation-link-size: var(--font-sm);
        --navigation-link-weight: var(--font-400);
        --navigation-link-tracking: var(--tracking-wider);
    }

    .is-current {
        background-color: unset;
        border-radius: 0;
    }

    .slide-in-canvas {
        --slide-in-canvas-position: relative;
        --slide-in-canvas-width: fit-content;
        --slide-in-canvas-padding-top: 0;
        --slide-in-canvas-background: var(--white);
    }

    .slide-in-canvas .navigation-link {
        padding-block: var(--space-8);
        margin-left: 0;
        opacity: 1;
    }

    .slide-in-canvas::after {
        height: 0%;
        width: 0%;
    }

    .navigation-link:hover {
        color: var(--navigation-link-hover-color);
    }

    .navigation-toggle {
        grid-column: 2/3;
        grid-row: 1/1;
        justify-content: start;
    }

    .navigation-toggle-button {
        opacity: 0;
    }
}

@media screen and (min-width: 80em) {

    .navigation {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, max-content);
        grid-template-rows: 1fr;
        justify-content: space-between;
        align-items: center;
        height: fit-content;
    }

    .navigation-brand {
        grid-column: 1/2;
        grid-row: 1/1;
    }

    .navigation-menu {
        grid-column: 2/3;
        grid-row: 1/1;
        background-color: var(--white);
        z-index: var(--layer-2);
    }

    .navigation-menu-canvas {
        --navigation-menu-canvas-gap: var(--space-20);

        flex-flow: row nowrap;
    }

    .navigation-link {
        --navigation-link-size: var(--font-sm);
        --navigation-link-weight: var(--font-400);
        --navigation-link-tracking: var(--tracking-wider);
        --navigation-link-color: var(--grey-6);
    }

    .is-current {
        color: var(--gold);
        background-color: unset;
        border-radius: 0;
    }

    .slide-in-canvas {
        --slide-in-canvas-position: relative;
        --slide-in-canvas-width: fit-content;
        --slide-in-canvas-padding-top: 0;
        --slide-in-canvas-background: var(--white);
    }

    .slide-in-canvas .navigation-link {
        padding-block: var(--space-8);
        margin-left: 0;
        opacity: 1;
    }

    .slide-in-canvas::after {
        height: 0%;
        width: 0%;
    }

    .navigation-link:hover {
        color: var(--navigation-link-hover-color);
    }

    .navigation-toggle {
        grid-column: 2/3;
        grid-row: 1/1;
        justify-content: start;
    }

    .navigation-toggle-button {
        opacity: 0;
    }
}

@media screen and (min-width: 90em) {
    .navigation {
        --navigation-block-padding: var(--space-16);
    }

    .navigation-brand-image {
        --navigation-brand-image-width: var(--space-64);
    }

    .navigation-menu-canvas {
        --navigation-menu-canvas-gap: var(--space-32);
    }

    .navigation-link {
        --navigation-link-size: var(--font-base);
    }
}

/*
========================================================== 
    HOMEPAGE HERO SECTION
==========================================================
*/
.homepage-hero {
    text-align: center;
    width: auto;
    padding-block: 3.5rem;
    margin-block-end: var(--space-8);
    background-color: var(--blue-dark);
    background: radial-gradient(circle, rgba(29,8,125,1) 0%, rgba(18,4,72,1) 90%);
}


.homepage-hero .jackpot-name {
    font-size: var(--font-lg);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: var(--tracking-wider);
    color: var(--grey-2);
    margin-block-end: var(--space-24);
}

.homepage-hero .accent-text {
    font-size: var(--font-xl);
    font-weight: 700;
    letter-spacing: 0.125rem;
}

.platinum-value {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-widest);
    color: var(--gold);
}

.platinum-value span {
    white-space: nowrap;
}


@media screen and (min-width: 30em) {
    .homepage-hero.full-bleed {
        margin-inline: auto;
        padding-inline: 0;
    }

    .homepage-hero {
        width: 100%;
        border-radius: var(--border-radius-hg);
    }

    .homepage-hero .jackpot-name {
        font-size: var(--font-lg);
    }

    .homepage-hero .accent-text {
        font-size: var(--font-xl);
    }
    
    .platinum-value {
        font-size: 3rem;
    }
}

@media screen and (min-width: 37.5em) {
    .homepage-hero {
        padding-block: var(--space-64);
    }

    .platinum-value {
        font-size: 3.875rem;
    }
}

@media screen and (min-width: 45em) {
    
    .homepage-hero  .jackpot-name {
        font-size: var(--font-xl);
        margin-block-end: var(--space-28);
    }

    .homepage-hero .accent-text {
        font-size: var(--font-hg);
    }

    .platinum-value {
        font-size: 4.75rem;
    }   
    
}

@media screen and (min-width: 50em) {
    .homepage-hero {
        padding-block: var(--space-72);
        border-radius: var(--space-40);
    }

    .platinum-value {
        font-size: 5.5rem;
    }

}

@media screen and (min-width: 60em) {

    .homepage-hero {
        padding-block: var(--space-80);
        margin-block-end: var(--space-48);
        border-radius: var(--space-48);
    }
    
    .homepage-hero  .jackpot-name {
        font-size: var(--font-hg);
        font-weight: var(--font-500);
        letter-spacing: 0.0625rem;
        margin-block-end: var(--space-36);
    }

    .homepage-hero .accent-text {
        font-size: 3.25rem;
        letter-spacing: 0.125em;
    }
    
    .platinum-value {
        font-size: 6.25rem;
    }
}

@media screen and (min-width: 73.75em) {
    .homepage-hero {
        padding-block: var(--space-96);
    }

    .homepage-hero  .jackpot-name {
        margin-block-end: var(--space-48);
    }

    .homepage-hero .accent-text {
        font-size: 3.5rem;
    }
    
    .platinum-value {
        font-size: 8rem;
    }

}

@media screen and (min-width: 80em) {
    .homepage-hero.full-bleed {
        margin-inline: 0;
        padding-inline: 0;
    }

    .homepage-hero {
        border-radius: var(--space-64);
    }

    .homepage-hero  .jackpot-name {
        margin-block-end: var(--space-56);
    }
    
    .homepage-hero .accent-text {
        letter-spacing: 0.125em;
    }
    
    .platinum-value {
        font-size: 8.5rem;
    }
}

@media screen and (min-width: 90em) {
    .homepage-hero {
        padding-block: 7rem;
        border-radius: 4rem;
    }

    .homepage-hero .jackpot-name {
        font-size: 2.75rem;
        line-height: 1.2;
        letter-spacing: var(--tracking-wide);
        margin-block-end: var(--space-64);
    }

    .platinum-value {
        font-size: 9rem;
    }
}

@media screen and (min-width: 96em) {
    .homepage-hero {
        padding-block: 7rem;
        border-radius: 4rem;
    }

    .homepage-hero .jackpot-name {
        font-size: 3.25rem;
        margin-block-end: var(--space-72);
    }

    .homepage-hero .accent-text {
        font-size: 4.5rem;
        letter-spacing: var(--tracking-widest);
    }
    
    .platinum-value {
        font-size: 10rem;
    }
}

@media screen and (min-width: 120em) {
    .homepage-hero {
        padding-block: 8rem;
        border-radius: 5.5rem;
    }

    .homepage-hero .jackpot-name {
        font-size: 3.5rem;
        line-height: 1.2;
        letter-spacing: var(--tracking-wide);
        margin-block-end: var(--space-80);
    }

    .homepage-hero .accent-text {
        font-size: 5rem;
    }
    
    .platinum-value {
        font-size: 12rem;
    }
}


/*
========================================================== 
    SUB-PAGE HERO SECTION
==========================================================
*/
.subpage-hero .text-block {
    width: 100%;
    padding-block: 2rem;
    padding-inline: 0;
    margin-inline: auto;
    border-radius: 1.5rem;
    background: radial-gradient(circle, rgba(29,8,125,1) 0%, rgba(18,4,72,1) 90%);
    text-align: center;
}

.subpage-hero .platinum-value {
    font-size: 2.25rem;
    font-weight: var(--font-700);
    line-height: 1;
    color: var(--gold);
    letter-spacing: var(--tracking-widest);
}

.subpage-hero .platinum-value span {
    white-space: nowrap;
}

.subpage-hero .jackpot-name {
    font-size: var(--font-md);
    font-weight: var(--font-500);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-widest);
    margin-bottom: var(--space-16);
    color: var(--grey-3);
}

.subpage-hero .accent-text {
    font-size: 1.75rem;
    font-weight: var(--font-600);
    letter-spacing: var(--tracking-widest);
}


@media screen and (min-width: 30em) {

    .subpage-hero .jackpot-name {
        font-size: var(--font-md);
    }

    .subpage-hero .accent-text {
        font-size: 2.5rem;
    }

    .subpage-hero .platinum-value {
        font-size: 3.25rem;
    }
}

@media screen and (min-width: 37.5em) {

    .subpage-hero .jackpot-name {
        font-size: var(--font-lg);
        margin-bottom: var(--space-20);
    }

    .subpage-hero .accent-text {
        font-size: 2rem;
    }

    .subpage-hero .platinum-value {
        font-size: 4rem;
    }

}

@media screen and (min-width: 45em) {
    

    .subpage-hero .text-block {
        width: 95%;
        padding-block: 2.5rem;
    }

    .subpage-hero .jackpot-name {
        font-size: var(--font-lg);
        font-weight: var(--font-500);
        margin-bottom: var(--space-20);
    }

    .subpage-hero .accent-text {
        font-size: 2.25rem;
    }

    .subpage-hero .platinum-value {
        font-size: 4.5rem;
    }
}

@media screen and (min-width: 50em) {
    .subpage-hero .text-block {
        width: 90%;
    }

    .subpage-hero .jackpot-name {
        margin-bottom: var(--space-24);
    }

    .subpage-hero .platinum-value {
        font-size: 4.75rem;
    }
}

@media screen and (min-width: 60em) {
    .subpage-hero .text-block {
        width: fit-content;
        padding-block: 2.5rem;
        padding-inline: 5rem;
        margin-inline: auto;
        border-radius: 2rem;
        background-color: var(--blue-dark);
        text-align: center;
    }

    .subpage-hero .platinum-value {
        font-size: 5.5rem;
        line-height: 1;
        letter-spacing: var(--tracking-wider);
        color: var(--gold);
    }

    .subpage-hero .text-block {
        margin-bottom: 0;
    }

    .subpage-hero .jackpot-name {
        font-size: 1.75rem;
        color: var(--off-white);
        letter-spacing: var(--tracking-wider);
    }

    .subpage-hero .accent-text {
        font-size: 2.5rem;
        letter-spacing: var(--tracking-widest);
    }
}

@media screen and (min-width: 73.75em) {

    .subpage-hero .text-block {
        padding-inline: 7rem;
        padding-block: 3rem;
        border-radius: 2.5rem;
    } 

    .subpage-hero .jackpot-name {
        margin-bottom: var(--space-24);
    }       

    .subpage-hero .platinum-value {
        font-size: 6rem;
    }
}

@media screen and (min-width: 80em) {
    .subpage-hero .text-block {
        width: fit-content;
        padding-block: 3rem;
        padding-inline: 8rem;
        margin-inline: auto;
        border-radius: 3rem;
        background-color: var(--blue-dark);
        text-align: center;
    }

    .subpage-hero .platinum-value {
        font-size: 7rem;
        line-height: 1;
        letter-spacing: var(--tracking-wider);
        color: var(--gold);
    }

    .subpage-hero .text-block {
        margin-bottom: 0;
    }

    .subpage-hero .jackpot-name {
        font-size: 2rem;
        font-weight: var(--font-400);
        color: var(--off-white);
        letter-spacing: var(--tracking-wider);
    }

    .subpage-hero .accent-text {
        font-size: 3rem;
        font-weight: var(--font-600);
        letter-spacing: var(--tracking-widest);
    }
}

@media screen and (min-width: 96em) {
    .subpage-hero .text-block {
        width: fit-content;
        padding-block: 4rem;
        padding-inline: 8.5rem;
        margin-inline: auto;
        border-radius: 3.5rem;
        background-color: var(--blue-dark);
        text-align: center;
    }

    .subpage-hero .platinum-value {
        font-size: 8rem;
        line-height: 1;
        letter-spacing: var(--tracking-wider);
        color: var(--gold);
    }

    .subpage-hero .text-block {
        margin-bottom: 0;
    }

    .subpage-hero .jackpot-name {
        font-size: 2.25rem;
        color: var(--off-white);
        letter-spacing: var(--tracking-wider);
    }

    .subpage-hero .accent-text {
        font-size: 3.5rem;
        letter-spacing: var(--tracking-widest);
    }
}

@media screen and (min-width: 120em) {
    .subpage-hero .text-block {
        width: fit-content;
        padding-block: 4rem;
        padding-inline: 8.5rem;
        margin-inline: auto;
        background-color: var(--blue-dark);
        text-align: center;
    }

    .subpage-hero .platinum-value {
        font-size: 9rem;
        line-height: 1;
        letter-spacing: var(--tracking-wider);
        color: var(--gold);
    }

    .subpage-hero .text-block {
        margin-bottom: 0;
    }

    .subpage-hero .jackpot-name {
        font-size: 2.5rem;
        color: var(--off-white);
        letter-spacing: var(--tracking-wider);
        margin-bottom: var(--space-24);
    }
}



/*
========================================================== 
    NEW JACKPOTS SECTION
==========================================================
*/
.new-jackpots .text-block {
    text-align: center;
}

.new-jackpots .heading-section {
    text-transform: none;
    max-width: 100%;
}

.new-jackpots .text-body {
    max-width: 28ch;
    margin-inline: auto;
}

.new-jackpots .text-body br {
    display: none;
}

.new-jackpots .flex-layout {
    flex-flow: column;
    align-items: center;
    gap: var(--space-48);
}


.jackpot-card {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-1);
    background-color: var(--white);
    border: 1px solid var(--grey-1);
}

.jackpot-card-image {
    max-height: 100%;
    width: 3rem;
}

.jackpot-card-image img {
    max-height: 100%;
    max-width: 100%;
}

.jackpot-card .heading-minor {
    font-size: 1rem;
    letter-spacing: var(--tracking-widest);
    color: inherit;
}


.gold-pot {
    order: 1;
    padding-inline: 4rem;
    padding-block: 4.5rem;
    color: var(--gold);
}

.gold-pot .jackpot-card-image {
    font-size: 3rem;
    margin-bottom: calc(var(--space-16) + 2px);
    color: var(--gold);
}

.gold-pot .heading-topic {
    --heading-topic-size: var(--font-lg);
    --heading-topic-weight: var(--font-700);

    margin-bottom: var(--space-12);
    color: var(--grey-7);
}

.gold-pot .heading-minor {
    font-weight: var(--font-700);
}


.silver-pot {
    order: 2;
    color: var(--silver);
}

.silver-pot,
.copper-pot {
    padding-inline: 4.5rem;
    padding-block: 4.5rem;
}

.copper-pot {
    order: 3;
    color: var(--copper);
    padding-inline: 5rem;
}

.silver-pot .jackpot-card-image,
.copper-pot .jackpot-card-image {
    width: 2rem;
    margin-bottom: 1.75rem;
    translate: 0 8px;
    color: inherit;
}

.jackpot-card.silver-pot .heading-topic,
.jackpot-card.copper-pot .heading-topic {
    font-size: var(--font-lg);
    margin-bottom: 0.5rem;
    color: var(--grey-7);
}

.jackpot-card.silver-pot .heading-minor,
.jackpot-card.copper-pot .heading-minor {
    font-size: var(--font-sm);
    font-weight: var(--font-500);
}


@media screen and (min-width: 30em) {
    .new-jackpots .heading-section {
        max-width: 15ch;
        margin-inline: auto;
    }

    .new-jackpots .text-block br {
        display: none;
    }

    .new-jackpots .text-body {
        max-width: 45ch;
    }

    .gold-pot {
        padding-inline: 3.75rem;
    }

    .silver-pot,
    .copper-pot {
        padding-inline: 4.75rem;
    }

    .copper-pot {
        padding-inline: 5.25rem;
    }

    .jackpot-card.silver-pot .heading-topic,
    .jackpot-card.copper-pot .heading-topic {
        font-size: var(--font-md);
    }
}

@media screen and (min-width: 37.5em) {
    .new-jackpots .flex-layout {
        flex-flow: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .new-jackpots .text-block {
        text-align: center;
    }
    
    .new-jackpots .heading-section {
        max-width: 25ch;
        margin-inline: auto;
    }
    
    .new-jackpots .text-body {
        max-width: 45ch;
        margin-inline: auto;
    }

    .gold-pot {
        order: unset;
        padding-inline: 1.5rem;
        padding-block: 2.5rem;
        box-shadow: var(--shadow-3);
    }

    .silver-pot,
    .copper-pot {
        order: unset;
        padding-inline: 1.5rem;
        padding-block: 1.75rem;
    }

    .copper-pot {
        padding-inline: 1.75rem;
    }

    .jackpot-card.silver-pot .heading-topic,
    .jackpot-card.copper-pot .heading-topic {
        margin-bottom: 0.25rem;
        color: var(--grey-5);
    }

    .jackpot-card.silver-pot .heading-minor,
    .jackpot-card.copper-pot .heading-minor {
        font-size: var(--font-xs);
    }
}

@media screen and (min-width: 45em) {
    .new-jackpots .flex-layout {
        flex-flow: row;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
    
    .new-jackpots .text-block {
        margin-bottom: 3.5rem;
    }
    
    .new-jackpots .text-body {
        max-width: 53ch;
        margin-inline: auto;
    }
    
    .gold-pot {
        order: unset;
        padding-inline: 1.75rem;
        padding-block: 3rem;
    }
    
    .gold-pot .heading-topic {
        --heading-topic-size: 1.75rem;
    }
    
    
    .silver-pot,
    .copper-pot {
        padding-inline: 1.75rem;
        padding-block: 2rem;
    }
    
    .silver-pot {
        order: unset;
    }
    
    .copper-pot {
        order: unset;
        padding-inline: 2rem;
    }
    
    
    .jackpot-card.silver-pot .heading-topic,
    .jackpot-card.copper-pot .heading-topic {
        font-size: var(--font-md);
        color: var(--grey-6);
    }
    
    .jackpot-card.silver-pot .heading-minor,
    .jackpot-card.copper-pot .heading-minor {
        font-size: var(--font-xs);
        font-weight: var(--font-600);
    }
}

@media screen and (min-width: 50em) {
    
}

@media screen and (min-width: 60em) {
    .new-jackpots .text-block {
        margin-bottom: 3rem;
    }
    
    .new-jackpots .heading-section {
        max-width: 35h;
    }
    
    .new-jackpots .text-body {
        max-width: 50ch;
    }

    .new-jackpots .text-block br {
        display: none;
    }
    
    .new-jackpots .flex-layout {
        flex-flow: row;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
    
    
    .jackpot-card {
        display: flex;
        flex-flow: column nowrap;
    }
     
    .gold-pot {
        order: unset;
        padding-inline: 3rem;
        padding-block: 4.5rem;
        box-shadow: var(--shadow-4);
    }
    
    .gold-pot .jackpot-card-image {
        translate: 0 -8px;
    }
    
    .gold-pot .heading-topic {
        --heading-topic-size: var(--font-xl);
    
        translate: -4px;
    }
    
    
    .silver-pot,
    .copper-pot {
        padding-inline: 3rem;
        padding-block: 3rem;
    }
    
    .silver-pot {
        order: unset;
    }
    
    .copper-pot {
        order: unset;
        padding-inline: 3.25rem;
    }
    
    .jackpot-card.silver-pot .heading-topic,
    .jackpot-card.copper-pot .heading-topic {
        color: var(--grey-5);
    }
    
}

@media screen and (min-width: 80em) {
    .new-jackpots .text-block {
        margin-bottom: 3rem;
    }
    
    .new-jackpots .heading-section {
        max-width: 55%;
    }
    
    .new-jackpots .text-body {
        max-width: 53ch;
        font-size: 1.125rem;
    }

    .new-jackpots .text-block br {
        display: none;
    }
    
    .new-jackpots .flex-layout {
        flex-flow: row;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
    
    
    .jackpot-card {
        display: flex;
        flex-flow: column nowrap;
    }
    
    
    .gold-pot {
        order: unset;
        padding-inline: 3rem;
        padding-block: 4.5rem;
        box-shadow: var(--shadow-4);
    }
    
    .gold-pot .jackpot-card-image {
        translate: 0 -8px;
    }
    
    .gold-pot .heading-topic {
        --heading-topic-size: var(--font-xl);
    
        translate: -4px;
    }
    
    
    .silver-pot,
    .copper-pot {
        padding-inline: 3rem;
        padding-block: 3rem;
    }
    
    .silver-pot {
        order: unset;
    }
    
    .copper-pot {
        order: unset;
        padding-inline: 3.25rem;
    }
    
    .jackpot-card.silver-pot .heading-topic,
    .jackpot-card.copper-pot .heading-topic {
        color: var(--grey-5);
    }
    
}

@media screen and (min-width: 96em) {
    .new-jackpots .text-body {
        font-size: var(--font-md);
        font-weight: var(--font-300);
        max-width: 47%;
    }

    .new-jackpots .flex-layout {
        gap: 1rem;
    }

    .jackpot-card {
        border-radius: var(--border-radius-xl);
    }

    .gold-pot {
        padding-inline: 3.5rem;
        padding-block: 5rem;
    }

    .silver-pot,
    .copper-pot {
        padding-inline: 3.5rem;
        padding-block: 3.75rem;
    }

    .copper-pot {
        padding-inline: 3.75rem;
    }
}

@media screen and (min-width: 120em) {
    .new-jackpots .heading-section {
        max-width: 25ch;
    }

    .new-jackpots .text-body {
        font-size: var(--font-md);
        font-weight: var(--font-300);
        max-width: 54ch;
    }

    .new-jackpots .flex-layout {
        gap: 1rem;
    }

    .jackpot-card {
        border-radius: var(--border-radius-xl);
    }

    .gold-pot {
        padding-inline: 3.5rem;
        padding-block: 5rem;
    }

    .silver-pot,
    .copper-pot {
        padding-inline: 3.75rem;
        padding-block: 3.75rem;
    }

    .copper-pot {
        padding-inline: 4rem;
    }
}


/*
========================================================== 
    INCENTIVES SECTION
==========================================================
*/

.incentives .text-block {
    text-align: center;
}

.incentives .heading-section {
    max-width: 17ch;
    margin-inline: auto;
}

.incentives .text-block .text-body {
    max-width: 40ch;
    margin-inline: auto;
    margin-bottom: var(--space-16);
}


.incentives .grid-layout {
    grid-template-columns: repeat(auto-fit, minmax(min-content, 280px));
    justify-content: center;
    grid-gap: var(--space-48);
}

.incentive-card {
    display: flex;
    flex-flow: column;
    align-items: center;
    max-width: max(70%, 280px);
    padding: var(--space-48) var(--space-16);
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--grey-1);
    text-align: center;
    box-shadow: var(--shadow-1);
}

.incentive-card-heading {
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--grey-6);
    margin-block: 1.25rem;
}

.incentive-card .divider-horizontal {
    height: 2px;
    width: 36px;
    margin-inline: auto;
    background-color: var(--gold);
    margin-bottom: 1.25rem;
    border-radius: 4px;
}

.incentive-card-description {
    font-size: var(--font-base);
    font-weight: var(--font-300);
    line-height: var(--leading-relaxed);
    max-width: 90%;
    color: var(--grey-4);
    margin-bottom: var(--space-16);
}

.incentive-card-link {
    display: inline-block;
    font-size: var(--font-sm);
    margin-top: var(--space-4); 
    color: var(--blue-light);
}


@media screen and (min-width: 30em) {
    .incentives .heading-section {
        max-width: 80%;
        margin-inline: auto;
    }

    .incentives .text-block {
        text-align: center;
    }

    .incentives .text-block .text-body {
        max-width: 40ch;
    }

    .incentive-card {
        max-width: max(60%, 300px);
        padding: var(--space-48) var(--space-12);
    }
}

@media screen and (min-width: 37.5em) {


    .incentives .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 300px));
    }

    .incentives .heading-section {
        max-width: 20ch;
        margin-inline: auto;
    }

    .incentives .text-block .text-body {
        max-width: 50ch;
    }

    .incentive-card {
        max-width: 100%;
        padding: var(--space-48) var(--space-12);
    }
}

@media screen and (min-width: 45em) {
    .incentives .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 280px));
        justify-content: center;
        grid-gap: var(--space-40);
    }

    .incentives .text-block {
        text-align: center;
    }

    .incentives .heading-section {
        max-width: 20ch;
        margin-inline: auto;
    }

    .incentives .text-block .text-body {
        font-size: 1.125rem;
        max-width: 48ch;
    }
    
    .incentive-card {
        max-width: max(39%, 280px);
    }
}

@media screen and (min-width: 50em) {
    .incentives .flex-layout {
        gap: 3.75rem;
    }

    .incentive-card {
        max-width: max(33%, 280px);
    }
}

@media screen and (min-width: 60em) {
    .incentives .heading-section {
        max-width: 65%;
        margin-block-end: var(--space-16);
        margin-inline: auto;
    }
    
    .incentives .text-block .text-body {
        max-width: 50ch;
    }

    .incentives .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, max(25%, 248px)));
        justify-content: center;
        grid-gap: var(--space-40);
    }
    
    .incentive-card {
        max-width: max(100%, 248px);
    }

}

@media screen and (min-width: 73.75em) {
    .incentives .text-block {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-128);
        text-align: left;
    }
    
    .incentives .text-block .text-body {
        font-size: 1.125rem;
        font-weight: var(--font-400);
        line-height: var(--leading-loose);
        max-width: 47ch;
        margin-inline: unset;
    }

    .incentives .heading-section {
        max-width: 14ch;
        margin-inline: unset;
        margin-bottom: unset;
    }

    .incentives .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 300px));
        justify-content: center;
        grid-gap: var(--space-56);
    }

    .incentive-card {
        max-width: max(22.5%, 300px);
        padding-top: var(--space-56);
        border-radius: var(--border-radius-xl);
      }
}

@media screen and (min-width: 80em) {
    .incentives .text-block {
        display: flex;
        justify-content: center;
        gap: var(--space-96);
        align-items: center;
    }

    .incentives .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 300px));
        justify-items: unset;
        justify-content: center;
        grid-gap: var(--space-80);
        text-align: unset;
        margin-block-end: unset;
    }

    .incentives .heading-section {
        max-width: 15ch;
        text-align: unset;  
        margin-block-end: 0;
        margin-inline: unset;
    }
    

    .incentives .text-block .text-body {
        font-size: var(--font-md);
        font-weight: var(--font-300);
        line-height: 1.875;
        text-align: unset;
        max-width: 47ch;
        margin-inline: unset;
        margin-bottom: var(--space-0);
    }
    
    .incentive-card {
        max-width: max(22.5%, 300px);
        padding: var(--space-56) var(--space-16);
        border-radius: var(--border-radius-xl);
    }
    
    .incentive-card-description {
        max-width: 25ch;
    }
}

@media screen and (min-width: 96em) {
    .incentives .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 360px));
        justify-items: unset;
        grid-gap: var(--space-96);
        padding-block-start:  var(--space-0);
    }

    .incentives .text-block {
        display: flex;
        justify-content: center;
        gap: var(--space-64);
    }

    .incentives .heading-section {
        max-width: 17ch;
    }

    .incentives .text-block .text-body {
        font-size: var(--font-lg);
    }

    .incentive-card {
        max-width: max(95%, 360px);
        padding: var(--space-64) var(--space-16);
        border-radius: var(--border-radius-xl);
    }

    .incentive-card-heading {
        font-family: var(--font-body);
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
        color: var(--grey-6);
        margin-block: 1.5rem;
    }

    .incentive-card .divider-horizontal {
        height: 2px;
        width: 36px;
        margin-inline: auto;
        background-color: var(--gold);
        margin-bottom: 1.5rem;
        border-radius: 4px;
    }

    .incentive-card-description {
        font-size: 1.125rem;
        font-weight: var(--font-300);
        line-height: var(--leading-relaxed);
        width: 90%;
        color: var(--grey-4);
        margin-bottom: var(--space-16);
    }
}

@media screen and (min-width: 120em) {
    .incentives .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 380px));
        justify-items: center;
        grid-gap: var(--space-128);
        padding-block-start:  var(--space-0);
    }

    .incentives .heading-section {
        max-width: 17ch;
    }


    .incentive-card {
        max-width: max(24%, 380px);
        padding: var(--space-64) var(--space-48);
    }

    .incentive-card-heading {
        font-family: var(--font-body);
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
        color: var(--grey-6);
        margin-block: 1.5rem;
    }

    .incentive-card .divider-horizontal {
        height: 2px;
        width: 36px;
        margin-inline: auto;
        background-color: var(--gold);
        margin-bottom: 1.5rem;
        border-radius: 4px;
    }

    .incentive-card-description {
        font-size: 1.125rem;
        font-weight: var(--font-300);
        line-height: var(--leading-relaxed);
        width: 90%;
        color: var(--grey-4);
        margin-bottom: var(--space-16);
    }

    .incentive-card-link {
        display: inline-block;
        font-size: var(--font-base);
    }
}


/*
========================================================== 
    LAST JACKPOT SECTION
==========================================================
*/

.last-jackpot {
    background-color: var(--blue);
    padding-block: var(--space-40);
}

.last-jackpot .flex-layout:only-child {
    flex-flow: column;
    justify-content: center;
    align-items: start;
    gap: var(--space-32);
}

.last-jackpot img {
    display: block;
    height: fit-content;
    width: max-content;
    max-width: 100%;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-1);
}

.last-jackpot .heading-section {
    --heading-section-color: var(--off-white);
    --heading-section-leading: 1.4;

    margin-bottom: var(--space-20);
}

.last-jackpot .highlight-text {
    color: var(--gold);
}

.last-jackpot .content-box .flex-layout {
    flex-flow: column;
    align-items: start;
    margin-left: 1rem;
    margin-bottom: 1.5rem;
}

.last-jackpot .content-box .content-box {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.last-jackpot .content-box .content-box:not(:last-of-type) {
    margin-bottom: var(--space-8);
}


.last-jackpot .icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    line-height: 1;
    background-color: var(--grey-2);
    color: var(--gold);
    padding: 0.5rem;
    border-radius: var(--border-radius-rounded);
    box-shadow: var(--shadow-1);
    border: 4px solid var(--blue-light);
}

.icon-box + .text-block {
    margin-left: 0.5rem;
}

.last-jackpot .date,
.last-jackpot .location {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--gold);
    margin-bottom: 0;
}


.call-to-action .heading-topic {
    --heading-topic-size:var(--font-lg);
    --heading-topic-weight: var(--font-600);
    --heading-topic-color: var(--grey-3);

    margin-bottom: var(--space-28);
}

.call-to-action .find-button {
    display: inline-block;
    font-size: var(--font-base);
    font-weight: 600;
    background-color: var(--gold);
    color: var(--white);
    padding: 1.125rem 1.75rem;
    border-radius: var(--border-radius-md);
}


@media screen and (min-width: 30em) {
    .last-jackpot .flex-layout:only-child {
        align-items: center;
    }

    .last-jackpot .heading-section {
        margin-bottom: 1.75rem;
        text-align: center;
    }

    .last-jackpot .image-box + .content-box {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        padding-inline: var(--space-12);
        margin-bottom: var(--space-0);
    }

    .call-to-action {
        margin-top: 0;
        text-align: center;
    }
}

@media screen and (min-width: 37.5em) {
    .last-jackpot .heading-section {
        max-width: 25ch;
        margin-inline: auto;
    }
}

@media screen and (min-width: 45em) {
    .last-jackpot.full-bleed {
        margin-inline: auto;
    }

    .last-jackpot {
        max-width: fit-content;
        padding-inline: var(--space-24);
        padding-block: var(--space-24);   
        border-radius: var(--border-radius-xl);
    }
    
    .last-jackpot .flex-layout:only-child {
        flex-flow: column;
        align-items: center;
        gap: 2rem;        
    }
    
    .last-jackpot .image-box {
        margin-bottom: var(--space-0);
    }
    
    .last-jackpot img {
        display: block;
        height: fit-content;
        max-width: 100%;
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-1);
    }
    
    .last-jackpot .image-box + .content-box {
        padding-block-end: var(--space-20);
    }

    .last-jackpot .content-box .flex-layout {
        flex-flow: column;
        align-items: start;
        gap: 0rem;
        margin-left: 0;
        margin-bottom: var(--space-24);
    }


    .last-jackpot .content-box .content-box {
        display: flex;
        flex-flow: row;
        align-items: center;
        margin-left: 0;
        margin-bottom: 0;
    }
    
    
    .icon-box + .text-block {
        margin-left: 0.75rem;
    }
    
    
    .call-to-action .heading-topic {    
        margin-bottom: 1.85rem;
    }
}

@media screen and (min-width: 60em) {

    .last-jackpot img {
        width: max-content;
        max-width: unset;
        border-radius: var(--border-radius-lg);
    }
    
    .last-jackpot .heading-section {
        
        margin-bottom: 1.75rem;
        text-align: center;
    }
    
    .last-jackpot .highlight-text {
        color: var(--gold);
        white-space: nowrap;
    }
    
    .last-jackpot .icon-box {
        border-radius: var(--border-radius-rounded);
        box-shadow: var(--shadow-1);
        border: 4px solid var(--blue-light);
    }

    .last-jackpot .image-box + .content-box {
        align-items: center;
        padding-inline: var(--space-0);
        margin-bottom: var(--space-0);
    }
    
    .last-jackpot .content-box .flex-layout {
        margin-left: 2rem;
    }
    
    .last-jackpot .content-box .flex-layout:first-of-type {
        margin-bottom: 0.5rem;
    }

    .last-jackpot .content-box .content-box:not(:last-of-type) {
        margin-bottom: var(--space-8);
    }
    
    .last-jackpot .date,
    .last-jackpot .location {
        font-size: 1.5rem;
    }

    .last-jackpot .icon-box {
        font-size: var(--font-lg);
    }
    
    .last-jackpot .icon-box + .text-block {
        margin-left: 1rem;
    }
    
    .call-to-action {
        margin-top: 1.5rem;
        text-align: center;
    }
    
    .call-to-action .heading-topic {
    
        margin-bottom: 1.85rem;
    }
    
}

@media screen and (min-width: 73.75em) {
    .last-jackpot .flex-layout:only-child {
        justify-content: space-between;
        flex-flow: row;
        align-items: center;
        gap: var(--space-20);
        width: max-content;
    }

    .last-jackpot .image-box{
        height: 480px;
        max-width: 548px;
        margin-bottom: var(--space-0);
    }
    
    .last-jackpot img {
        height: 100%;
        max-width: 548px;
        object-fit: cover;  
    }

    .last-jackpot .image-box + .content-box {
        align-items: start;
        padding-inline: var(--space-0);
        margin-bottom: var(--space-0);
    }

    .last-jackpot .heading-section {
        max-width: 18ch;
        margin-bottom: 1.25rem;
        text-align: left;
    }

    .call-to-action {
        margin-top: 1.25rem;
        text-align: left;
      }
}

@media screen and (min-width: 80em) {

    .last-jackpot {
        width: 100%;
        max-width: 100%;
        padding-inline: var(--space-28);
        padding-block: var(--space-32);
    }
    
    .last-jackpot .flex-layout:only-child {
        flex-flow: row;
        justify-content: space-between;
        gap: var(--space-24);
    }
    
    .last-jackpot .image-box{
        height: 480px;
        max-width: 592px;
        margin-bottom: var(--space-0);
    }
    
    .last-jackpot img {
        height: 100%;
        max-width: 100%;
        object-fit: cover;  
    }
    
    .last-jackpot .heading-section {
        max-width: 20ch;
        margin-bottom: 1.25rem;
        text-align: unset;
        margin-inline: unset;
    }
    
    .last-jackpot .highlight-text {
        color: var(--gold);
        white-space: nowrap;
    }
    
    .last-jackpot .icon-box {
        border-radius: var(--border-radius-rounded);
        box-shadow: var(--shadow-1);
        border: 4px solid var(--blue-light);
    }

    .last-jackpot .image-box + .content-box {
        align-items: start;
        margin-bottom: var(--space-0);
    }
    
    .last-jackpot .content-box .flex-layout {
        margin-left: 2rem;
    }
    
    .last-jackpot .content-box .flex-layout:first-of-type {
        margin-bottom: 0.25rem;
    }

    .last-jackpot .content-box .content-box:not(:last-of-type) {
        margin-bottom: var(--space-8);
    }
    
    .last-jackpot .date,
    .last-jackpot .location {
        font-size: 1.5rem;
    }

    .last-jackpot .icon-box {
        font-size: var(--font-lg);
    }
    
    .last-jackpot .icon-box + .text-block {
        margin-left: 1rem;
    }
    
    .call-to-action {
        margin-top: 1.5rem;
        text-align: unset;
    }
    
    .call-to-action .heading-topic {
        margin-bottom: 1.5rem;
    }
    
}

@media screen and (min-width: 96em) {
    .last-jackpot {
        width: 100%;
        max-width: 100%;
        padding-inline: var(--space-32);
        padding-block: var(--space-40);
    }
    
    .last-jackpot .flex-layout:only-child {
        gap: var(--space-36);   
    }

    .last-jackpot .image-box{
        height: 560px;
        max-width: 660px;
        margin-bottom: var(--space-0);
    }
    
    .last-jackpot img {
        height: 100%;
        max-width: 100%;
        object-fit: cover;
         
    }

    .last-jackpot .heading-section {
        margin-bottom: 1.75rem;
    }

    .call-to-action {
        margin-top: 2rem;
        text-align: unset;
    }

    .call-to-action .heading-topic {
        margin-bottom: 2rem;
    }
}

@media screen and (min-width: 120em) {
    .last-jackpot .flex-layout:only-child {
        flex-flow: row;
        justify-content: start;
        gap: 3rem;
        padding-inline: var(--space-48);
        padding-block: var(--space-48);
        border-radius: var(--border-radius-hg);
    }

    .last-jackpot .image-box{
        height: 600px;
        max-width: fit-content;
        margin-bottom: var(--space-0);
    }
    
    .last-jackpot img {
        height: 100%;
        max-width: 768px;
        object-fit: cover;
        border-radius: 1.5rem;  
    }

    .last-jackpot .heading-section {
        margin-bottom: 1.75rem;
    }

    .call-to-action {
        margin-top: 2rem;
        text-align: unset;
    }

    .call-to-action .heading-topic {
        margin-bottom: 2rem;
    }
}


/*
========================================================== 
    HELP US SECTION
==========================================================
*/
.help-us .flex-layout {
    flex-flow: column;
    align-items: start;
}

.help-us .heading-section {
    line-height: 1.4;
}

.help-us .text-block .text-body:not(:last-of-type) {
    margin-bottom: 1.25rem;   
}

.help-us .content-box {
    max-width: 100%;
    padding: var(--space-16) var(--space-12);
    margin-bottom: var(--space-32);
    background-color: var(--grey-1);
    border: 1px solid var(--grey-2);
    border-radius: var(--border-radius-lg);
}

.complaint-card {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    border-radius: var(--border-radius-md);
    padding-inline: 10px;
    padding-block: 10px;
    margin-bottom: calc(var(--space-16) - 2px);
    box-shadow: var(--shadow-1);
    background-color: var(--white);
}

.complaint-card:last-of-type {
    margin-bottom: var(--space-0);
}

.complaint-card .text-body {
    font-size: var(--font-sm);
    font-weight: var(--font-500);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    margin-bottom: var(--space-0);
    color: var(--grey-6);
}

.complaint-card .icon-box {
    font-size: var(--font-xl);
    line-height: var(--leading-none);
    color: var(--gold);
}


.help-us .contact-button {
    display: inline-block;
    font-size: var(--font-base);
    font-weight: var(--font-600);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wide);
    color: var(--white);
    background-color: var(--blue);
    padding: 1.125rem 1.75rem;
    border-radius: var(--border-radius-md);
}

.help-us .text-block .contact-button {
    display: none;
}


@media screen and (min-width: 30em) {
    .help-us .flex-layout {
        align-items: center;
    }

    .help-us .text-block {
        text-align: center;
    }

    .help-us .heading-section {
        max-width: 23ch;
        margin-inline: auto;
    }

    .help-us .text-block .text-body {
        max-width: 100%;
    }

    .help-us .content-box {
        padding-inline: var(--space-16);
        padding-block: var(--space-16);
        margin-bottom: var(--space-32);
        background-color: var(--grey-1);
        border: 1px solid var(--grey-2);
        border-radius: var(--border-radius-lg);
    }

    .complaint-card {
        padding-block: var(--space-12);
    }

    .complaint-card .text-body {
        font-size: var(--font-base);
    }

    .complaint-card:last-of-type {
        margin-bottom: var(--space-0);
    }
}

@media screen and (min-width: 37.5em) {
    .help-us .text-block .text-body {
        max-width: 45ch;
        margin-inline: auto;  
    }

    .help-us .content-box {
        max-width: 100%;
        padding: 1.25rem 1rem;
        margin-bottom: 2rem;
        background-color: var(--grey-1);
        border: 1px solid var(--grey-2);
        border-radius: var(--border-radius-xl);
    }

    .complaint-card:last-of-type {
        margin-bottom: var(--space-0);
    }
}

@media screen and (min-width: 45em) {
        
    .help-us .flex-layout {
        flex-flow: column;
        align-items: center;
        justify-content: space-between;
    }
    
    .help-us .heading-section {
        line-height: 1.375;
        max-width: 90%;
        margin-inline: auto;
        text-align: center;
    }

    .help-us .text-block {
        text-align: center;
    }
    
    .help-us .text-block .text-body {
        max-width: 45ch;
        margin-inline: auto;
        margin-bottom: 1.25rem;
    }
    
    .help-us .text-block .text-body:last-of-type {
        margin-bottom: 0;
    }

    .help-us .content-box {
        max-width: 90%;
        padding: 1.25em 1rem;
        margin-bottom: 2rem;
        background-color: var(--grey-1);
        border: 1px solid var(--grey-2);
        border-radius: var(--border-radius-xl);
    }
    
    
    .complaint-card {
        display: flex;
        align-items: center;
        border-radius: 0.75rem;
        padding: 0.875rem 0.75rem;
        margin-bottom: 1rem;
        background-color: var(--white);
        box-shadow: var(--shadow-1);
    }
    
    .complaint-card:last-of-type {
        margin-bottom: var(--space-0);
    }
    
    .complaint-card .text-body {
        font-size: var(--font-base);
        font-weight: var(--font-500);
        line-height: var(--leading-compact);
        letter-spacing: var(--tracking-wide);
        margin-bottom: 0;
        color: var(--grey-6);
    }
    
    .complaint-card .icon-box {
        font-size: 2rem;
        line-height: 1;
        color: var(--gold);
    }

    .help-us .text-block .contact-button {
        display: none;
    }

    .help-us .content-box .contact-button {
        display: inline-block;
    }
}

@media screen and (min-width: 50em) {
    
}

@media screen and (min-width: 60em) {
        
    .help-us .flex-layout {
        flex-flow: row;
        align-items: center;
        justify-content: center;
    }
    
    .help-us .heading-section {
        line-height: 1.25;
        max-width: 90%;
        margin-inline: unset;
        text-align: unset;
    }

    .help-us .text-block {
        max-width: 45%;
        text-align: unset;
        margin-inline: 0;
    }

    .help-us .text-block:first-of-type {
        margin-bottom: 0;
    }
    
    .help-us .text-block .text-body {
        max-width: 42ch;
        margin-inline: 0;
        margin-bottom: 0.875rem;
        text-align: unset;      
    }
    
    .help-us .text-block .text-body:last-of-type {
        margin-bottom: 2rem;
        max-width: 42ch;
    }

    .help-us .content-box {
        max-width: 50%;
    }
    
    
    .complaint-card {
        align-items: center;
        gap: 10px;
        margin-bottom: var(--space-16);
    }
    
    .complaint-card:last-of-type {
        margin-bottom: var(--space-0);
    }

    .complaint-card .icon-box {
        margin-right: 0;
    }

    
    .help-us .text-block .contact-button {
        display: inline-block;
    }

    .help-us .flex-layout > .contact-button {
        display: none;
    }
}

@media screen and (min-width: 73.75em) {

    .help-us .flex-layout {
        flex-flow: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-32);
    }

    .help-us .text-block {
        max-width: 41%;
    }

    .help-us .heading-section {
        max-width: 95%;
    }

    .help-us .content-box {
        max-width: 48%;
        padding: 2rem 1.5rem;
        margin-bottom: 0;
    }
}

@media screen and (min-width: 80em) {
        
    .help-us .flex-layout {
        flex-flow: row;
        align-items: center;
        justify-content: space-evenly;
    }
    
    .help-us .heading-section {
        line-height: 1.375;
        max-width: 95%;
        margin-inline: unset;
        text-align: unset;
    }

    .help-us .text-block {
        max-width: 41%;
        text-align: left;
        margin-inline: unset;
    }
    
    .help-us .text-block .text-body {
        max-width: 42ch;
        margin-bottom: 1rem;
        margin-inline: unset;     
    }
    
    .help-us .text-block .text-body:last-of-type {
        margin-bottom: 2rem;
    }

    .help-us .content-box {
        max-width: 48%;
        padding: 3rem 2.5rem;
        margin-bottom: 0;
        background-color: var(--grey-1);
        border: 1px solid var(--grey-2);
        border-radius: var(--border-radius-xl);
    }
    
    
    .complaint-card {
        align-items: center;
        gap: 10px;
    }
    
    .complaint-card:last-of-type {
        margin-bottom: var(--space-0);
    }

    .complaint-card .icon-box {
        margin-right: 0;
    }

    
    .help-us .text-block .contact-button {
        display: inline-block;
    }

    .help-us .flex-layout > .contact-button {
        display: none;
    }
}

@media screen and (min-width: 96em) {
    .help-us .heading-section {
        max-width: 95%;
    }

    .help-us .text-block .text-body:last-of-type {
        margin-bottom: 2.5rem;
    }

    .help-us .content-box {
        padding: 3em 2.5rem;
    }

    .complaint-card {
        margin-bottom: var(--space-24);
    }

    .complaint-card .icon-box {
        font-size: 2.5rem;
    }

    .complaint-card .text-body {
        font-size: 1.125rem;
        font-weight: var(--font-400);
        color: var(--grey-7);
    }
}

@media screen and (min-width: 120em) {
    .help-us .text-block {
        max-width: 40%;
    }

    .help-us .heading-section {
        line-height: 1.375;
        max-width: 100%;
    }

    .help-us .content-box {
        max-width: 60%;
        padding: 3.5em 3rem;
    }

    .complaint-card {
        margin-bottom: var(--space-24);
        padding-inline: var(--space-20);
        padding-block: var(--space-16);
    }

    .complaint-card .icon-box {
        font-size: 2.5rem;
    }

    .complaint-card .text-body {
        font-size: 1.125rem;
        font-weight: var(--font-400);
        color: var(--grey-7);
    }
}


/*
========================================================== 
    FOLLOW US SECTION
==========================================================
*/
.follow-us .flex-layout {
    flex-flow: column;
    align-items: center;
    box-shadow: var(--shadow-1);
    padding: 3rem 1rem;
    border-radius: var(--border-radius-lg);
    background-color: var(--white);
}

.follow-us .text-block {
    text-align: center;
    margin-bottom: var(--space-40);
} 

.follow-us .heading-section {
    margin-bottom: 1rem;
}

.follow-us .text-body {
    width: 90%;
    margin-inline: auto;
}


.social-media {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: var(--space-24);
    padding-left: 0;
}

.social-media-link {
    display: inline-block;
    font-size: var(--font-lg);
    padding: 14px 16px;
    border-radius: var(--border-radius-md);
    color: var(--gold);
    background-color: var(--blue);
    box-shadow: var(--shadow-1);
}


@media screen and (min-width: 30em) {
    .follow-us .flex-layout {
        border-radius: var(--border-radius-xl);
    }

    .follow-us .social-media-link {
        font-size: 1.75rem;
    }

    .follow-us .text-body {
        max-width: 90%;
    }
}

@media screen and (min-width: 37.5em) {
    .follow-us .text-body {
      max-width: 40ch;
    }
}

@media screen and (min-width: 45em) {
    .follow-us {
        max-width: 95%;
        margin-inline: auto;
    }

    .follow-us .flex-layout {
        flex-flow: column;
        align-items: center;
        padding: 3em 1rem;
        box-shadow: var(--shadow-1);
        border-radius: var(--border-radius-xl);
        background-color: var(--white);
    }
    
    .follow-us .text-block {
        text-align: center;
        margin-bottom: var(--space-40);
    } 
    
    .follow-us .heading-section {
        margin-bottom: 0.75rem;
    }
    
    .follow-us .text-body {
        max-width: 40ch;
    }
    
    
    .follow-us .social-media {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        gap: 2rem;
        padding-left: 0;
    }
    
    .follow-us .social-media-link {
        font-size: 2rem;
    }
}

@media screen and (min-width: 50em) {
    .follow-us {
        max-width: 70%;
        margin-inline: auto;
    }
}

@media screen and (min-width: 60em) {
    .follow-us {
        max-width: 100%;
        margin-inline: auto;
        margin-bottom: 2rem;
    }

    .follow-us .heading-section {
        margin-bottom: 0.75rem;
    }

    .follow-us .text-body {
        max-width: max(50%, 45ch);
        margin-inline: unset;
    }

    .follow-us .text-block {
        text-align: left;
        margin-bottom: var(--space-0);
    } 

    .follow-us .flex-layout {
        flex-flow: row;
        justify-content: space-between;
        align-items: end;
        max-width: unset;
        margin-inline: unset;
        padding: 2em 2.5rem;
        border-radius: var(--border-radius-xl);
    }

    .follow-us .social-media {
        gap: var(--space-20);
        transform: translateY(-4px);
    }

    .follow-us .social-media-link {
        font-size: var(--font-xl);
        padding: 14px 16px;
    }

    .follow-us .social-media-link:hover {
        color: var(--white);
    }
}

@media screen and (min-width: 73.75em) {
    .follow-us {
        max-width: 97%;
        margin-inline: auto;
    }

    .follow-us .flex-layout {
        padding: 2.75rem 3rem;
    }

    .follow-us .heading-section {
        margin-bottom: 18px;
    }

    .follow-us .social-media {
        gap: var(--space-32);
    }

    .follow-us .social-media-link {
        padding: 16px 18px;
    }
}

@media screen and (min-width: 80em) {
    .follow-us {
        max-width: 96%;
        margin-bottom: 2rem;
    }

    .follow-us .heading-section {
        margin-bottom: var(--space-16);
    }

    .follow-us .text-body {
        --text-body-size: 1.125rem;

        width: 68%;
        margin-inline: unset;
    }

    .follow-us .text-block {
        text-align: left;
        margin-bottom: var(--space-0);
    } 

    .follow-us .flex-layout {
        flex-flow: row;
        justify-content: space-between;
        align-items: end;
        padding: 3rem 2.5rem;
    }

    .follow-us .social-media {
        transform: translateY(-4px);
    }

    .follow-us .social-media-link {
        font-size: var(--font-hg);
        padding: 14px 16px;
        border-radius: var(--border-radius-lg);
    }

    .follow-us .social-media-link:hover {
        color: var(--white);
    }
}

@media screen and (min-width: 96em) {
    .follow-us .flex-layout {
        padding: 4rem 3.5rem;
        border-radius: var(--border-radius-hg);
    }

    .follow-us .heading-section {
        margin-bottom: var(--space-20);
    }

    .follow-us .text-body {
        font-size: var(--font-md);
        font-weight: var(--font-300);
    }

    .follow-us .social-media {
        gap: var(--space-40);
    }

    .follow-us .social-media-link {
        padding: 18px 20px;
        border-radius: var(--border-radius-lg);
    }
}

@media screen and (min-width: 120em) {
    .follow-us {
        max-width: 95%;
        margin-inline: auto;
    }
    .follow-us .flex-layout {
        padding: 4rem 3.5rem;
        border-radius: var(--border-radius-hg);
    }

    .follow-us .heading-section {
        margin-bottom: var(--space-20);
    }

    .follow-us .social-media {
        gap: var(--space-40);
    }

    .follow-us .social-media-link {
        padding: 22px 24px;
    }
}


/*
========================================================== 
    WAP vs MYSTERY PAGE
==========================================================
*/
.true-wap > .text-block {
    margin-bottom: 3rem;
    text-align: center;
}

.true-wap .heading-section {
    line-height: 1.375;
    max-width: 100%;
    margin-inline: auto;
}

.true-wap > .text-block .text-body {
    font-size: var(--font-md);
    font-weight: var(--font-600);
    color: var(--grey-5);
}

.true-wap .highlight-text {
    /* font-weight: var(--font-500); */
    color: var(--gold);
}


.true-wap .content-box {
    background-color: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
}


.true-wap .image-box {
    display: flex;
    justify-content: space-between;    
    margin-block-end: var(--space-20);
}

.true-wap .image-box img {
    display: block;
    width: 100px;
}

.true-wap .red,
.true-wap .green {
    font-size: 1rem;
}

.true-wap .red {
    color: var(--red);
}

.true-wap span.red {
    font-style: italic;
}

.true-wap .green {
    color: var(--green);
}


.wap-jackpot .heading-tertiary,
.mystery-jackpot .heading-tertiary {
    font-size: 1.25rem;
    text-decoration: underline;
    text-underline-position: under;
    margin-bottom: var(--space-16);
    color: var(--grey-8);
}

.mystery-jackpot .text-list,
.wap-jackpot .text-list {
    list-style-position: inside;
}

.true-wap .heading-tertiary,
.true-wap .text-body,
.true-wap .text-list-item {
    font-weight: 600;
}


.true-wap .content-box .text-block:nth-of-type(2) {
    font-size: var(--font-md);
    text-align: center;
    margin-block-end: var(--space-32);
}


.wap-jackpot {
    text-align: center;
    margin-bottom: 2.5rem;
}

.wap-jackpot .text-list {
    padding-left: var(--space-0);
}

.wap-jackpot .text-list-item {
    line-height: var(--leading-relaxed);
    padding-left: var(--space-0);
    color: var(--green);
}

.wap-jackpot .text-list-item:where(:not(:last-child)) {
    margin-bottom: var(--space-16);
}


.mystery-jackpot {
    text-align: center;
}

.mystery-jackpot .text-list,
.mystery-jackpot .text-body {
    color: var(--red);
}

.mystery-jackpot .text-body:nth-of-type(1) {
    line-height: 1.5;
    margin-bottom: 0.875rem;
}

.mystery-jackpot .text-body:nth-of-type(1) .text-bold {
    --text-body-color: var(--red);
}

.mystery-jackpot .text-body:nth-of-type(2) {
    margin-bottom: var(--space-16);
}

.mystery-jackpot ul.text-list {
    margin-bottom: 2rem;
}

.mystery-jackpot ul.text-list > .text-list-item {
    line-height: var(--leading-relaxed);
    padding-left: 0;
    margin-left: 0;
    color: var(--red);
}

.mystery-jackpot .text-list span {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.mystery-jackpot .text-list-item .text-list {
    margin-top: var(--space-8);
    margin-left: var(--space-0);
    margin-bottom: var(--space-0);
    padding-left: var(--space-0);
    color: var(--grey-8);
}

.mystery-jackpot ol.text-list > .text-list-item {
    line-height: var(--leading-relaxed);
    text-decoration: none;
    color: var(--grey-8);
}


.mystery-jackpot ul.text-list > .text-list-item:where(:not(:last-of-type)) {
    margin-bottom: 1.25rem;
}


.mystery-jackpot .text-body:nth-of-type(2),
.mystery-jackpot .text-body:nth-of-type(3) {
    line-height: var(--leading-relaxed);
    color: var(--green);
}

.mystery-jackpot .text-body:nth-of-type(3) {
    margin-bottom: 1.25rem;
}


@media screen and (min-width: 30em) {
    .true-wap .content-box {
        background-color: var(--white);
        padding: 2.5rem 1rem;
        max-width: 100%;
        margin-inline: auto;
        border: 1px solid var(--grey-1);
        border-radius: var(--border-radius-xl);
        box-shadow: var(--shadow-1);
    }

    .true-wap .content-box .text-block:nth-of-type(2) .text-body {
        font-size: 18px;
    }

    .mystery-jackpot .text-list-item .text-list {
        margin-left: var(--space-28);
    }
}

@media screen and (min-width: 37.5em) {
    .true-wap .heading-section {
        max-width: 50%;
        margin-inline: auto;
    }
}

@media screen and (min-width: 45em) {
    .true-wap > .text-block .text-body {
        width: 85%;
        margin-inline: auto;
    }

    .true-wap .content-box {
        padding: 3em 2.5rem;
        max-width: 90%;
        margin-inline: auto;
    }
}

@media screen and (min-width: 60em) {
    .true-wap > .text-block {
        margin-bottom: 3rem;
        text-align: center;
    }
    
    .true-wap .heading-section {
        line-height: 1.375;
        width: 50%;
        margin-inline: auto;
    }

    .true-wap > .text-block .text-body {
        font-size: var(--font-lg);
        width: 80%;
        margin-inline: auto;
    }
    
    .true-wap .content-box {
        background-color: var(--white);
        padding: 3.5em 5rem;
        max-width: 98%;
        margin-inline: auto;
        border: 1px solid var(--grey-1);
        border-radius: 1.5rem;
        box-shadow: var(--shadow-1);
    }

    .true-wap .content-box .text-block:nth-of-type(2) {
        text-align: center;
        margin-block-end: var(--space-32);
    }
    
    .true-wap .content-box .text-block:nth-of-type(2) .text-body {
        font-size: 18px;
        line-height: 1.875;
        width: 85%;
        margin-inline: auto;
    }
    
    .true-wap .image-box img {
        width: 200px;
    }

}

@media screen and (min-width: 80em) {
    .true-wap > .text-block {
        margin-bottom: 3rem;
        text-align: center;
    }
    
    .true-wap .heading-section {
        line-height: 1.375;
        width: 25ch;
        margin-inline: auto;
    }

    .true-wap > .text-block .text-body {
        font-size: var(--font-lg);
        width: 65%;
        margin-inline: auto;
    }
    
    .true-wap .content-box {
        background-color: var(--white);
        padding: 4.5em 6rem;
        max-width: 75%;
        margin-inline: auto;
        border: 1px solid var(--grey-1);
        border-radius: 1.5rem;
        box-shadow: var(--shadow-1);
    }

    .true-wap .content-box .text-block:nth-of-type(2) {
        text-align: center;
        margin-block-end: var(--space-32);
    }
    
    .true-wap .content-box .text-block:nth-of-type(2) .text-body {
        font-size: 18px;
        line-height: 1.875;
        width: 90%;
        margin-inline: auto;
    }
    
    .wap-jackpot {
        margin-bottom: 2.5rem;
    }

}

@media screen and (min-width: 96em) {
    .true-wap .content-box .text-block:nth-of-type(2) .text-body {
        font-size: 20px;
        width: 47ch;
    }

    .true-wap .image-box img {
        width: 240px;
    }
}


/*
========================================================== 
    BEST GAMES PAGE
==========================================================
*/
.best-games .text-block {
    text-align: center;
    margin-bottom: 3rem;
}

.best-games .heading-section {
    line-height: var(--leading-none);
}

.best-games .text-block .text-body {
    max-width: 32ch;
    margin-inline: auto;
}

.best-games .grid-layout {
    grid-template-columns: repeat(auto-fit, minmax(min-content, 300px));
    justify-content: center;
    grid-gap: var(--space-40);
    max-width: 100%;
    margin-inline: auto;
}

.best-games .game-card {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.best-games .game-card-header {
    max-width: 320px;
}

.best-games .game-play-video {
    max-width: 100%;
    max-height: 100%;
}

.best-games .game-card-description {
    padding-block: var(--space-12);
    background-color: var(--white);
    text-align: center;
}

.best-games .game-card-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: var(--tracking-wide);
    color: var(--grey-5);
}


@media screen and (min-width: 30em) {
    .best-games .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 320px));
        justify-items: center;
    }
}

@media screen and (min-width: 37.5em) {
    .best-games .text-block .text-body {
        max-width: 35ch;
    }

    .best-games .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 240px));
        justify-items: center;
    }

    .best-games .game-card-header {
        max-width: 240px;
    }

}

@media screen and (min-width: 45em) {
    .best-games .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 280px));
    }

    .best-games .game-card-header {
        max-width: 300px;
    }
}

@media screen and (min-width: 50em) {
    .best-games .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 300px));
    }
}

@media screen and (min-width: 60em) {
    .best-games .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 320px));
        grid-gap: var(--space-64);
    }

    .best-games .game-card-header {
        max-width: 320px;
    }

    .best-games .game-card:last-of-type {
        justify-self: start;
    }
}

@media screen and (min-width: 73.75em) {
    .best-games .grid-layout {
        grid-gap: var(--space-48);
    }
}

@media screen and (min-width: 80em) {
    .best-games .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 320px));
        grid-gap: var(--space-48);
    }

    .best-games .game-card:last-of-type {
        justify-self: unset;
    }

    .best-games .game-card-header {
        max-width: 320px;
    }

}

@media screen and (min-width: 90em) {
    .best-games .game-card {
        border-radius: var(--border-radius-lg);
    }
}

@media screen and (min-width: 96em) {
    .best-games .text-block .text-body {
        max-width: 41ch;
      }

    .best-games .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 360px));
        grid-gap: var(--space-72);
    }

    .best-games .game-card-header {
        max-width: 360px;
    }

    .best-games .game-card-description {
        padding-block: var(--space-16);
    }

}

@media screen and (min-width: 120em) {

    .best-games .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
        grid-gap: var(--space-16);
        row-gap: var(--space-72);
    }

    .best-games .game-card {
        border-radius: var(--border-radius-lg);
    }

    .best-games .game-card-header {
        max-width: 440px;
    }

}


/*
========================================================== 
    SITES PAGE
==========================================================
*/
.sites .text-block {
    text-align: center;
    margin-bottom: 3rem;
}

.sites .heading-section {
    line-height: var(--leading-none);
}

.sites .text-block .text-body {
    width: 90%;
    margin-inline: auto;
}

.sites .flex-layout {
    flex-flow: column;
    gap: 2.5rem;
}

.sites .heading-tertiary {
    --heading-tertiary-size: 1.5rem;

    margin-bottom: 0.75rem;
}

.sites .content-box {
    padding-inline: var(--space-4);
}

.sites .divider {
    height: 1px;
    width: 100%;
    background-color: var(--blue-faint);
    margin-bottom: 1.5rem;
}

.sites .content-box:hover .divider {
    background-color: var(--gold);
}

.sites .site-list {
    margin-left: 0;
    padding-inline-start: 0.75rem;
}

.site-list .site-list-item {
    position: relative;
    padding-left: 1.25rem;
    color: var(--grey-5);
}

.site-list .site-list-item:hover {
    color: var(--gold);
}

.site-list .site-link {
    color: currentColor;
}

.site-list .site-list-item::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--blue-faint);
    border-radius: 100%;
    transform: translateY(-50%);
}

.site-list .site-list-item:hover::before {
    background-color: currentColor;
}

.site-list .site-list-item:where(:not(:last-child)) {
    margin-bottom: 1.125rem;
}


@media screen and (min-width: 30em) {
    .sites .flex-layout {
        flex-flow: column;
        justify-content: unset;
    }

    .sites .site-list {
        margin-left: 0;
        padding-inline: var(--space-12);
    }
}

@media screen and (min-width: 37.5em) {
    .sites .content-box {
        padding-inline: var(--space-32);
    }
}

@media screen and (min-width: 45em) {
    .sites .text-block {
        text-align: center;
        margin-bottom: 3rem;
    }
    
    .sites .flex-layout {
        flex-flow: row wrap;
        justify-content: center;
        gap: 4rem;
    }
    
    .sites .heading-tertiary {
        --heading-tertiary-size: 1.75rem;
    
        margin-bottom: 1rem;
    }

    .sites .content-box {
        padding-inline: var(--space-0);
    }
    
    .sites .divider {
        height: 1px;
        width: 100%;
        background-color: var(--blue-faint);
        margin-bottom: 1.5rem;
    }
    
    .sites .content-box:hover .divider {
        background-color: var(--gold);
    }
    
    .sites .site-list {
        margin-left: 0;
        padding-inline: unset;
        padding-inline-start: 0.75rem;
    }
    
    .site-list .site-list-item {
        position: relative;
        padding-left: 1.25rem;
        color: var(--grey-5);
    }
    
    .site-list .site-list-item:hover {
        color: var(--gold);
    }
    
    .site-list .site-link {
        color: currentColor;
    }
    
    .site-list .site-list-item::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 6px;
        height: 6px;
        background-color: var(--blue-faint);
        border-radius: 100%;
        transform: translateY(-50%);
    }
    
    .site-list .site-list-item:hover::before {
        background-color: currentColor;
    }
    
    .site-list .site-list-item:where(:not(:last-child)) {
        margin-bottom: 1.125rem;
    }
}

@media screen and (min-width: 50em) {
    .sites .flex-layout {
        flex-flow: row wrap;
        justify-content: center;
        gap: 7.5rem;
    }
}

@media screen and (min-width: 60em) {
    .sites .text-block {
        text-align: center;
        margin-bottom: 3rem;
    }
    
    
    .sites .heading-tertiary {
        --heading-tertiary-size: 1.75rem;
    
        margin-bottom: 1rem;
    }

    .sites .content-box {
        padding-inline: var(--space-24);
    }
    
    .sites .divider {
        height: 1px;
        width: 100%;
        background-color: var(--blue-faint);
        margin-bottom: 1.5rem;
    }
    
    .sites .content-box:hover .divider {
        background-color: var(--gold);
    }
    
    .sites .site-list {
        margin-left: 0;
        padding-inline-start: 0.75rem;
    }
    
    .site-list .site-list-item {
        position: relative;
        padding-left: 1.25rem;
        color: var(--grey-5);
    }
    
    .site-list .site-list-item:hover {
        color: var(--gold);
    }
    
    .site-list .site-link {
        color: currentColor;
    }
    
    .site-list .site-list-item::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 6px;
        height: 6px;
        background-color: var(--blue-faint);
        border-radius: 100%;
        transform: translateY(-50%);
    }
    
    .site-list .site-list-item:hover::before {
        background-color: currentColor;
    }
    
    .site-list .site-list-item:where(:not(:last-child)) {
        margin-bottom: 1.125rem;
    }
}

@media screen and (min-width: 80em) {
    .sites .text-block {
        text-align: center;
        margin-bottom: 3rem;
    }
    
    .sites .flex-layout {
        flex-flow: row;
        justify-content: space-between;
        gap: unset;
    }
    
    .sites .heading-tertiary {
        --heading-tertiary-size: 1.75rem;
    
        margin-bottom: 1rem;
    }

    .sites .content-box {
        padding-inline: var(--space-0);
    }
    
    .sites .divider {
        height: 1px;
        width: 100%;
        background-color: var(--blue-faint);
        margin-bottom: 1.5rem;
    }
    
    .sites .content-box:hover .divider {
        background-color: var(--gold);
    }
    
    .sites .site-list {
        margin-left: 0;

    }
    
    .site-list .site-list-item {
        position: relative;
        padding-left: 1.25rem;
        color: var(--grey-5);
    }
    
    .site-list .site-list-item:hover {
        color: var(--gold);
    }
    
    .site-list .site-link {
        color: currentColor;
    }
    
    .site-list .site-list-item::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 6px;
        height: 6px;
        background-color: var(--blue-faint);
        border-radius: 100%;
        transform: translateY(-50%);
    }
    
    .site-list .site-list-item:hover::before {
        background-color: currentColor;
    }
    
    .site-list .site-list-item:where(:not(:last-child)) {
        margin-bottom: 1.125rem;
    }
}

@media screen and (min-width: 96em) {
    .sites .flex-layout {
        gap: 0;
    }

    .sites .text-body {
        font-size: var(--font-md);
        font-weight: var(--font-300);
    }

    .site-list .site-list-item {
        font-size: 1.125rem;
    }
}


/*
========================================================== 
    SITE LOCATION PAGE
==========================================================
*/
.site-location {
    margin-bottom: 0;
}

.site-location .text-block {
    text-align: center;
}

.site-location .heading-section {
    line-height: var(--leading-none);

}

.site-location .text-block .text-body {
    font-size: 1.125rem;
    line-height: var(--leading-none);
}

.google-map.site-map {
    height: 480px;
    width: auto;
}

.site-map.full-bleed {
    padding-inline: var(--space-0);
}


@media screen and (min-width: 60em) {
    .site-location {
        margin-bottom: 0rem;
    }
    
    .site-location .text-block {
        text-align: center;
    }
    
    .site-location .heading-section {
        text-align: center;
    }
    
    .site-location .text-block .text-body {
        font-size: 1.5rem;
    }
    
    .google-map.site-map {
        height: 600px;
        width: auto;
    }
}

@media screen and (min-width: 80em) {
    .google-map.site-map {
        height: 640px;
    }
}

@media screen and (min-width: 96em) {
    .google-map.site-map {
        height: 800px;
    }
}

/*
========================================================== 
    SITE LOCATION: Nearby Location Section
==========================================================
*/
.nearby-locations .text-block:first-of-type{
    text-align: center;
}

.nearby-locations > .grid-layout {
    grid-template-columns: repeat(auto-fit, minmax(min-content, 280px));
    justify-content: center;
    gap: var(--space-40);
}

.nearby-locations .heading-section {
    line-height: var(--leading-none);
    text-transform: capitalize;
    word-spacing: 0.25rem;
}

.site-card {
    display: flex;
    flex-flow: column nowrap;
    height: 300px;
    width: 300px;
    padding-bottom: 1.125rem;
    border-radius: var(--border-radius-lg);
    background-color: var(--white);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.site-card-header {
    max-height: 70%;
    max-width: 100%;
    flex: 0 1 auto;
    overflow: hidden;
}

.site-card-image {
    max-height: 100%;
    width: 100%;
    object-fit: fill;
    object-position: center;
}

.site-card-body {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    flex: 1 0 auto;
    padding: 1rem;
}

.site-card .heading-tertiary {
    --heading-tertiary-size: var(--font-lg);
    --heading-tertiary-weight: var(--font-600);
    --heading-tertiary-color: var(--grey-5);

    margin-bottom: 0.5rem;
}

.site-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 1rem;
}

.site-card-footer .flex-layout {
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
}

.site-card-footer .icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    width: fit-content;
    height: fit-content;
    padding: 6px;
    color: var(--gold);
    background-color: var(--grey-2);
    border-radius: 100%;
}

.site-card-footer .text-body {
    display: inline-block;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-tight);
    color: var(--grey-4);
}

.site-card-link {
    display: inline-block;
    font-size: var(--font-sm);
    font-weight: var(--font-600);
    line-height: 1;
    letter-spacing: var(--tracking-wider);
    text-decoration: none;
    text-transform: uppercase;
    width: fit-content;
    padding: 10px 1rem;
    color: var(--off-white);
    background-color: var(--blue);
    border-radius: var(--border-radius-sm);
}


@media screen and (min-width: 30em) {
    
    .site-card {
        height: 300px;
        width: 300px;
    }
    
    .site-card-header {
        max-height: 70%;
        flex: 0 1 auto;
    }
}

@media screen and (min-width: 37.5em) {
    .nearby-locations > .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 240px));
    }
    
    .site-card {
        height: 300px;
        width: 240px;
    }
}

@media screen and (min-width: 45em) {
    .nearby-locations > .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 300px));
    }
    
    .site-card {
        height: 300px;
        width: 300px;
    }
    
}

@media screen and (min-width: 50em) {
    .nearby-locations > .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 280px));
    }
}

@media screen and (min-width: 60em) {
    .nearby-locations > .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 280px));
        gap: var(--space-64);
    }
    
    
    .site-card {
        height: 300px;
        width: 300px;
        padding-bottom: 1.125rem;
        border-radius: 1rem;
        background-color: var(--white);
        box-shadow: var(--shadow-1);
        overflow: hidden;
    }
    
    
    .site-card-body {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        flex: 1 0 auto;
        padding: 1rem;
    }
    
    .site-card .heading-tertiary {
        margin-bottom: 0.5rem;
    }
    
    .site-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-inline: 1rem;
    }
    
    .site-card-footer .flex-layout {
        justify-content: start;
        align-items: center;
        gap: 0.5rem;
    }
    
    .site-card-footer .icon-box {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.25rem;
        width: fit-content;
        height: fit-content;
        border-radius: 100%;
    }
     
}

@media screen and (min-width: 80em) {
    .nearby-locations > .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 300px));
        justify-content: center;
        gap: var(--space-56);
    }
    
    
    .site-card {
        display: flex;
        flex-flow: column nowrap;
        height: 300px;
        width: 300px;
        padding-bottom: 1.125rem;
        border-radius: 1rem;
        background-color: var(--white);
        box-shadow: var(--shadow-1);
        overflow: hidden;
    }
    
    .site-card-body {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        flex: 1 0 auto;
        padding: 1rem;
    }
    
    .site-card .heading-tertiary {
        margin-bottom: 0.5rem;
    }
    
    .site-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-inline: 1rem;
    }
    
    .site-card-footer .flex-layout {
        justify-content: start;
        align-items: center;
        gap: 0.5rem;
    }
    
    .site-card-footer .icon-box {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.25rem;
        width: fit-content;
        height: fit-content;
        border-radius: 100%;
    }
        
}

@media screen and (min-width: 96em) {
    .nearby-locations > .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 320px));
        justify-content: center;
        gap: var(--space-80);
    }
    
    
    .site-card {
        display: flex;
        flex-flow: column nowrap;
        height: 320px;
        width: 320px;
        padding-bottom: 1.125rem;
        border-radius: 1rem;
        background-color: var(--white);
        box-shadow: var(--shadow-2);
        overflow: hidden;
    }
}

@media screen and (min-width: 120em) {
    .nearby-locations > .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(min-content, 360px));
        justify-content: center;
    }
    
    .site-card {
        display: flex;
        flex-flow: column nowrap;
        height: 360px;
        width: 360px;
        padding-bottom: 1.125rem;
        border-radius: 1rem;
        background-color: var(--white);
        box-shadow: var(--shadow-2);
        overflow: hidden;
    }
}


/*
========================================================== 
    SITE LOCATION: Carousel Slider Section
==========================================================
*/
.swiper {
    --swiper-pagination-color: var(--gold);
    --swiper-pagination-bullet-size: 12px;
    --swiper-pagination-bullet-inactive-color: var(--off-white);
    --swiper-pagination-bullet-inactive-opacity: 0.65;
    --swiper-pagination-bottom: 1rem;

    --swiper-navigation-sides-offset: var(--space-16);
    --swiper-navigation-color: var(--gold);

    --swiper-navigation-size: 32px;

    width: 100%;
    height: 240px;
}

.mySwiper {
    margin-inline: auto;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-3);
    
}

.swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media screen and (min-width: 30em) {
    .swiper {    
        width: 100%;
        height: 320px;
    }
}

@media screen and (min-width: 45em) {
    .swiper {    
        width: 100%;
        height: 360px;
    }
}

@media screen and (min-width: 60em) {
    .swiper {
        --swiper-navigation-sides-offset: var(--space-32);
        --swiper-navigation-size: 44px;

        width: 100%;
        height: 480px;
    }
}

@media screen and (min-width: 73.75em) {
    .mySwiper {
        border-radius: var(--border-radius-xl);
    }
}

@media screen and (min-width: 80em) {
    .swiper {    
        width: 1024px;
        height: 520px;
    }
}

@media screen and (min-width: 96em) {
    .swiper {    
        width: 1180px;
        height: 600px;
    }
}


/*
========================================================== 
    PROMOTIONS PAGE
==========================================================
*/
.promotions .heading-section {
    line-height: var(--leading-none);
}

.promotion-gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, min-content);
    justify-items: center;
    column-gap: 0rem;
    row-gap: var(--space-48);
    align-items: start;
}

/*.first-item {*/
/*    grid-column: 1 / 2;*/
/*    grid-row: 1 / 2;*/
    /* justify-self: end; */
/*}*/

/*.second-item {*/
/*    grid-column: 1 / 2;*/
/*    grid-row: 2 / 3;*/
/*    justify-self: end;*/
/*}*/

.third-item {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    /*justify-self: end;*/
}


.promotions .text-block:nth-of-type(1) {
    text-align: center;
}

.promotions .content-box {
    display: flex;
    flex-flow: column;
    align-items: center;
    max-width: 100%;
    height: auto;
    padding: var(--space-8);
    background-color: var(--white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    border: 1px solid var(--grey-1);
}

.promotions .heading-tertiary {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.promotions .heading-topic {
    color: var(--grey-5);
    margin-bottom: 1rem;
}

.promotions .heading-minor {
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.5px;
    margin-bottom: 1.125rem;
}

.promotions .divider {
    height: 1px;
    width: 96px;
    background-color: var(--gold);
    margin-bottom: 1.5rem;
}

.promo-poster {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-3);
}

.promotion-gallery .text-list {
    max-width: 100%;
    padding-left: 0;
    padding-inline: 8px;
    margin-bottom: 2rem;
    text-align: center;
}

.promotion-gallery .text-list-item {
    font-size: var(--font-base);
    line-height: var(--leading-normal);
    max-width: 100%;
    color: var(--grey-6);
}

.promotion-gallery .text-list-item:where(:not(:last-child)) {
    margin-bottom: 1.5rem;
}

.promotion-gallery .text-list-item span {
    display: block;
    font-weight: 600;
}


/*.promo_poster.bonus {*/
/*    width: 420px;*/
/*    height: 400px;*/
/*}*/


.promo-video-wrapper {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    box-shadow:var(--shadow-3);
    overflow: hidden;
  }
  
  .promo-video {
    display: block;
    max-width: inherit;
    height: inherit;
  }


.button-register {
    max-width: max-content;
    margin-bottom: var(--space-24);
    background-color: var(--blue-bold);
    color: #ffffff;
    text-decoration: none;
    padding: 24px 32px;
    border-radius: 1.125rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.75px;
    position: relative;
    overflow: hidden;
    outline: none;
    box-shadow: var(--shadow-1);
    z-index: 1;
    transition: color 400ms ease-out 200ms,
        box-shadow 250ms ease-out 90ms;
}

.button-register-label {
    position: relative;
    z-index: 3;
}

.button-register::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background-color: var(--blue-light);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple-effect 3s infinite;
    z-index: 2;
}

.button-register:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--gold-light);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ripple-once 900ms 1;
    z-index: 2;
    opacity: 0;
}

.button-register:hover {
    color: var(--gold);
    box-shadow: var(--shadow-5);
}

/*.button-register:hover .button-register-label {*/
/*    color: var(--gold);*/
/*}*/

@keyframes ripple-effect {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }

    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

@keyframes ripple-once {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }

    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}


@media screen and (min-width: 30em) {
    .promotion-gallery .text-list {
        padding-inline: var(--space-16);
    }

    .promotion-gallery .text-list-item {
        line-height: var(--leading-relaxed);
    }

    .promotion-gallery .text-list-item:where(:not(:last-child)) {
        margin-bottom: var(--space-20);
    }

}

@media screen and (min-width: 37.5em) {
    .promotions .content-box {
        padding: var(--space-12);
    }
}

@media screen and (min-width: 45em) {
    .promotions .content-box {
        max-width: 90%;
        padding: var(--space-16);
      }

    .promotion-gallery .text-list {
        max-width: 90%;
        padding-inline: 8px;
    }
}

@media screen and (min-width: 60em) {
    .promotion-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        justify-items: center;
        align-items: start;
        column-gap: var(--space-16);
        row-gap: var(--space-0);
    }
    
    /*.first-item-item {*/
    /*    grid-column: 1 / 2;*/
    /*    grid-row: 1 / 2;*/
        /* justify-self: start; */
    /*}*/
    
    /*.second-item-item {*/
    /*    grid-column: 1 / 2;*/
    /*    grid-row: 2 / 3;*/
    /*    justify-self: end;*/
    /*}*/
    
    .third-item {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        /* justify-self: end; */
    }
    
    
    .promotions .text-block:nth-of-type(1) {
        text-align: center;
    }   
    
    .promotions .content-box {
        display: flex;
        flex-flow: column;
        align-items: center;
        max-width: max(90%, 400px);
        height: auto;
        padding: var(--space-12);
        background-color: var(--white);
        border-radius: 1rem;
        box-shadow: var(--shadow-1);
        overflow: hidden;
        border: 1px solid var(--grey-1);
    }
    
    .promotions .heading-tertiary {
        color: var(--grey-7);
        font-size: 2rem;
        font-weight: 700;
        margin-top: 2.5rem;
        margin-bottom: 1.5rem;
    }
    

    .promotions .divider {
        height: 1px;
        width: 96px;
        background-color: var(--gold);
        margin-bottom: 1.5rem;
    }
    
    .promotion-gallery .text-list {
        width: 560px;
        padding-inline: 2.5rem;
        padding-block: 0;
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .promotion-gallery .text-list-item {
        font-size: var(--font-base);
        line-height: var(--leading-normal);
        max-width: 100%;
        color: var(--grey-6);
    }
    
    .promotion-gallery .text-list-item:where(:not(:last-child)) {
        margin-bottom: 1.5rem;
    } 
}

@media screen and (min-width: 73.75em) {
    .promotion-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        justify-items: center;
        align-items: start;
        column-gap: 0rem;
        row-gap: var(--space-0);
    }

    /*.first-item {*/
    /*    grid-column: 1 / 2;*/
    /*    grid-row: 1 / 2;*/
    /*}*/
    
    /*.second-item {*/
    /*    grid-column: 1 / 2;*/
    /*    grid-row: 2 / 3;*/
    /*    justify-self: end;*/
    /*}*/
    
    .third-item {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    
    .promotions .content-box {
        max-width: max(90%, 500px);
    }
}

@media screen and (min-width: 80em) {
    .promotion-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        /*justify-items: unset;*/
        align-items: start;
        column-gap: var(--space-0);
        row-gap: var(--space-0);
    }
    
    /*.first-item {*/
    /*    grid-column: 1 / 2;*/
    /*    grid-row: 1 / 2;*/
    /*}*/
    
    /*.second-item {*/
    /*    grid-column: 1 / 2;*/
    /*    grid-row: 2 / 3;*/
    /*    justify-self: end;*/
    /*}*/
    
    .third-item {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }  
    
    .promotions .content-box {
        display: flex;
        flex-flow: column;
        align-items: center;
        max-width: 720px;
        height: auto;
        padding: var(--space-16);
        background-color: var(--white);
        border-radius: 1.25rem;
        box-shadow: var(--shadow-1);
        overflow: hidden;
        border: 1px solid var(--grey-1);
    }
    
    .promotions .heading-tertiary {
        color: var(--grey-7);
        font-size: 2rem;
        font-weight: 700;
        margin-top: 2.5rem;
        margin-bottom: 1.5rem;
    }
    

    .promotions .divider {
        height: 1px;
        width: 96px;
        background-color: var(--gold);
        margin-bottom: 1.5rem;
    }
    
    
    .promotion-gallery .text-list {
        width: 600px;
        padding-inline: 1rem;
        padding-block: 0;
        margin-bottom: 2rem;
        text-align: center;
    }
    
    .promotion-gallery .text-list-item {
        font-size: var(--font-base);
        line-height: var(--leading-normal);
        max-width: 100%;
        color: var(--grey-6);
    }
    
    .promotion-gallery .text-list-item:where(:not(:last-child)) {
        margin-bottom: 1.5rem;
    }  
}

@media screen and (min-width: 96em) {

    .promotion-gallery {
        column-gap: var(--space-80);
    }

    .promotions .heading-section + .text-body {
        font-size: var(--font-md);
        font-weight: var(--font-300);
    }

    .promotions .content-box {
        padding: 1.25rem;
        border-radius: var(--border-radius-xl);
    }

    .promotion-gallery .text-list {
        width: 600px;
    }

    .promotion-gallery .text-list-item {
        font-size: 1.125rem;
        line-height: var(--leading-normal);
        max-width: 100%;
        color: var(--grey-6);
    }
}

@media screen and (min-width: 120em) {
    .promo-poster {
      object-fit: fill;
    }
}


/*
========================================================== 
    VIDEO PLAYER
==========================================================
*/
.plyr {
    --plyr-color-main: var(--blue-bold);
    --plyr-video-control-color: var(--gold);
}

.plyr--video.plyr--stopped .plyr__controls {
    display: none;
}

.plyr--video.plyr--playing .plyr__controls {
    display: flex;
}

.plyr__controls__item.plyr__time--current.plyr__time {
    --plyr-video-time-color: var(--white);

    color: var(--plyr-video-time-color);
}


/*
========================================================== 
    CONTACTS PAGE
==========================================================
*/
.contacts .heading-section {
    text-align: center;
    line-height: var(--leading-none);
}

.contacts .heading-tertiary {
    color: var(--grey-6);
    font-weight: 500;
    margin-bottom: var(--space-16);
}

.contacts > .flex-layout {
    flex-flow: column;
    gap: var(--space-48)    
}

.contacts .form-wrapper {
    width: 100%;
}


.form-notice {
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--font-sm);
    margin-bottom: 0;
    color: var(--grey-4);
    text-transform: none;
}

.form-notice-icon {
    font-size: var(--font-md);
    color: var(--blue-light);
    margin-right: 4px;
}


.form-input-group {
    display: flex;
    flex-flow: column;
}

.form-input-group:not(:last-of-type) {
    margin-bottom: 1.5rem;
}


.form-input-label {
    font-size: var(--font-sm);
    font-weight: var(--font-500);
    letter-spacing: var(--tracking-widest);
    color: var(--grey-6);
    margin-bottom: 0.5rem;
}

.form-input-field {
    font-size: var(--font-base);
    font-weight: var(--font-300);
    line-height: var(--leading-none);
    letter-spacing: 0.5px;
    padding: var(--space-8) var(--space-12);
    color: var(--grey-7);
    background-color: var(--off-white);
    border-radius: 0.5rem;
    border: 2px solid var(--blue-faint);
    box-shadow: none;
}

.form-input-field:focus-visible:where(:not([type="submit"])) {
    background-color: var(--white);
    border: 2px solid var(--gold);
    box-shadow: var(--shadow-3);
    outline: none;
}

.form-input-field:valid {
    background-color: var(--white);
    border-color: var(--blue-light);
}

.form-input-field::placeholder {
    font-size: 14px;
    color: var(--grey-4);
}


.form-submit-button {
    font-family: var(--font-body);
    font-size: var(--font-base);
    font-weight: 600;
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wide);
    width: min-content;
    background-color: var(--blue);
    color: var(--white);
    padding: 1.125rem 1.75rem;
    border-radius: var(--border-radius-md);
    border: none;
}

.form-submit-button:hover {
    color: var(--gold);
    background-color: var(--blue);
    box-shadow: var(--shadow-2);
}

.contact-info .flex-layout {
    gap: var(--space-12);
}

.contact-info .text-body,
.contact-info .text-box a {
    color: var(--grey-5);
}

.contact-info .physical-address,
.contact-info .postal-address,
.contact-info .email-address {
    margin-bottom: var(--space-24);
}

.contact-info .phone-number {
    margin-bottom: var(--space-40);
}

.contact-info .physical-address br {
    display: inline;
}


.email-address .flex-layout,
.phone-number .flex-layout {
    align-items: center;
}

.physical-address .flex-layout,
.postal-address .flex-layout {
    align-items: start;
}


.contact-info .heading-minor {
    color: var(--grey-6);
    margin-bottom: 1rem;
}

.contact-info .icon-box {
    font-size: 1.25rem;
    color: var(--gold);
    background-color: var(--white);
    padding: 0.5em 9px;
    border-radius: 0.375rem;
    box-shadow: var(--shadow-1);
}

.contact-info .social-media {
    justify-content: start;

}

.contact-info .social-media-link {
    padding-block: var(--space-16);
    padding-inline: calc(var(--space-16) + 2px);

}

.contact-info .social-media-link:hover {
    color: var(--gold);
}


.google-map {
    position: relative;
    width: auto;
    height: 400px;
}

.google-map.full-bleed {
    padding-inline: 0;
}

.google-map iframe {
    height: 100%;
     width: 100%;
}


@media screen and (min-width: 30em) {
    .contact-form {
        background-color: var(--white);
        padding: 2rem;
        border-radius: 1rem;
        border: 1px solid var(--grey-1);
        box-shadow: var(--shadow-1);
    }

    .contact-info > .content-box {
        background-color: var(--white);
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        border: 1px solid var(--grey-1);
        box-shadow: var(--shadow-1);
    }
}

@media screen and (min-width: 37.5em) {
    .contact-form {
        background-color: var(--white);
        padding: 2rem;
        border-radius: 1rem;
        border: 1px solid var(--grey-1);
        box-shadow: var(--shadow-1);
    }

    .contact-info > .content-box {
        background-color: var(--white);
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        border: 1px solid var(--grey-1);
        box-shadow: var(--shadow-1);
    }
}

@media screen and (min-width: 45em) {
    .contacts .heading-section {
        text-align: center;
    }
    
    .contacts .heading-tertiary {
        margin-bottom: 1rem;
    }
    
    .contacts > .flex-layout {
        flex-flow: column;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-48);
    }
    
    .contacts .form-wrapper {
        width: 85%;
    }

    
    .form-notice {
        display: flex;
        align-items: center;
        font-family: var(--font-body);
        font-weight: 400;
        font-size: var(--font-sm);
        margin-bottom: 0;
        color: var(--grey-4);
        text-transform: none;
    }
    
    .form-notice-icon {
        font-size: var(--font-md);
        color: var(--blue-light);
        margin-right: 4px;
    }
    
    
    .form-input-group:not(:last-of-type) {
        margin-bottom: 1.5rem;
    }
    
    .form-input-group:last-of-type(6n-1) {
        margin-bottom: 2.5rem;
    }

    .contact-info {
        width: 85%;
    }

    .contact-info .flex-layout {
        gap: 1rem;
    }
    
    .contact-info .text-body,
    .contact-info .text-box a {
        color: var(--grey-5);
    }
    
    .contact-info .physical-address,
    .contact-info .postal-address,
    .contact-info .email-address {
        margin-bottom: 2rem;
    }
    
    .contact-info .phone-number {
        margin-bottom: 3rem;
    }
    
    
    .email-address .flex-layout,
    .phone-number .flex-layout {
        align-items: center;
    }
    
    .physical-address .flex-layout,
    .postal-address .flex-layout {
        align-items: start;
    }
    
    
    .contact-info .heading-minor {
        color: var(--grey-6);
        margin-bottom: 1rem;
    }
    
    .contact-info .icon-box {
        font-size: 1.25rem;
        color: var(--gold);
        background-color: var(--white);
        padding: 0.5rem;
        border-radius: 0.375rem;
        box-shadow: var(--shadow-1);
    }
    
    .contact-info .social-media {
        display: flex;
        flex-flow: row nowrap;
        justify-content: start;
        gap: var(--space-24);
        padding-left: 0;
    }
    
    .contact-info .social-media-item {
        font-size: 2rem;
    }
    
    .contact-info .social-media-item:hover {
        color: var(--white);
    }
    
    
    .google-map {
        height: 600px;
    }
}

@media screen and (min-width: 60em) {
    .contacts .heading-section {
        text-align: center;
    }
    
    .contacts .heading-tertiary {
        color: var(--grey-6);
        font-weight: 500;
        margin-bottom: 2rem;
    }
    
    .contacts > .flex-layout {
        flex-flow: row;
        justify-content: space-evenly;
        align-items: start;
        gap: 4em;
    }
    
    .contacts .form-wrapper {
        width: 45%;
    }
    
    .contact-form {
        background-color: var(--white);
        padding: 2rem;
        border-radius: 1rem;
        border: 1px solid var(--grey-1);
        box-shadow: var(--shadow-1);
    }
    
    
    .form-notice {
        display: flex;
        align-items: center;
        font-family: var(--font-body);
        font-weight: 400;
        font-size: var(--font-sm);
        margin-bottom: 0;
        color: var(--grey-4);
        text-transform: none;
    }
    
    .form-notice-icon {
        font-size: var(--font-md);
        color: var(--blue-light);
        margin-right: 4px;
    }
    
    
    .form-input-group:not(:last-of-type) {
        margin-bottom: 1.5rem;
    }
    
    .form-input-group:last-of-type(6n-1) {
        margin-bottom: 2.5rem;
    }
    
    .form-input-label {
        color: var(--grey-6);
        margin-bottom: 0.5rem;
        font-weight: 400;
    }
    
    
    .form-input-field:focus-visible:where(:not([type="submit"])) {
        background-color: var(--white);
        border: 2px solid var(--gold);
        box-shadow: var(--shadow-3);
        outline: none;
    }

    .contact-info {
        width: max-content;
      }
    
    .contact-info > .content-box {
        background-color: unset;
        padding: 0;
        border-radius: 0;
        border: none;
        box-shadow: var(--shadow-0);
    }

    .contact-info .flex-layout {
        gap: 1rem;
    }
    
    .contact-info .text-body,
    .contact-info .text-box a {
        color: var(--grey-5);
    }
    
    .contact-info .physical-address,
    .contact-info .postal-address,
    .contact-info .email-address {
        margin-bottom: 2rem;
    }
    
    .contact-info .phone-number {
        margin-bottom: 3rem;
    }

    /* .contact-info .physical-address br {
        display: inline;
    } */
    
    
    .email-address .flex-layout,
    .phone-number .flex-layout {
        align-items: center;
    }
    
    .physical-address .flex-layout,
    .postal-address .flex-layout {
        align-items: start;
    }
    
    
    .contact-info .heading-minor {
        color: var(--grey-6);
        margin-bottom: 1rem;
    }
    
    .contact-info .icon-box {
        font-size: 1.5rem;
        color: var(--gold);
        background-color: var(--white);
        padding: 0.5rem;
        border-radius: 0.375rem;
        box-shadow: var(--shadow-1);
    }
    
    .contact-info .social-media {
        display: flex;
        flex-flow: row nowrap;
        justify-content: start;
        gap: var(--space-24);
        padding-left: 0;
    }
    
    .contact-info .social-media-item {
        font-size: 2rem;
    }
    
    .contact-info .social-media-item:hover {
        color: var(--white);
    }
    
    .google-map {
        position: relative;
        width: auto;
        height: 600px;
    }
    
    .google-map iframe {
        height: 100%;
        width: 100%;
    }
}

@media screen and (min-width: 73.75em) {
    .contacts > .flex-layout {
        flex-flow: row;
        justify-content: space-evenly;
        align-items: start;
        gap: 5em;
    }

    .contacts .form-wrapper {
        width: 45%;
      }
}

@media screen and (min-width: 80em) {
    .contacts .heading-section {
        text-align: center;
    }
    
    .contacts .heading-tertiary {
        color: var(--grey-6);
        font-weight: 500;
        margin-bottom: 2rem;
    }
    
    .contacts > .flex-layout {
        flex-flow: row;
        justify-content: start;
        align-items: start;
        gap: 10em;
    }
    
    .contacts .form-wrapper {
        width: 50%;
    }
    
    .contact-form {
        background-color: var(--white);
        padding: 2.5rem 2rem;
        border-radius: var(--border-radius-xl);
        border: 1px solid var(--grey-1);
        box-shadow: var(--shadow-1);
    }
    
    
    .form-notice {
        display: flex;
        align-items: center;
        font-family: var(--font-body);
        font-weight: 400;
        font-size: var(--font-sm);
        margin-bottom: 0;
        color: var(--grey-4);
        text-transform: none;
    }
    
    .form-notice-icon {
        font-size: var(--font-md);
        color: var(--blue-light);
        margin-right: 4px;
    }
    
    
    .form-input-group:not(:last-of-type) {
        margin-bottom: 1.5rem;
    }
    
    .form-input-group:last-of-type(6n-1) {
        margin-bottom: 2.5rem;
    }
    
    .form-input-label {
        color: var(--grey-6);
        margin-bottom: 0.5rem;
        font-weight: 400;
    }
    
    
    .form-input-field:focus-visible:where(:not([type="submit"])) {
        background-color: var(--white);
        border: 2px solid var(--gold);
        box-shadow: var(--shadow-3);
        outline: none;
    }

    .contact-info {
        width: max-content;
      }
    
    .contact-info > .content-box {
        background-color: unset;
        padding: 0;
        border-radius: 0;
        border: none;
        box-shadow: var(--shadow-0);
    }

    .contact-info .flex-layout {
        gap: 1rem;
    }
    
    .contact-info .text-body,
    .contact-info .text-box a {
        color: var(--grey-5);
    }
    
    .contact-info .physical-address,
    .contact-info .postal-address,
    .contact-info .email-address {
        margin-bottom: 2rem;
    }
    
    .contact-info .phone-number {
        margin-bottom: 3rem;
    }

    /* .contact-info .physical-address br {
        display: inline;
    } */
    
    
    .email-address .flex-layout,
    .phone-number .flex-layout {
        align-items: center;
    }
    
    .physical-address .flex-layout,
    .postal-address .flex-layout {
        align-items: start;
    }
    
    
    .contact-info .heading-minor {
        color: var(--grey-6);
        margin-bottom: 1rem;
    }
    
    .contact-info .icon-box {
        font-size: 1.5rem;
        color: var(--gold);
        background-color: var(--white);
        padding: 0.5rem;
        border-radius: 0.375rem;
        box-shadow: var(--shadow-1);
    }
    
    .contact-info .social-media {
        display: flex;
        flex-flow: row nowrap;
        justify-content: start;
        gap: var(--space-24);
        padding-left: 0;
    }
    
    .contact-info .social-media-item {
        font-size: 2rem;
    }
    
    .contact-info .social-media-item:hover {
        color: var(--white);
    }
    
    .google-map {
        position: relative;
        width: auto;
        height: 600px;
    }
    
    .google-map iframe {
        height: 100%;
        width: 100%;
    }
}

@media screen and (min-width: 90em) {
    .contact-form {
        padding: 3.25rem 2.5rem;
    }
}

@media screen and (min-width: 96em) {
    .contacts > .flex-layout {
        flex-flow: row;
        justify-content: center;
        align-items: start;
        gap: 12rem;
    }

    .contacts .form-wrapper {
        width: 45%;
    }

    .contact-form {
        padding: 3.5rem;
    }

    .google-map {
        height: 800px;
    }
}

@media screen and (min-width: 120em) {
    .contacts .form-wrapper {
        width: 40%;
    }

    
    .contact-form {
        padding: 4rem;
    }
}

/*
========================================================== 
    MODALS
==========================================================
*/

/* Promotions Modal */
.promotions-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(18, 18, 18, .95);
    overflow: hidden;
    z-index: 150000;
}

.promotions-modal .modal-content {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 200000;
    margin-top: 0;
}

.promotions-modal .image-box {
    max-width: 85%;
    height: auto;
    padding-inline: var(--space-12);
    padding-block: var(--space-12);
    border-radius: var(--border-radius-md);
    background-color: var(--gold);
}

.promotions-modal .promotion-poster {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-2);
}


.promotions-modal .modal-close-button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: var(--space-16);
    right: var(--space-16);
    width: var(--space-48);
    height: var(--space-48);
    border-radius: 50%;
    font-size: var(--font-xl);
    text-align: center;
    color: var(--gold);
    background-color: var(--blue);
    z-index: 210000;
}

.promotions-modal .modal-close-button:hover,
.promotions-modal .modal-close-button:hover {
    color: var(--red);
    background-color: var(--blue-dark);
}

.promotions-modal .ri-close-fill {
    color: inherit;
    font-size: inherit;
}

@keyframes zoom-with-opacity {
    from {
        transform: scale(0.25);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-opacity {
    animation: zoom-with-opacity 1s;
}

@media screen and (min-width: 30em) {
    
    .promotions-modal .image-box {
        max-width: 65%;
        height: auto;
    }

    .promotions-modal .modal-close-button {
        top: var(--space-32);
        right: var(--space-32)
    }
}

@media screen and (min-width: 37.5em) {
    
    .promotions-modal .image-box {
        max-width: 55%;
        height: auto;
    }
}

@media screen and (min-width: 45em) {
    
    .promotions-modal .image-box {
        max-width: 42.5%;
        height: auto;
    }
}

@media screen and (min-width: 50em) {
    .promotions-modal .image-box {
        max-width: 40%;
        height: auto;
    }
    
    .promotions-modal .modal-close-button {
        top: var(--space-40);
        right: var(--space-40)
    }
}

@media screen and (min-width: 60em) {
    .promotions-modal .image-box {
        max-width: 35%;
        height: auto;
    }
}

@media screen and (min-width: 73.75em) {
    .promotions-modal .image-box {
        max-width: 30%;
        height: auto;
    }
}

@media screen and (min-width: 80em) {

    .promotions-modal .image-box {
        max-width: 27.5%;
        height: auto;
    }
    
    .promotions-modal .modal-close-button {
        top: 2rem;
        right: 2rem;
        font-size: var(--font-xl);
        width: var(--space-48);
        height: var(--space-48);
    }
}

@media screen and (min-width: 90em) {

    .promotions-modal .image-box {
        max-width: 32.5%;
        height: auto;
    }

}

@media screen and (min-width: 96em) {

    .promotions-modal .image-box {
        max-width: 30%;
        height: auto;
    }

}

@media screen and (min-width: 120em) {

    .promotions-modal .image-box {
        max-width: 26%;
        height: auto;
    }

}


/*
====================================
Recent Jackpot Modal 
====================================
*/
.recent-jackpots-modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    margin-left: 0;
    background-color: rgba(18, 18, 18, .95);
    z-index: 100; 
    overflow: hidden;
}

.recent-jackpots-modal .modal-content {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: center;
    gap: 3rem;
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: var(--space-48);
    padding-bottom: var(--space-48);
    z-index: 200;
    overflow-y: scroll;
}

.recent-jackpots-modal .image-box {
    text-align: center;
    margin: 0;
    position: relative;
    background-color: #fec904;
    padding: var(--space-12);
    border-radius: var(--border-radius-md);
    max-width: 80%;
    height: auto;
}

.recent-jackpots-modal .jackpot-poster {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-3);
}

.recent-jackpots-modal .close-button {
    font-size: 2rem;
    line-height: var(--leading-none);
    color: var(--gold);
    background-color: var(--blue);
    border-radius: var(--border-radius-full);
    border: none;
    padding: 11px 12px;
    opacity: 1;  
}


.recent-jackpots-modal .close-button:hover,
.recent-jackpots-modal .close-button:focus {
    color: var(--red);
    background-color: var(--blue-faint);
    cursor: pointer;
    opacity: 1;
}

/* Add Zoom Animation */
@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.animate {
    animation: zoom 0.6s
}

@media screen and (min-width: 30em) {
    .recent-jackpots-modal .image-box {
        max-width: 75%;
    }
}

@media screen and (min-width: 37.5em) {
    .recent-jackpots-modal .modal-content {
        padding-top: var(--space-56);
    }
    
    .recent-jackpots-modal .image-box {
        max-width: 50%;
    }

    .recent-jackpots-modal .close-button {
        position: fixed;
        right: var(--space-32);
        top: var(--space-32);
    }
}

@media screen and (min-width: 45em) {
    .recent-jackpots-modal .modal-content {
        flex-flow: column;
        justify-content: start;
        gap: var(--space-56);
        padding-top: var(--space-64);
    }
    
    .recent-jackpots-modal .image-box {
        max-width: 45%;
    }

}

@media screen and (min-width: 50em) {
    .recent-jackpots-modal .image-box {
        max-width: 42.5%;
    }
}

@media screen and (min-width: 60em) {
    .recent-jackpots-modal {
        overflow: hidden;
    }
    
    .recent-jackpots-modal .modal-content {
        flex-flow: row nowrap;
        justify-content: center;
        gap: var(--space-64);
        padding-top: var(--space-0);
        padding-bottom: var(--space-0);
        overflow: hidden;
    }
    
    .recent-jackpots-modal .image-box {
        max-width: 32.5%;
    }
    
}

@media screen and (min-width: 73.75em) {
    .recent-jackpots-modal .modal-content {
        gap: var(--space-72);
    }
}

@media screen and (min-width: 80em) {
    .recent-jackpots-modal .modal-content {
        gap: var(--space-96);
    }

    .recent-jackpots-modal .image-box {
        max-width: 25%;
    }
    
    .recent-jackpots-modal .close-button {
        top: var(--space-48);
        right: var(--space-48);
    }
}

@media screen and (min-width: 90em) {

    .recent-jackpots-modal .modal-content {
        gap: var(--space-96);
    }

    .recent-jackpots-modal .image-box {
        max-width: 30%;
    }
}

@media screen and (min-width: 120em) {

    .recent-jackpots-modal .modal-content {
        gap: var(--space-128);
    }

    .recent-jackpots-modal .image-box {
        max-width: 24%;
    }

}



/*
========================================================== 
    PRIVACY POLICY
==========================================================
*/

.privacy-policy > .text-block {
    text-align: center;
    margin-bottom: 3.5rem;
}

.privacy-policy > .text-block .text-body {
    width: 30ch;
    margin-inline: auto;
}

.privacy-policy .heading-tertiary {
    margin-bottom: 0.5rem;
}

.privacy-policy .content-box .text-block {
    width: 100%;
}

.privacy-policy .content-box .text-block:first-of-type {
    margin-bottom: var(--space-32);
}

.privacy-policy .content-box .text-body:not(:last-of-type) {
    margin-bottom: var(--space-16);
}

@media screen and (min-width: 30em) {
    .privacy-policy .content-box {
        display: flex;
        flex-flow: column;
        align-items: center;
        width: fit-content;
        margin-inline: auto;
        padding: var(--space-0) var(--space-16);
    }
}

@media screen and (min-width: 37.5em) {
    .privacy-policy .content-box {
        background-color: var(--white);
        padding: 3rem 2.5rem;
        border: 1px solid var(--grey-1);
        border-radius: 1.5rem;
        box-shadow: var(--shadow-1);
    }
}

@media screen and (min-width: 45em) {
    .privacy-policy .content-box {
        width: max-content;
        padding: 3.5rem 3rem;
    }
    
    .privacy-policy > .text-block:first-of-type {
        text-align: center;
    }
    
    .privacy-policy > .text-block .text-body {
        max-width: 50%;
        margin-inline: auto;
    }

    .privacy-policy .content-box .text-block {
        width: 50ch;
    }
}

@media screen and (min-width: 60em) {
    .privacy-policy .content-box {
        width: min-content;
        margin-inline: auto;
        padding: 4.5rem 5rem;

    }
    
    .privacy-policy > .text-block:first-of-type {
        text-align: center;
    }
    
    .privacy-policy > .text-block .text-body {
        margin-inline: auto;
    }

    .privacy-policy .content-box .text-block {
        width: 57ch;
    }
}

@media screen and (min-width: 80em) {
    .privacy-policy .content-box {
        padding: 4.5rem 5rem;
        border-radius: 2rem;
    }

    .privacy-policy .content-box .text-block {
      width: 64ch;
    }
  }


/*
========================================================== 
    PAGE FOOTER SECTION
==========================================================
*/
.page-footer {
    display: flex;
    flex-flow: column nowrap;
    align-items: start;
    background-color: var(--blue-dark);

    padding-top: 6rem;
}

.page-footer .brand-logo {
    display: block;
    margin-bottom: 1.5rem;
}

.page-footer .brand-logo-image {
    height: 80px;
    /* border: 6px solid var(--gold); */
    border-radius: 50%;
}

.page-footer .content-box {
    padding-bottom: 3.5rem;
}

.page-footer .navigation-menu {
    background-color: transparent;
    margin-bottom: var(--space-48);
}

.page-footer  .navigation-menu-canvas {
    --navigation-menu-canvas-gap: var(--space-24);
}

.page-footer .navigation-link {
    --navigation-link-color: var(--grey-2);
}

.page-footer .footer-heading {
    font-family: var(--font-body);
    font-size: var(--font-md);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.025rem;
    width: 70%;
    margin-top: 0;
    margin-bottom: 2rem;
    color: var(--off-white);
}

.page-footer .heading-minor {
    margin-bottom: var(--space-16);
}


.page-footer .social-media {
    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
    gap: 1.5rem;
    padding-left: 0;
}

.page-footer .social-media-link {
    display: inline-block;
    font-size: var(--font-xl);
    color: var(--gold-dark);
    padding-inline: 12px;
    padding-block: 12px;
    background-color: unset;
    box-shadow: none;
}

.page-footer .social-media-link:hover {
    color: var(--gold);
    background-color: transparent;
}

.page-footer .flex-layout {
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.5rem;
}

.page-footer .divider-horizontal {
    height: 1px;
    width: 100%;
    background-color: var(--grey-6);
}

.page-footer .divider-vertical {
    height: 1rem;
    width: 1px;
    background-color: var(--grey-5);
}

.page-footer .flex-layout .text-body {
    font-size: 0.875rem;
}

.privacy-policy-link {
    display: block;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--grey-4);
}

.privacy-policy-link:hover {
    color: var(--gold-dark);
}


.regulations {
    max-width: 100%;
    padding-block: var(--space-12);
    padding-inline: var(--grid-margin);
    background-color: var(--inverse-component);
}

.regulations .flex-layout {
    justify-content: start;
    align-items: center;
    gap: var(--space-16);
}

.regulations .image-box {
    max-width: var(--space-36);
    height: fit-content;
    padding-inline: var(--space-4);
    padding-block: 2px;
    border-radius: 4px;
    background-color: var(--grey-3);
}

.regulations .magla-logo {
    height: auto;
    max-width: 100%;
    display: block;
}

.regulations .text-block .text-body {
    font-size: 12px;
    font-weight: var(--font-500);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wider);
    color: var(--grey-4);
}

.regulations .icon-box {
    display: flex;
    border: 3px solid var(--grey-3);
    border-radius: 100%;
    padding-block: 7px;
    padding-inline: 0px;
}

.regulations .icon-box .text-body{
    font-size: 0.875rem;
    font-weight: var(--font-600);
    line-height: var(--leading-none);
    color: var(--grey-3);
    transform: translate(4px, 2px);
}

.regulations .ri-add-fill {
    font-size: var(--font-base);
    color: var(--grey-3);
    transform: translate(0px, -1px);
}


@media screen and (min-width: 45em) {
    .page-footer {
        align-items: center;
    }
    
    .page-footer .brand-logo {
        display: block;
        margin-bottom: 1.5rem;
    }
    
    .page-footer .brand-logo-image {
        height: 100px;
        /* border: 6px solid var(--gold); */
        border-radius: 50%;
    }
    
    .page-footer .content-box {
        padding-bottom: 4rem;
    }
    
    .page-footer .navigation-menu {
        background-color: transparent;
        margin-bottom: var(--space-56);
    }

    .page-footer .navigation-menu-canvas {
        --navigation-menu-canvas-gap: var(--space-24);

        flex-flow: row nowrap;
        gap: var(--navigation-menu-canvas-gap);
    }
    
    .page-footer .navigation-link {
        --navigation-link-size: var(--font-sm);
        --navigation-link-color: var(--grey-2);
    }
    
    .page-footer .footer-heading {
        font-size: var(--font-lg);
        width: 100%;
        text-align: center;
    }
    
    .page-footer .heading-minor {
        margin-bottom: var(--space-16);
    }
    
    
    .page-footer .social-media {
        justify-content: center;
        gap: 2rem;
    }
    
    .page-footer .social-media-link:hover {
        color: var(--gold);
    }
    
    .page-footer .flex-layout {
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
    
    .page-footer .divider-horizontal {
        height: 1px;
        width: 100%;
        background-color: var(--grey-6);
    }
    
    .page-footer .divider-vertical {
        height: 1rem;
        width: 1px;
        background-color: var(--grey-5);
    }
    
    .page-footer .flex-layout .text-body {
        font-size: 0.875rem;
    }
    
    .privacy-policy-link {
        display: block;
        font-size: 0.875rem;
        line-height: 1;
        color: var(--grey-4);
    }
    
    .privacy-policy-link:hover {
        color: var(--gold-dark);
    }

    .regulations .flex-layout {
        justify-content: center;
    }
}

@media screen and (min-width: 60em) {
    .page-footer {
        align-items: center;
    }
    
    .page-footer .brand-logo {
        display: block;
        margin-bottom: 1.5rem;
    }
    
    .page-footer .brand-logo-image {
        height: 100px;
        /* border: 6px solid var(--gold); */
        border-radius: 50%;
    }
    
    .page-footer .content-box {
        padding-bottom: 4rem;
    }
    
    .page-footer .navigation-menu {
        background-color: transparent;
        margin-bottom: var(--space-56);
    }
    
    .page-footer .navigation-link {
        --navigation-link-color: var(--grey-2);
    }
    
    .page-footer .footer-heading {
        font-size: var(--font-lg);
        width: 100%;
        text-align: center;
    }
    
    .page-footer .heading-minor {
        margin-bottom: var(--space-16);
    }
    
    
    .page-footer .social-media {
        justify-content: center;
        gap: 2rem;
    }
    
    .page-footer .social-media-link {
        padding-inline: 12px;
        padding-block: 12px;

    }
    
    .page-footer .social-media-link:hover {
        color: var(--gold);
    }
    
    .page-footer .flex-layout {
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
    
    .page-footer .divider-horizontal {
        height: 1px;
        width: 100%;
        background-color: var(--grey-6);
    }
    
    .page-footer .divider-vertical {
        height: 1rem;
        width: 1px;
        background-color: var(--grey-5);
    }
    
    .page-footer .flex-layout .text-body {
        font-size: 0.875rem;
    }
    
    .privacy-policy-link {
        display: block;
        font-size: 0.875rem;
        line-height: 1;
        color: var(--grey-4);
    }
    
    .privacy-policy-link:hover {
        color: var(--gold-dark);
    }   
}

@media screen and (min-width: 80em) {
    .page-footer {
        align-items: center;
    }
    
    .page-footer .brand-logo {
        display: block;
        margin-bottom: 1.5rem;
    }
    
    .page-footer .brand-logo-image {
        height: 100px;
        /* border: 6px solid var(--gold); */
        border-radius: 50%;
    }
    
    .page-footer .content-box {
        padding-bottom: 4rem;
    }
    
    .page-footer .navigation-menu {
        background-color: transparent;
        margin-bottom: var(--space-56);
    }
    
    .page-footer .navigation-link {
        --navigation-link-color: var(--grey-2);
    }
    
    .page-footer .footer-heading {
        font-size: var(--font-lg);
        width: 100%;
        text-align: center;
    }
    
    .page-footer .heading-minor {
        margin-bottom: var(--space-16);
    }
    
    
    .page-footer .social-media {
        justify-content: center;
        gap: 2rem;
    }
    
    .page-footer .social-media-link {
        padding-inline: 12px;
        padding-block: 12px;

    }
    
    .page-footer .social-media-link:hover {
        color: var(--gold);
    }
    
    .page-footer .flex-layout {
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
    
    .page-footer .divider-horizontal {
        height: 1px;
        width: 100%;
        background-color: var(--grey-6);
    }
    
    .page-footer .divider-vertical {
        height: 1rem;
        width: 1px;
        background-color: var(--grey-5);
    }
    
    .page-footer .flex-layout .text-body {
        font-size: 0.875rem;
    }
    
    .privacy-policy-link {
        display: block;
        font-size: 0.875rem;
        line-height: 1;
        color: var(--grey-4);
    }
    
    .privacy-policy-link:hover {
        color: var(--gold-dark);
    }   
}

@media screen and (min-width: 96em) {
    .page-footer .brand-logo-image {
        height: 128px;
        /* border: 6px solid var(--gold); */
        border-radius: 50%;
    }

    .page-footer .footer-heading {
        margin-bottom: 2.75rem;
    }

    .page-footer .navigation-menu {
        margin-bottom: var(--space-64);
    }

    .page-footer .navigation-link {
        --navigation-link-size: var(--font-base);
    }

    .page-footer .social-media-link {
        display: inline-block;
        font-size: var(--font-hg);
    }
}


/*
========================================================== 
    LIGHTBOX
==========================================================
*/

.lb-outerContainer {
    background: none;
    background-color: var(--blue-light);
    border-radius: var(--border-radius-lg);
}

.lb-container {
    padding: var(--space-8);
    border: none;
}

.lightbox .lb-image {
    border-radius: var(--border-radius-md);
    border: none;
}

.lb-nav a.lb-prev,
.lb-nav a.lb-next {
    width: 30%;
    opacity: 0.75;
}

.lb-nav a.lb-prev {
    background: url(../../images/prev.png) left 48% no-repeat;
}

.lb-nav a.lb-next {
    background: url(../../images/next.png) right 48% no-repeat;
}

.lb-cancel {
    background: url(../../images/loading.gif) no-repeat;
}


/*
========================================================== 
    DARK MODE
==========================================================
*/

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--inverse-background);
    }


    .heading-section,
    .heading-tertiary,
    .heading-topic,
    .heading-minor,
    .heading-accent {
        color: var(--inverse-text-heading);
    }

    .text-body,
    .text-bold,
    .text-italic,
    .text-list-item {
        color: var(--inverse-text-body);
    }


    .navigation-bar {
        --navigation-bar-background: var(--inverse-component);

        box-shadow: var(--shadow-3);
    }

    .slide-in-canvas {
        --slide-in-canvas-background: var(--inverse-component);
    }

    .slide-in-canvas::after {
        --slide-in-canvas-animation-bar-background: var(--blue-light);
    }

    .navigation-link {
        --navigation-link-color: var(--inverse-text-body);
    }

    .slide-in-canvas .is-current {
        --navigation-link-active-color: var(--gold-light);
    
        color: var(--navigation-link-active-color);
        background: none;
    }

    .slide-in-canvas.is-visible .is-current {
        --navigation-link-active-color: var(--gold-light);
    
        color: var(--navigation-link-active-color);
        background-color: var(--inverse-component-rich);
        border-radius: 8px;
        overflow: hidden;
    }

    .navigation-toggle-button {
        background-color: var(--inverse-component-light);
    }

    .navigation-toggle-button.is-toggled {
        color: var(--grey-9);
        background-color: var(--gold-light);
    }

    .navigation-toggle-button.is-toggled .toggle-line:nth-child(2),
    .navigation-toggle-button.is-toggled .toggle-line:nth-child(3) {
        background-color: var(--grey-9);
    }


    .homepage-hero {
        background: var(--inverse-blue-dark);
    }

    .homepage-hero .jackpot-name {
        color: var(--inverse-text-heading);
    }

    .homepage-hero .platinum-value {
        color: var(--gold-light);
    }


    .subpage-hero .text-block {
        background: var(--inverse-blue-dark);
        box-shadow: var(--shadow-2);
    }

    .subpage-hero .jackpot-name {
        color: var(--inverse-text-body);
    }

    .subpage-hero .platinum-value {
        color: var(--gold-light);
    }


    .jackpot-card {
        background-color: var(--inverse-component);
        border-color: var(--inverse-component-rich-dark);
    }

    .jackpot-card.silver-pot,
    .jackpot-card.copper-pot {
        box-shadow: var(--shadow-3);
    }

    .jackpot-card.gold-pot .heading-topic {
        color: var(--inverse-text-body);
    }

    .jackpot-card.gold-pot .heading-minor {
        color: var(--gold-light);
    }

    .jackpot-card.silver-pot .heading-topic,
    .jackpot-card.copper-pot .heading-topic {
        color: var(--inverse-text-secondary);
    }


    .incentive-card {
        background-color: var(--inverse-component);
        border-color: var(--inverse-component-rich-dark);
        box-shadow: var(--shadow-3);
    }

    .incentive-card-heading {
        color: var(--inverse-text-secondary);
    }

    .incentive-card .divider-horizontal {
        background-color: var(--blue-light);
    }


    .last-jackpot {
        background-color: var(--inverse-component);
        box-shadow: var(--shadow-2);
    }

    .last-jackpot .heading-section {
        color: var(--inverse-text-heading);
    }

    .last-jackpot .highlight-text {
        color: var(--gold-light);
    }

    .last-jackpot .icon-box {
        color: var(--gold-light);
    }

    .last-jackpot .date,
    .last-jackpot .location {
        color: var(--gold-light);
    }

    .call-to-action .heading-topic {
        color: var(--inverse-text-secondary);
    }

    .call-to-action .find-button {
        color: var(--grey-9);
        background-color: var(--gold-light);
    }

    .last-jackpot .icon-box {
        background-color: var(--inverse-background-light);
        border-color: var(--inverse-component-rich);
    }


    .help-us .content-box {
        background-color: var(--inverse-component);
        border-color: transparent;
        box-shadow: var(--shadow-3);
    }

    .complaint-card {
        background-color: var(--inverse-component-light);
    }

    .complaint-card .text-body {
        color: var(--inverse-text-secondary);
    }

    .complaint-card .icon-box {
        color: var(--gold-light);
    }

    .help-us .contact-button,
    .help-us .text-block .contact-button {
        color: var(--grey-9);
        background-color: var(--blue-light);
    }


    .promotions .content-box {
        background-color: var(--inverse-component-mid);
        border: 1px solid var(--inverse-component-rich-dark);
        box-shadow: var(--shadow-3);
    }

    .promotions .heading-tertiary {
        color: var(--inverse-text-secondary);
    }

    .promotions .divider {
        background-color: var(--gold-light);
    }

    .promotion-gallery .text-list-item {
        color: var(--inverse-text-body);
    }

    .promotions .heading-minor {
        color: var(--gold-light);
    }


    .promotions-modal .image-box,
    .recent-jackpots-modal .image-box {
        background-color: var(--blue-faint);
    }


    .button-register {
        background-color: var(--blue-dark);
        color: var(--inverse-text-body);
    }


    .follow-us .flex-layout {
        background-color: var(--inverse-component);
        border: 1px solid var(--inverse-component-rich-dark);
    }

    .social-media-link {
        color: var(--gold-light);
        background-color: var(--inverse-component-light);
    }


    .true-wap .content-box {
        background-color: var(--inverse-component);
        border: none;
    }

    .wap-jackpot .heading-tertiary,
    .mystery-jackpot .heading-tertiary {
        color: var(--inverse-text-heading);
    }

    .mystery-jackpot .text-list-item .text-list,
    .mystery-jackpot ol.text-list > .text-list-item {
        color: var(--inverse-text-dark);
    }


    .sites .heading-tertiary {
        color: var(--inverse-text-secondary)
    }

    .sites .divider {
        background-color: var(--inverse-component-rich);
    }

    .site-list .site-list-item {
        color: var(--inverse-text-secondary);
    }

    .site-list .site-list-item::before {
        background-color: var(--inverse-component-rich);
    }

    .site-list .site-list-item:hover {
        color: var(--gold-light);
    }


    .site-card {
        background-color: var(--inverse-component);
        border: 1px solid var(--inverse-component-rich-dark);
    }

    .site-card .heading-tertiary {
        color: var(--inverse-text-secondary);
    }

    .site-card-link {
        color: var(--grey-10);
        background-color: var(--blue-light);
    }

    .site-card-footer .icon-box {
        color: var(--gold-light);
        background-color: var(--inverse-component-rich);
    }


    .best-games .game-card {
        box-shadow: var(--shadow-2);
        border: 1px solid var(--inverse-component-rich-dark);
    }

    .best-games .game-card-description {
        background-color: var(--inverse-component);
    }

    .best-games .game-card-title {
        color: var(--inverse-text-secondary);
    }


    .contact-form {
        background-color: var(--inverse-component);
        border: none;
    }

    .form-input-label {
        color: var(--inverse-text-body);
    }

    .form-input-field {
        color: var(--inverse-text-body);
        background-color: var(--inverse-component-light);
        border-color: var(--inverse-component-rich);
    }

    .form-input-field:focus-visible:where(:not([type="submit"])) {
        background-color: var(--inverse-background-light);
        border-color: var(--gold-light);
    }
    
    .form-input-field:valid {
        background-color: var(--inverse-component-rich);
        border-color: var(--blue-light);
    }
    
    .form-input-field::placeholder {
        color: var(--inverse-text-secondary);
    }

    .form-submit-button {
        background-color: var(--blue-light);
        color: var(--grey-9);
    }

    .form-submit-button:hover {
        color: var(--inverse-text-body);
        background-color: var(--blue);
    }

    .contact-info .icon-box {
        color: var(--gold-light);
        background-color: var(--inverse-component-mid);
    }

    .contact-info .text-body,
    .contact-info .text-box a {
        color: var(--inverse-text-secondary);
    }


    .privacy-policy .content-box {
        background-color: var(--inverse-component);
        border: 1px solid var(--inverse-component-rich-dark);
    }

    .privacy-policy .heading-tertiary {
        color: var(--inverse-text-secondary);
    }


    .page-footer {
        background-color: var(--inverse-component);
    }

    .page-footer .footer-heading {
        color: var(--inverse-text-heading);
    }

    .page-footer .navigation-link {
        --navigation-link-color: var(--inverse-text-body);
    }

    .page-footer .divider-horizontal,
    .page-footer .divider-vertical {
        background-color: var(--inverse-component-rich);
    }

    .page-footer .social-media-link {
        color: var(--gold-light);
        background-color: transparent;
        box-shadow: none;
    }

    .page-footer .social-media-link:hover {
        color: var(--gold);
    }

    .page-footer .flex-layout .text-body,
    .privacy-policy-link {
        color: var(--inverse-text-dark);
    }

    .regulations {
        background-color: var(--inverse-background);
    }

    .regulations .text-block .text-body {
        color: var(--inverse-text-secondary);
    }

    .regulations .icon-box .text-body {
        color: var(--inverse-text-body);
    }

    .regulations .icon-box {
        border-color: var(--inverse-text-dark);
    }

    .regulations .ri-add-fill {
        color: var(--inverse-text-body);
    }
    
}


@media screen and (max-width: 37.5em) and (prefers-color-scheme: dark) {
    .privacy-policy .content-box {
        background-color: transparent;
        border: none;
    }
}


/*
========================================================== 
    ANIMATIONS
==========================================================
*/
/* Remove Transition Delays for Mobile Devices */
@media screen and (max-width: 44.99em) {
    [data-aos][data-aos][data-aos-delay*="0"],
    [data-aos][data-aos][data-aos-delay*="0"].aos-animate {
        transition-delay: unset;
    }
}

[data-aos][data-aos][data-aos-easing="ease"],
body[data-aos-easing="ease"] [data-aos] {
    transition-timing-function: cubic-bezier(.25,.46,.45,.94);
}