/*
========================================================== 
    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: none;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-4: 0 6px 12px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-5: 0 10px 20px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
    --shadow-6: 0 12px 24px rgba(0, 0, 0, 0.10), 0 6px 12px rgba(0, 0, 0, 0.06);
    --shadow-7: 0 16px 32px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.07);
    --shadow-8: 0 20px 40px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.08);
    --shadow-9: 0 28px 56px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.09);
    --shadow-10: 0 36px 72px rgba(0, 0, 0, 0.16), 0 16px 32px rgba(0, 0, 0, 0.10);

    interpolate-size: allow-keywords;
}


/*
========================================================== 
    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-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);

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

.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,
.terms-conditions,
.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,
.terms-conditions .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,
.terms-conditions .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,
    .terms-conditions,
    .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,
    .terms-conditions .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,
    .terms-conditions,
    .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,
    .terms-conditions .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,
    .terms-conditions .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,
    .terms-conditions,
    .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,
    .terms-conditions .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,
    .terms-conditions .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,
    .terms-conditions,
    .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,
    .terms-conditions .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,
    .terms-conditions .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,
    .terms-conditions,
    .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,
    .terms-conditions,
    .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,
    .terms-conditions .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,
    .terms-conditions .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,
    .terms-conditions,
    .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,
    .terms-conditions .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,
    .terms-conditions .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,
    .terms-conditions .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.25;
        letter-spacing: var(--tracking-widest);
        margin-block-end: var(--space-64);
    }

    .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-2);
}

.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: 4.5rem;
        padding-block: 4.5rem;
        box-shadow: var(--shadow-3);
    }

    .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: 3.5rem;
        padding-block: 3rem;
    }

    .silver-pot {
        order: unset;
    }

    .copper-pot {
        order: unset;
        padding-inline: 4.5rem;
    }

    .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: 5rem;
        padding-block: 5rem;
    }

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

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

@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-2);
    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-40);
    }

    .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 {
        line-height: var(--leading-normal);
        max-width: 12ch;
        margin-bottom: 2rem;
        text-align: left;
        margin-inline: 0;
    }

    .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: 0rem;
        text-align: unset;
    }

    .call-to-action .heading-topic {
        font-weight: var(--font-500);
        margin-bottom: 3rem;
    }

}

@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: 0rem;
        text-align: unset;
    }

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

@media screen and (min-width: 120em) {
    .last-jackpot {
        border-radius: var(--border-radius-hg);
    }

    .last-jackpot .flex-layout:only-child {
        flex-flow: row;
        justify-content: start;
        gap: 3rem;
        padding-inline: var(--space-12);
        padding-block: var(--space-8);
        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);
    border: 1px solid var(--grey-2);
    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: 4rem;
}

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

    margin-bottom: 0.75rem;
}


.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 .grid-layout {
    grid-template-columns: repeat(auto-fit, minmax(min-content, 300px));
    grid-gap: var(--space-40);
    max-width: 100%;
}

/* .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 .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 .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 {
        gap: 6rem;
    }
}

@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 {
    }

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

        margin-bottom: 1rem;
    }


    .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 {
    }

    .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(2, 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: 2 / 3;
    /*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(2, 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: 2 / 3;
        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(2, 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: 2 / 3;
        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(2, 1fr);
        grid-template-rows: repeat(1, 1fr);
        justify-items: unset;
        align-items: start;
        column-gap: var(--space-40);
        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: 2 / 3;
        grid-row: 1 / 2;
    }

    .promotions .content-box {
        display: flex;
        flex-flow: column;
        align-items: center;
        max-width: fit-content;
        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: 32%;
    }

}



/*
========================================================== 
    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;
    }
}


/*
========================================================== 
    TERMS & CONDITIONS SECTION
==========================================================
*/
.terms-conditions {
    display: flex;
    flex-flow: column;
    align-items: center;
    height: max-content;
}

.terms-conditions>.text-block {
    text-align: center;
    margin-bottom: 3rem;
}

.terms-conditions .content-box {
    width: 100%;
    padding: var(--space-20);
    background-color: var(--grey-2);
    border: 1px solid var(--grey-1);
    border-radius: var(--border-radius-xl);
}

.tabs {
    display: flex;
    flex-flow: column;
    justify-items: start;
    gap: var(--space-24);
    min-height: max-content;
    border-radius: var(--border-radius-lg);
}

.tabs-menu {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: var(--white);
    border-radius: var(--border-radius-md);
    padding-inline: var(--space-48);
    margin-top: -32px;
    transition: height 200ms ease-out 120ms,
        opacity 100ms ease-out 0ms,
        margin-top 250ms ease-out 120ms,
        padding-block 250ms ease-out 150ms;
}

.tabs-menu.is-expanded {
    height: max-content;
    opacity: 1;
    padding-block: var(--space-40);
    margin-top: 0;
    transition: height 200ms ease-out 20ms,
        opacity 100ms ease-out 100ms,
        margin-top 150ms ease-out 10ms,
        padding-block 250ms ease-out 0ms;
}

.tabs-menu-link {
    display: block;
    width: 100%;
    font-size: var(--text-body-size);
    font-weight: var(--font-500);
    padding-inline: var(--space-40);
    padding-block: var(--space-12);
    color: var(--grey-4);
    border-radius: var(--border-radius-sm);
}

.tabs-menu .tabs-menu-link:hover {
    color: var(--white);
    background-color: var(--blue-faint);
}

.tabs-menu-link:not(:last-of-type) {
    margin-bottom: var(--space-8);
}

.tabs-menu-link:first-of-type {
    margin-bottom: var(--space-24);
}

.tabs-menu-link.is-active,
.tabs-menu-link.is-active:hover {
    font-weight: var(--font-600);
    color: var(--white);
    background-color: var(--blue-light);
}

.tabs-content {
    width: 100%;
    padding-inline: var(--space-16);
    padding-block: var(--space-32);
    background-color: var(--white);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--grey-1);
}

.tabs-content .heading-tertiary {
    margin-bottom: var(--space-20);
}

.tabs-content .text-body {
    --text-body-size: var(--font-base);
    --text-body-weight: var(--font-300);

    width: 100%;
}

.tabs-menu-toggle {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-inline: var(--space-16);
    padding-block: var(--space-12);
    color: var(--white);
    background-color: var(--blue);
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    cursor: pointer;
}

.tabs-menu-toggle-icon {
    display: block;
    font-size: var(--font-md);
    line-height: 1;
}


.terms-conditions .all-terms .text-block {
    margin-bottom: var(--space-0);
}

.all-terms .text-block {
    max-width: 100%;
    padding: var(--space-20) var(--space-12);
    border: 1px solid var(--grey-2);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-1);
}

.all-terms .text-block .heading-topic {
    margin-bottom: 10px;
}


.all-terms .text-block .text-body {
    --text-body-size: var(--font-sm);

    height: 1.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--grey-4);
}

.all-terms .tabs-menu-link {
    padding-inline: var(--space-0);
    padding-block: var(--space-0);
}

.all-terms .tabs-menu-link:not(:last-of-type) {
    margin-bottom: var(--space-24);
}


@media screen and (min-width: 80em) {
    .terms-conditions {
        display: flex;
        flex-flow: column;
        align-items: center;
        height: max-content;
    }


    .terms-conditions .content-box {
        width: max-content;
    }

    .tabs {
        display: flex;
        flex-flow: row;
        align-self: start;
        gap: var(--space-20);
        min-height: max-content;
        border-radius: var(--border-radius-lg);
    }

    .tabs-menu {
        height: max-content;
        overflow: hidden;
        opacity: 1;
        align-self: start;
        padding: var(--space-64) var(--space-40);
        border: 1px solid var(--grey-2);
        margin-top: unset;
    }

    /* .tabs-menu .tabs-menu-link:hover {
        color: var(--grey-1);
        background-color: var(--blue-faint);
    } */

    .tabs-content {
        width: 75ch;
        padding-inline: var(--space-48);
        padding-block: var(--space-64);
        border: 1px solid var(--grey-2);
    }

    .tabs-menu-toggle {
        display: none;
    }

    .all-terms .tabs-menu-link:not(:last-of-type) {
        margin-bottom: var(--space-32);
    }

    .all-terms .text-block {
        max-width: 100%;
        padding: var(--space-28) var(--space-24);
        border: 1px solid var(--grey-2);
    }
}

/*
========================================================== 
    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;
}


.get-help {
    text-align: left;
}

.get-help .text-body,
.get-help .text-list-item {
    --text-body-size: var(--font-sm);
}

.get-help .text-list {
    margin-block: var(--space-16);
}

.get-help .text-list-item:not(:last-child) {
    margin-block-end: 2px;
}


.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;
    }

    .get-help {
        text-align: center;
    }

    .get-help .text-list {
        margin-block: var(--space-8);
    }

    .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) {

    :root {
        --shadow-0: none;

        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 2px rgba(255, 255, 255, 0.04);
        --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.30), 0 0 4px rgba(255, 255, 255, 0.05);
        --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.34), 0 0 6px rgba(255, 255, 255, 0.06);
        --shadow-4: 0 6px 12px rgba(0, 0, 0, 0.36), 0 0 8px rgba(255, 255, 255, 0.07);
        --shadow-5: 0 10px 20px rgba(0, 0, 0, 0.38), 0 0 10px rgba(255, 255, 255, 0.08);
        --shadow-6: 0 12px 24px rgba(0, 0, 0, 0.40), 0 0 12px rgba(255, 255, 255, 0.09);
        --shadow-7: 0 16px 32px rgba(0, 0, 0, 0.42), 0 0 14px rgba(255, 255, 255, 0.10);
        --shadow-8: 0 20px 40px rgba(0, 0, 0, 0.44), 0 0 18px rgba(255, 255, 255, 0.11);
        --shadow-9: 0 28px 56px rgba(0, 0, 0, 0.46), 0 0 22px rgba(255, 255, 255, 0.12);
        --shadow-10: 0 36px 72px rgba(0, 0, 0, 0.48), 0 0 28px rgba(255, 255, 255, 0.14);
        --shadow-11: 0 48px 96px rgba(0, 0, 0, 0.50), 0 0 36px rgba(255, 255, 255, 0.15);
        --shadow-12: 0 64px 128px rgba(0, 0, 0, 0.55), 0 0 48px rgba(255, 255, 255, 0.18);
    }

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


    .heading-section,
    .heading-tertiary,
    .heading-topic,
    .heading-minor,
    .heading-accent {
        color: var(--inverse-text-heading);
    }

    .text-body,
    .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);
    }


    .get-help .text-body {
        color: var(--grey-5)
    }

    .get-help .text-bold {
        color: var(--grey-3)
    }

    .get-help .text-list-item {
        color: var(--grey-4)
    }


    .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);
    }


    .terms-conditions .content-box {
        background-color: var(--inverse-component-mid);
        border: 1px solid var(--inverse-component-rich);
    }

    .tabs-menu,
    .tabs-content {
        border: 1px solid var(--inverse-component-rich-dark);
        background-color: var(--inverse-component-light);
    }

    .all-terms .text-block {
        background-color: var(--inverse-component-mid);
        border: 1px solid var(--inverse-component-rich-dark);
        box-shadow: var(--shadow-0);
    }

    .tabs-menu .tabs-menu-link:hover {
        color: var(--grey-3);
        background-color: var(--inverse-component-rich);
    }

    .tabs-menu .tabs-menu-link.is-active {
        color: var(--grey-1);
        background-color: var(--blue-light);
    }


    .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);
}