@font-face
{
    font-family: "PrimaryFont";
    src: url("../fonts/Roboto.ttf");
}

:root
{
    /* Color [Start] */
    --primary-color: #265184;
    --primary-color-hover: #224770;
    --primary-color-hover-darker: #1E3D5C;
    --primary-color-hover-darkest: #1A3348;

    --secondary-color: #4A90B8;
    --secondary-color-hover: #4686A4;
    --secondary-color-hover-darker: #427C90;
    --secondary-color-hover-darkest: #3E727C;

    --light-color: #FFFFFF;
    --light-color-hover: #F3F3F3;
    --light-color-hover-darker: #EDEDED;
    --light-color-hover-darkest: #E5E5E5;

    --dark-color: #222222;
    --dark-color-hover: #191919;
    --dark-color-hover-darker: #121212;
    --dark-color-hover-darkest: #0B0B0B;

    --gray-color: #888888;
    --gray-color-hover: #777777;
    --gray-color-hover-darker: #666666;
    --gray-color-hover-darkest: #555555;

    --success-color: #28A745;
    --success-color-hover: #218838;
    --success-color-hover-darker: #1E7E34;
    --success-color-hover-darkest: #1C7430;

    --warning-color: #F4B700;
    --warning-color-hover: #E0A700;
    --warning-color-hover-darker: #D19800;
    --warning-color-hover-darkest: #C28900;

    --error-color: #DC3545;
    --error-color-hover: #C82333;
    --error-color-hover-darker: #BD2130;
    --error-color-hover-darkest: #B21F2D;

    --purple-color: #6F42C1;
    --purple-color-hover: #6037A8;
    --purple-color-hover-darker: #562E91;
    --purple-color-hover-darkest: #4C267A;
    /* Color [End] */



    /* Linear Gradients [Start] */
    --primary-gradient-horizontal: linear-gradient(90deg, #265184, #336699);
    --primary-gradient-horizontal-hover: linear-gradient(90deg, #1E3D5C, #2B5A85);
    --primary-gradient-vertical: linear-gradient(180deg, #265184, #1A3348);
    --primary-gradient-vertical-hover: linear-gradient(180deg, #1E3D5C, #142A3A);
    --primary-gradient-diagonal: linear-gradient(135deg, #265184, #336699);
    --primary-gradient-diagonal-hover: linear-gradient(135deg, #1E3D5C, #2B5A85);
    --primary-gradient-smooth: linear-gradient(45deg, #1A3348, #265184, #336699);
    --primary-gradient-smooth-hover: linear-gradient(45deg, #142A3A, #1E3D5C, #2B5A85);
    /* Linear Gradients [End] */



    /* Background Color [Start] */
    --background-color-opacity-10: rgba(0, 0, 0, 10%);
    --background-color-opacity-20: rgba(0, 0, 0, 20%);
    --background-color-opacity-30: rgba(0, 0, 0, 30%);
    --background-color-opacity-40: rgba(0, 0, 0, 40%);
    --background-color-opacity-50: rgba(0, 0, 0, 50%);
    --background-color-opacity-60: rgba(0, 0, 0, 60%);
    --background-color-opacity-70: rgba(0, 0, 0, 70%);
    --background-color-opacity-80: rgba(0, 0, 0, 80%);
    --background-color-opacity-90: rgba(0, 0, 0, 90%);
    --background-color-opacity-100: rgba(0, 0, 0, 100%);
    /* Background Color [End] */



    /* Text Shadow [Start] */
    --text-shadow-primary: 2px 2px 8px #265184;
    --text-shadow-light: 2px 2px 8px #FFFFFF;
    --text-shadow-dark: 2px 2px 8px #222222;
    /* Text Shadow [End] */



    /* Box Shadow [Start] */
    --box-shadow-10: 2px 2px 8px rgba(0, 0, 0, 10%);
    --box-shadow-20: 2px 2px 8px rgba(0, 0, 0, 20%);
    --box-shadow-30: 2px 2px 8px rgba(0, 0, 0, 30%);
    --box-shadow-40: 2px 2px 8px rgba(0, 0, 0, 40%);
    --box-shadow-50: 2px 2px 8px rgba(0, 0, 0, 50%);
    --box-shadow-hover: 2px 8px 25px rgba(0, 0, 0, 15%);
    /* Box Shadow [End] */



    /* Border Radius [Start] */
    --border-radius-xs: 2px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 32px;
    --border-radius-circle: 50%;
    /* Border Radius [End] */



    /* Border Design [Start] */
    --border-width-xs: 1px;
    --border-width-sm: 2px;
    --border-width-md: 3px;
    --border-width-lg: 4px;
    --border-width-xl: 5px;
    --border-style-solid: solid;
    --border-style-dashed: dashed;
    --border-style-dotted: dotted;
    --border-style-double: double;
    --border-style-groove: groove;
    /* Border Design [End] */



    /* Spacing [Start] */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    --spacing-xxxl: 96px;
    --spacing-xxxxl: 128px;
    --spacing-gigantic-sm: 128px;
    --spacing-gigantic-md: 192px;
    --spacing-gigantic-lg: 256px;
    --spacing-gigantic-xl: 384px;
    /* Spacing [End] */



    /* Typography [Start] */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-lg-xl: 26px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 48px;
    --font-size-xxxxl: 64px;
    --font-size-gigantic-sm: 128px;
    --font-size-gigantic-md: 192px;
    --font-size-gigantic-lg: 256px;
    --font-size-gigantic-xl: 384px;
    --font-size-mobile-gigantic-sm: 48px;
    --font-size-mobile-gigantic-md: 64px;
    --font-size-mobile-gigantic-lg: 96px;
    --font-size-mobile-gigantic-xl: 128px;
    --font-weight-lightest: 100;
    --font-weight-lighter: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 500;
    --font-weight-bolder: 600;
    --font-weight-boldest: 700;
    /* Typography [End] */



    /* Transition [Start] */
    --transition-fast: 0.15s ease;
    --transition-base: 0.30s ease;
    --transition-slow: 0.50s ease;
    --transition-slower: 0.75s ease;
    --transition-slowest: 1.00s ease;
    /* Transition [End] */



    /* Animation Duration [Start] */
    --animation-duration-fast: 0.15s;
    --animation-duration-base: 0.30s;
    --animation-duration-slow: 0.50s;
    --animation-duration-slower: 0.75s;
    --animation-duration-slowest: 1.00s;
    /* Animation Duration [End] */



    /* Z-Index [Start] */
    --z-navigation-bar: 500;
    --z-modal-backdrop: 1000;
    --z-modal-container: 1500;
    --z-modal-prioritized-backdrop: 2000;
    --z-modal-prioritized-container: 2500;
    --z-modal-extra-prioritized-backdrop: 3000;
    --z-modal-extra-prioritized-container: 3500;
    /* Z-Index [End] */
}



/* Animation [Start] */
@keyframes SlideFromBottom
{
    0%
    {
        opacity: 0;
        transform: translateY(50px);
    }
    100%
    {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes SlideFromTop
{
    0%
    {
        opacity: 0;
        transform: translateY(-50px);
    }
    100%
    {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes SlideFromRight
{
    0%
    {
        opacity: 0;
        transform: translateX(50px);
    }
    100%
    {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes SlideFromLeft
{
    0%
    {
        opacity: 0;
        transform: translateX(-50px);
    }
    100%
    {
        opacity: 1;
        transform: translateX(0);
    }
}

[Data-Desktop-Animation],
[Data-Mobile-Animation]
{
    opacity: 0;
}

.Slide-B
{
    animation: SlideFromBottom var(--animation-duration-slowest) ease-out forwards;
}

.Slide-T
{
    animation: SlideFromTop var(--animation-duration-slowest) ease-out forwards;
}

.Slide-R
{
    animation: SlideFromRight var(--animation-duration-slowest) ease-out forwards;
}

.Slide-L
{
    animation: SlideFromLeft var(--animation-duration-slowest) ease-out forwards;
}
/* Animation [End] */



/* General [Start] */
*,
*::before,
*::after
{
    margin: 0;
    padding: 0;
    line-height: 1.25;
    user-select: none;
    box-sizing: border-box;
    font-family: "PrimaryFont", sans-serif;
}

html
{
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--light-color-hover-darkest) var(--primary-color);
}

a
{
    text-decoration: none;
}

b
{
    font-weight: var(--font-weight-bold);
}

p
{
    color: var(--dark-color);
}

select
{
    color: var(--dark-color);
    font-weight: var(--font-weight-regular);
    background: var(--light-color);
}

input[type="checkbox"]
{
    appearance: none;
    min-width: 20px;
    min-height: 20px;
    border: 2px var(--border-style-solid) var(--primary-color);
    border-radius: var(--border-radius-circle);
    margin-right: var(--spacing-sm);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

input[type="checkbox"]:checked
{
    border-color: var(--success-color);
    background-color: var(--success-color);
}

input[type="checkbox"]:checked::after
{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--light-color);
    border-radius: var(--border-radius-circle);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type="checkbox"]:hover
{
    border-color: var(--success-color-hover);
}

input[type="checkbox"]:checked:hover
{
    background-color: var(--success-color-hover);
}

.Text-Center
{
    text-align: center;
}
/* General [End] */



/* Fixed Width and Height [Start] */
.Fixed-Width-100
{
    width: 100px;
}

.Fixed-Width-200
{
    width: 200px;
}

.Fixed-Width-300
{
    width: 300px;
}

.Fixed-Width-400
{
    width: 400px;
}

.Fixed-Width-500
{
    width: 500px;
}

.Fixed-Height-100
{
    height: 100px;
}

.Fixed-Height-200
{
    height: 200px;
}

.Fixed-Height-300
{
    height: 300px;
}

.Fixed-Height-400
{
    height: 400px;
}

.Fixed-Height-500
{
    height: 500px;
}
/* Fixed Width and Height [End] */



/* Flex Utilities [Start] */
.Align-Self-Center
{
    text-align: center;
    align-self: center;
}

.Align-Self-Start
{
    align-self: flex-start;
}

.Align-Self-End
{
    align-self: flex-end;
}

.Justify-Self-Center
{
    justify-self: center;
}

.Justify-Self-Start
{
    justify-self: flex-start;
}

.Justify-Self-End
{
    justify-self: flex-end;
}

.Margin-Top-Small
{
    margin-top: var(--spacing-xs);
}

.Margin-Top-Medium
{
    margin-top: var(--spacing-sm);
}

.Margin-Top-Large
{
    margin-top: var(--spacing-md);
}

.Margin-Bottom-Small
{
    margin-bottom: var(--spacing-xs);
}

.Margin-Bottom-Medium
{
    margin-bottom: var(--spacing-sm);
}

.Margin-Bottom-Large
{
    margin-bottom: var(--spacing-md);
}

.Margin-Left-Small
{
    margin-left: var(--spacing-xs);
}

.Margin-Left-Medium
{
    margin-left: var(--spacing-sm);
}

.Margin-Left-Large
{
    margin-left: var(--spacing-md);
}

.Margin-Right-Small
{
    margin-right: var(--spacing-xs);
}

.Margin-Right-Medium
{
    margin-right: var(--spacing-sm);
}

.Margin-Right-Large
{
    margin-right: var(--spacing-md);
}
/* Flex Utilities [End] */



/* Button [Start] */
.Primary-Button
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
    color: var(--light-color);
    border-radius: var(--border-radius-md);
    background: var(--primary-gradient-smooth);
    gap: var(--spacing-sm);
}

.Primary-Button:Hover
{
    cursor: pointer;
    background: var(--primary-gradient-smooth-hover);
}

.Primary-Button.Tight
{
    width: fit-content;
}

.Primary-Button.Small-Padding
{
    padding: var(--spacing-xs) var(--spacing-sm);
}

.Primary-Button-Outline
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: var(--border-width-xs) var(--border-style-solid) var(--primary-color);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
    color: var(--primary-color);
    border-radius: var(--border-radius-md);
    background-color: var(--light-color);
    gap: var(--spacing-sm);
}

.Primary-Button-Outline:Hover
{
    cursor: pointer;
    background-color: var(--light-color-hover);
}

.Primary-Button-Outline.Tight
{
    width: fit-content;
}

.Primary-Button-Outline.Small-Padding
{
    padding: var(--spacing-xs) var(--spacing-sm);
}

.Primary-Button-Outline.No-Border
{
    border: none;
}

.Primary-Button-Outline:Disabled
{
    color: var(--error-color);
    border: var(--border-width-xs) var(--border-style-solid) var(--error-color);
}

.Primary-Button-Outline.Danger
{
    color: var(--error-color);
    border: var(--border-width-xs) var(--border-style-solid) var(--error-color);
}
/* Button [End] */



/* Form [Start] */
.Custom-Form-Container
{
    width: 100%;
    max-width: 500px;
    background-color: var(--light-color);
    padding: var(--spacing-lg);
    box-shadow: var(--box-shadow-30);
    border-radius: var(--border-radius-md);
}

.Custom-Form
{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-md);
}

.Custom-Form.Tight-30
{
    width: 30%;
}

.Custom-Form.Hidden
{
    display: none;
}

.Custom-Form-Group
{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
}

.Custom-Form-Group label
{
    display: block;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
}

.Custom-Form-Group input[type="text"],
.Custom-Form-Group input[type="email"],
.Custom-Form-Group input[type="password"],
.Custom-Form-Group input[type="date"],
.Custom-Form-Group input[type="number"],
.Custom-Form-Group select
{
    width: 100%;
    outline: none;
    padding: var(--spacing-sm);
    font-size: var(--font-size-md);
    border: 1px var(--border-style-solid) var(--dark-color);
    border-radius: var(--border-radius-md);
}

.Custom-Form-Group textarea
{
    width: 100%;
    height: 100px;
    outline: none;
    padding: var(--spacing-sm);
    font-size: var(--font-size-md);
    border: 1px var(--border-style-solid) var(--dark-color);
    border-radius: var(--border-radius-md);
    resize: none;
    scrollbar-width: none;
}

.Custom-Form-Group textarea.Primary-Color
{
    border: 1px var(--border-style-solid) var(--primary-color);
}

.Custom-Form-Group .Checkbox-Label
{
    width: fit-content;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-size-md);
}

.Custom-Form-Double-Group
{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
}

.Custom-Form-Double-Group.Row
{
    flex-direction: row;
}

.Custom-Form-Checkbox-Text-Group
{
    display: inline;
}

.Custom-Form-Checkbox-Text-Group a
{
    color: var(--primary-color);
}

.Custom-Form-Checkbox-Text-Group a:hover
{
    color: var(--primary-color-hover);
    text-decoration: underline;
}

.Custom-Form-Group .Error-Message
{
    display: none;
    color: var(--error-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.Custom-Form-Group.Invalid .Error-Message
{
    display: block;
}

.Custom-Form-Group.Invalid input,
.Custom-Form-Group.Invalid select,
.Custom-Form-Group.Invalid textarea
{
    border-color: var(--error-color);
}

.Custom-Form-Checkbox-Group,
.Custom-Form-Checkbox-Group label
{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: fit-content;
    font-weight: var(--font-weight-regular);
}
/* Form [End] */



/* Tooltip [Start] */
.Custom-Tooltip-Container
{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
}

.Custom-Tooltip
{
    position: relative;
    display: flex;
    align-self: center;
    justify-self: center;
    width: 18px;
    height: 18px;
}

.Custom-Tooltip-Icon
{
    display: inline-block;
    cursor: help;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: var(--light-color);
    border-radius: var(--border-radius-circle);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.Custom-Tooltip-Icon.Primary-Color
{
    background-color: var(--primary-color);
}

.Custom-Tooltip-Icon.Success-Color
{
    background-color: var(--success-color);
}

.Custom-Tooltip-Icon.Error-Color
{
    background-color: var(--error-color);
}

.Custom-Tooltip-Text
{
    visibility: hidden;
    position: absolute;
    text-align: center;
    background-color: var(--dark-color);
    color: var(--light-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
    left: 50%;
    bottom: 125%;
    width: 200px;
    margin-left: -100px;
    opacity: 0;
    transition: opacity var(--animation-duration-base);
}

.Custom-Tooltip:Hover .Custom-Tooltip-Text
{
    visibility: visible;
    opacity: 1;
}
/* Tooltip [End] */



/* Modal [Start] */
.Modal-Backdrop
{
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color-opacity-50);
    z-index: var(--z-modal-backdrop);
    transition: transform var(--transition-base),
    opacity var(--transition-base),
    visibility 0s var(--transition-base);
}

.Modal-Backdrop.Show
{
    opacity: 1;
    visibility: visible;
    transition: transform var(--transition-base),
    opacity var(--transition-base),
    visibility 0s;
}

.Modal-Backdrop.Prioritized
{
    z-index: var(--z-modal-prioritized-backdrop);
}

.Modal-Backdrop.Extra-Pritoritized
{
    z-index: var(--z-modal-extra-prioritized-backdrop);
}

.Modal
{
    opacity: 0;
    max-width: 50%;
    max-height: 90vh;
    overflow: auto;
    display: flex;
    position: fixed;
    flex-direction: column;
    justify-content: flex-start;
    scrollbar-width: none;
    visibility: hidden;
    padding: 0 var(--spacing-md);
    background-color: var(--light-color);
    box-shadow: var(--box-shadow-30);
    border-radius: var(--border-radius-md);
    z-index: var(--z-modal-container);
    transform: scale(90%);
    transition: transform var(--transition-base),
    opacity var(--transition-base),
    visibility 0s var(--transition-base);
    border: 3px var(--border-style-solid) var(--primary-color);
}

.Modal.Show
{
    opacity: 1;
    visibility: visible;
    transform: scale(100%);
    transition: transform var(--transition-base),
    opacity var(--transition-base),
    visibility 0s;
}

.Modal.Prioritized
{
    z-index: var(--z-modal-prioritized-container);
}

.Modal.Extra-Pritoritized
{
    z-index: var(--z-modal-extra-prioritized-container);
}

.Modal.Column
{
    flex-direction: column;
}

.Modal.Row
{
    flex-direction: row;
}

.Modal.Centered
{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Modal.Top-Centered
{
    top: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
}

.Modal-Header
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    gap: var(--spacing-xxl);
}

.Modal-Header-Title-Group
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

.Modal-Header-Title-Icon
{
    width: 32px;
    height: 32px;
}

.Modal-Header-Title-Text
{
    text-align: center;
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-regular);
}

.Modal-Body
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    font-size: var(--font-size-md);
    color: var(--dark-color);
}

.Modal-Body-Text
{
    text-align: center;
    color: var(--dark-color);
    font-size: var(--font-size-lg);
}

.Modal-Footer
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
}

.Modal-Separator
{
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    border-radius: var(--border-radius-xl);
}
/* Modal [End] */



/* Code [Start] */
.Code-Container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

.Code-Inputs
{
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.Code-Input
{
    width: 40px;
    height: 40px;
    outline: none;
    text-align: center;
    border: 2px var(--border-style-solid) var(--dark-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.Code-Input:Focus
{
    border-color: var(--primary-color);
    box-shadow: var(--box-shadow-30);
}

.Code-Text-Invalid
{
    display: none;
    color: var(--error-color);
}

.Code-Text-Invalid.Show
{
    display: block;
}

.Code-Text-Valid
{
    display: none;
    color: var(--success-color);
}

.Code-Text-Valid.Show
{
    display: block;
}
/* Code [End] */



/* Top Bar [Start] */
.Top-Bar
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--primary-gradient-smooth);
    z-index: var(--z-navigation-bar);
}

.Top-Bar-Contact-Container
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
}

.Top-Bar-Social-Container
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

.Top-Bar-Contact-Item
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
}

.Top-Bar-Link
{
    text-decoration: none;
    color: var(--light-color);
}

.Top-Bar-Link:Hover
{
    cursor: pointer;
    color: var(--light-color-hover-darkest);
}

.Top-Bar-Social-Anchor
{
    width: 20px;
    height: 20px;
}

.Top-Bar-Social-Icon:Hover
{
    cursor: pointer;
    opacity: 85%;
}
/* Top Bar [End] */



/* Navigation Bar [Start] */
.Navigation-Bar
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    background-color: var(--light-color);
    box-shadow: var(--box-shadow-10);
    z-index: var(--z-navigation-bar);
}

.Navigation-Bar-Elements
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.Navigation-Bar-Brand-And-Menu
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
}

.Navigation-Bar-Brand
{
    width: 300px;
}

.Navigation-Bar-Brand:Hover
{
    cursor: pointer;
}

.Navigation-Bar-Menu
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
}

.Navigation-Bar-Menu-Item
{
    position: relative;
    text-decoration: none;
    color: var(--dark-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    transition: var(--transition-base);
}

.Navigation-Bar-Menu-Item:Hover
{
    cursor: pointer;
    color: var(--primary-color);
}

.Navigation-Bar-Menu-Item.Active
{
    color: var(--primary-color);
}

.Navigation-Bar-Menu-Item.Active::After
{
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    bottom: -4px;
    background-color: var(--primary-color);
    border-radius: var(--border-radius-md);
}

.Navigation-Bar-Buttons
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

.Mobile-Navigation-Bar-Button
{
    display: none;
}

.Mobile-Navigation-Bar-Button:Hover
{
    cursor: pointer;
    opacity: 85%;
}

.Mobile-Navigation-Bar-Modal
{
    position: fixed;
    top: 0;
    right: -80%;
    width: 80%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    padding: var(--spacing-md) var(--spacing-md);
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
    background-color: var(--light-color);
    box-shadow: var(--box-shadow-10);
    transition: right var(--transition-base);
    z-index: var(--z-modal-container);
}

.Mobile-Navigation-Bar-Modal.Show
{
    right: 0;
}

.Mobile-Navigation-Bar-Elements
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.Mobile-Navigation-Bar-Brand-Container
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-xs);
}

.Mobile-Navigation-Bar-Brand
{
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.Mobile-Navigation-Bar-Menu
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--spacing-md);
}

.Mobile-Navigation-Bar-Menu-Item
{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: none;
    width: 100%;
    color: var(--primary-color);
    background: var(--light-color);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-30);
    font-size: var(--font-size-xl);
}

.Mobile-Navigation-Bar-Menu-Item:Hover
{
    cursor: pointer;
    background: var(--light-color-hover);
}

.Mobile-Navigation-Bar-Menu-Item.Active
{
    position: relative;
}

.Mobile-Navigation-Bar-Menu-Item.Active::Before
{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    width: 8px;
    background-color: var(--primary-color);
    border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
}

.Mobile-Navigation-Bar-Menu-Separator
{
    width: 100%;
    height: 1px;
    color: var(--primary-color);
    border-radius: var(--border-radius-xl);
    margin: var(--spacing-md) 0;
}

.Mobile-Navigation-Bar-Buttons
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
}

.Primary-Button.Mobile-Navigation-Bar-Menu
{
    flex-direction: row;
    gap: var(--spacing-sm);
}

.Primary-Button-Outline.Mobile-Navigation-Bar-Menu
{
    flex-direction: row;
    gap: var(--spacing-sm);
}
/* Navigation Bar [End] */



/* Footer [Start] */
.Footer-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-xxxxl);
    padding: var(--spacing-xl);
    background: var(--primary-gradient-smooth);
}

.Footer-Brand-Container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: var(--spacing-md);
}

.Footer-Brand-Logo
{
    width: 400px;
}

.Footer-Brand-Copyright
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--light-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

.Footer-Content-Container
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    gap: var(--spacing-xl);
}

.Footer-Content-Group
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
}

.Footer-Content-Title
{
    color: var(--light-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Footer-Content-Link
{
    cursor: pointer;
    text-decoration: none;
    color: var(--light-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

.Footer-Content-Link:Hover
{
    color: var(--light-color-hover-darkest);
}

.Footer-Links-Container
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

.Footer-ETBIS-Logo
{
    width: 64px;
    cursor: pointer;
}

.Cookie-Notification-Container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    width: 410px;
    left: var(--spacing-lg);
    bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    border: 2px var(--border-style-solid) var(--primary-color);
    border-radius: var(--border-radius-md);
    background-color: var(--light-color);
    box-shadow: var(--box-shadow-30);
    z-index: var(--z-modal-container);
    gap: var(--spacing-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slowest), visibility var(--transition-slowest);
    transition-delay: 0s;
}

.Cookie-Notification-Container.Show
{
    opacity: 1;
    visibility: visible;
    transition-delay: 1.5s;
}

.Cookie-Notification-Container-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

.Cookie-Notification-Container-Text.Link
{
    cursor: pointer;
    color: var(--primary-color);
    font-size: var(--font-size-md);
}
/* Footer [End] */



/* Home [Start] */
.Home-Hero-Container
{
    width: 100%;
    height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    background-image: url("../images/Home-Hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.Campaign-Badge
{
    position: absolute;
    top: 200px;
    left: 20px;
    max-height: 150px;
    height: auto;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.3s ease;
    animation: glow 2s ease-in-out infinite;
}

.Campaign-Badge:Hover
{
    transform: scale(1.1);
    animation: glow-hover 1s ease-in-out infinite;
}

@keyframes glow
{
    0%, 100%
    {
        filter: drop-shadow(0 0 5px rgba(34, 70, 110, 0.6))
        drop-shadow(0 0 10px rgba(34, 70, 110, 0.4))
        drop-shadow(0 0 15px rgba(34, 70, 110, 0.2));
    }
    50%
    {
        filter: drop-shadow(0 0 10px rgba(34, 70, 110, 0.8))
        drop-shadow(0 0 20px rgba(34, 70, 110, 0.6))
        drop-shadow(0 0 30px rgba(34, 70, 110, 0.4));
    }
}

@keyframes glow-hover
{
    0%, 100%
    {
        filter: drop-shadow(0 0 10px rgba(34, 70, 110, 0.8))
        drop-shadow(0 0 20px rgba(34, 70, 110, 0.6))
        drop-shadow(0 0 30px rgba(34, 70, 110, 0.4));
    }
    50%
    {
        filter: drop-shadow(0 0 15px rgba(34, 70, 110, 1))
        drop-shadow(0 0 30px rgba(34, 70, 110, 0.8))
        drop-shadow(0 0 45px rgba(34, 70, 110, 0.6));
    }
}

.Home-Hero-Title
{
    color: var(--light-color);
    font-size: var(--font-size-gigantic-md);
    font-weight: var(--font-weight-lighter);
    text-shadow: var(--text-shadow-light);
}

.Home-Hero-Slogan
{
    color: var(--light-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-lighter);
    text-shadow: var(--text-shadow-light);
}

.Home-About-Us-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    background-color: var(--light-color);
}

.Home-About-Us-Image
{
    width: 30%;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-30);
}

.Home-About-Us-Content
{
    max-width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.Home-About-Us-Content-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Home-About-Us-Content-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Home-Benefits-Container
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    background: var(--primary-gradient-smooth);
}

.Home-Benefits-Card-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
}

.Home-Benefits-Card
{
    width: 25%;
    height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--light-color);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-30);
}

.Home-Benefits-Card:Hover
{
    background-color: var(--light-color-hover);
}

.Home-Benefits-Card-Image
{
    width: 35%;
}

.Home-Benefits-Card-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Home-Benefits-Card-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Home-Values-Container
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    background-color: var(--light-color);
}

.Home-Values-Content-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: var(--spacing-xl);
}

.Home-Values-Content-Container.Reverse
{
    flex-direction: row-reverse;
}

.Home-Values-Content-Image
{
    width: 50%;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-30);
}

.Home-Values-Content-Text-Group
{
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.Home-Values-Content-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Home-Values-Content-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Home-FAQ-Container
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    background-color: var(--light-color);
}

.Home-FAQ-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Home-FAQ-Accordion-Container
{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.Home-FAQ-Accordion-Item
{
    overflow: hidden;
    background-color: var(--light-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-30);
}

.Home-FAQ-Accordion-Header
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    border: none;
    cursor: pointer;
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--primary-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    background-color: var(--light-color);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.Home-FAQ-Accordion-Header:Hover
{
    background-color: var(--light-color-hover-darker);
}

.Home-FAQ-Accordion-Header[Data-Aria-Expanded="True"]
{
    color: var(--primary-color);
    background-color: var(--light-color-hover-darkest);
}

.Home-FAQ-Accordion-Icon
{
    transition: transform var(--animation-duration-slow) ease-in-out;
}

.Home-FAQ-Accordion-Header[Data-Aria-Expanded="True"] .Home-FAQ-Accordion-Icon
{
    transform: rotate(180deg);
}

.Home-FAQ-Accordion-Content
{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.Home-FAQ-Accordion-Content.Open
{
    transition: max-height 0.5s ease-in-out;
}

.Home-FAQ-Accordion-Content-Inner
{
    opacity: 0;
    transform: translateY(-5px);
    padding: var(--spacing-md) var(--spacing-lg);
    transition: opacity 0.3s ease 0.1s,
    transform 0.3s ease 0.1s;
}

.Home-FAQ-Accordion-Content.Open .Home-FAQ-Accordion-Content-Inner
{
    opacity: 1;
    transform: translateY(0);
}

.Home-FAQ-Accordion-Content-Inner-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-md);
}
/* Home [End] */



/* Other Hero [Start] */
.Other-Hero-Container
{
    width: 100%;
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    background-image: url("../images/Other-Hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.Other-Hero-Content
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
}

.Other-Hero-Breadcrumb
{
    font-size: var(--font-size-lg);
    color: var(--light-color);
}

.Other-Hero-Breadcrumb.Home
{
    color: var(--primary-color);
}

.Other-Hero-Breadcrumb.Home:Hover
{
    cursor: pointer;
    color: var(--primary-color-hover);
}

.Other-Hero-Title
{
    text-align: center;
    color: var(--light-color);
    font-size: var(--font-size-xxxxl);
    font-weight: var(--font-weight-regular);
    text-shadow: var(--text-shadow-light);
}
/* Other Hero [End] */



/* Collavita [Start] */
.Collavita-Info-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    background-color: var(--light-color);
}

.Collavita-Info-Image
{
    width: 30%;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-30);
}

.Collavita-Info-Content
{
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.Collavita-Info-Content-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Collavita-Info-Content-Primary-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.Collavita-Info-Content-Secondary-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

.Collavita-Contents-Container
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: var(--primary-gradient-smooth);
}

.Collavita-Contents-Content
{
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.Collavita-Contents-Content-Title
{
    align-self: center;
    margin-bottom: var(--spacing-md);
    color: var(--light-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Collavita-Contents-Content-Text
{
    color: var(--light-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Collavita-Contents-Content-List
{
    width: 100%;
    display: grid;
    align-items: start;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.Collavita-Contents-Content-List-Text
{
    text-align: center;
    padding: var(--spacing-sm);
    background-color: var(--light-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-30);
}

.Collavita-Contents-Detail-Container
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    background-color: var(--light-color);
}

.Collavita-Contents-Detail-Content-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: var(--spacing-xl);
}

.Collavita-Contents-Detail-Content-Container.Reverse
{
    flex-direction: row-reverse;
}

.Collavita-Contents-Detail-Content-Image
{
    width: 50%;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-30);
}

.Collavita-Contents-Detail-Content-Text-Group
{
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.Collavita-Contents-Detail-Content-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Collavita-Contents-Detail-Content-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Collavita-Contents-Detail-Content-Text.Bold
{
    font-weight: var(--font-weight-bold);
}

.Collavita-Contents-Detail-Content-Text.Sub
{
    font-size: var(--font-size-md);
}

.Collavita-How-To-Use-Container
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    background-color: var(--light-color);
}

.Collavita-How-To-Use-Title
{
    text-align: center;
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Collavita-How-To-Use-Content-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    gap: var(--spacing-xxxl);
}

.Collavita-How-To-Use-Content-Item
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.Collavita-How-To-Use-Content-Item-Image
{
    width: 200px;
}

.Collavita-How-To-Use-Content-Item-Title
{
    max-width: 200px;
    text-align: center;
    color: var(--primary-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.Collavita-How-To-Use-Content-Item-Text
{
    max-width: 200px;
    height: 90px;
    text-align: center;
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}
/* Collavita [End] */



/* Articles [Start] */
.Articles-Info-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    background-color: var(--light-color);
}

.Articles-Info-Image
{
    width: 30%;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-30);
}

.Articles-Info-Content
{
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.Articles-Info-Content-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Articles-Info-Content-Primary-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.Articles-Info-Content-Secondary-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

.Articles-Contents-Container
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    background-color: var(--light-color);
}

.Articles-Contents-Content
{
    width: 65%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    box-shadow: var(--box-shadow-30);
    border-radius: var(--border-radius-md);
}

.Articles-Contents-Content:Hover
{
    background-color: var(--light-color-hover);
}

.Articles-Contents-Content-Text-Group
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-md);
}

.Articles-Contents-Content-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.Articles-Contents-Content-Description
{
    color: var(--dark-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

.Articles-Contents-Content-Source-Button
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-boldest);
}

.Articles-Contents-Content-Source-Button:Hover
{
    cursor: pointer;
    color: var(--primary-color);
}

.Articles-Contents-Content-Image
{
    width: 100px;
}
/* Articles [End] */



/* Recipes [Start] */
.Recipes-Container
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    background-color: var(--light-color);
}

.Recipes-Content-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: var(--spacing-xl);
}

.Recipes-Content-Container.Reverse
{
    flex-direction: row-reverse;
}

.Recipes-Content-Image
{
    width: 50%;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-30);
}

.Recipes-Content-Text-Group
{
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.Recipes-Content-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Recipes-Content-Ingredients
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.Recipes-Content-Ingredient
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}
/* Recipes [End] */



/* Contact [Start] */
.Contact-Container
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    background-color: var(--light-color);
}

.Contact-Content-Container
{
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
}

.Contact-Text-Group
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.Contact-Text-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
}

.Contact-Text-Info
{
    color: var(--dark-color);
    font-weight: var(--font-weight-bold);
}

.Contact-Details-Group
{
    color: var(--dark-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.Contact-Details-Link
{
    color: var(--primary-color);
}

.Contact-Details-Link:Hover
{
    cursor: pointer;
    color: var(--primary-color-hover);
}

.Contact-Map-Container
{
    border: none;
    outline: none;
    overflow: hidden;
    max-width: 100%;
    width: 600px;
    height: 400px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-30);
}

.Contact-Map
{
    max-width:100%;
    width: 100%;
    height: 100%;
}

.Contact-Map-IFrame
{
    border: 0;
    width: 100%;
    height: 100%;
}
/* Contact [End] */



/* Auth [Start] */
.Auth-Container
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    background-color: var(--light-color);
}

.Auth-Header
{
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--primary-color);
    font-size: var(--font-size-xl);
    gap: var(--spacing-md);
}

.Auth-Link
{
    text-align: center;
    font-size: var(--font-size-md);
    margin-top: var(--spacing-md);
}

.Auth-Link a
{
    color: var(--primary-color);
    text-decoration: none;
    font-weight: var(--font-weight-bolder);
}

.Auth-Link a:hover
{
    color: var(--primary-color-hover);
    text-decoration: underline;
}

.Auth-Message-Container
{
    text-align: center;
    box-shadow: var(--box-shadow-30);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    background-color: var(--light-color);
}

.Auth-Message-Container.Success
{
    background-color: var(--success-color);
}

.Auth-Message-Container.Warning
{
    background-color: var(--warning-color);
}

.Auth-Message-Container.Error
{
    background-color: var(--error-color);
}

.Auth-Message-Container-Message
{
    color: var(--light-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}
/* Auth [End] */



/* Storefront [Start] */
.Storefront-Product-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    gap: var(--spacing-xl);
    background: var(--primary-gradient-smooth);
}

.Storefront-Product-Container.Light
{
    background: var(--light-color);
}

.Storefront-Product-Container.Reverse
{
    flex-direction: row-reverse;
}

.Storefront-Product-Image-Wrapper
{
    position: relative;
    width: 30%;
}

.Storefront-Product-Image
{
    width: 100%;
    border-radius: var(--border-radius-lg);
}

.Storefront-Campaign-Badge
{
    position: absolute;
    height: auto;
    top: 10px;
    left: 10px;
    max-height: 100px;
    animation: glow 2s ease-in-out infinite;
}

.Storefront-Product-Info-Content
{
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.Storefront-Product-Info-Title
{
    color: var(--light-color);
    font-size: var(--font-size-xxxl);
    font-weight: var(--font-weight-bold);
    text-shadow: var(--text-shadow-light);
}

.Storefront-Product-Info-Title.Dark
{
    color: var(--primary-color);
    text-shadow: var(--text-shadow-primary);
}

.Storefront-Product-Info-Item
{
    color: var(--light-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Storefront-Product-Info-Item.Dark
{
    color: var(--dark-color);
}

.Storefront-Product-Price-Container
{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}

.Storefront-Product-Price-Discount
{
    font-size: 20px;
    font-weight: 500;
    color: #999999;
    text-decoration: line-through;
    position: relative;
}

.Storefront-Product-Price
{
    font-size: 32px;
    font-weight: 700;
    color: var(--light-color);
    position: relative;
}

.Storefront-Product-Price.Primary
{
    color: var(--primary-color);
}

.Storefront-Product-Price::Before
{
    font-size: 24px;
    margin-right: 4px;
}

.Storefront-Product-Price-Badge
{
    background: linear-gradient(135deg, #5770F8 0%, #7EB1FC 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: white;
    font-size: 18px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
}
/* Storefront [End] */



/* Store [Start] */
.Store-Container
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--spacing-xl) var(--spacing-gigantic-lg);
    gap: var(--spacing-xl);
}

.Store-Navigation-Container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: fit-content;
    box-shadow: var(--box-shadow-30);
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
    border-radius: var(--border-radius-md);
}

.Store-Navigation-Person-Container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.Store-Navigation-Person-Icon
{
    width: 100px;
}

.Store-Navigation-Person-Name
{
    text-align: center;
    color: var(--primary-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.Store-Navigation-Menu-Container
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-md);
}

.Store-Navigation-Menu-Item
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--dark-color);
}

.Store-Navigation-Menu-Item:Hover
{
    cursor: pointer;
    color: var(--primary-color-hover);
}

.Store-Navigation-Menu-Item.Active
{
    font-weight: var(--font-weight-bold);
}

.Store-Navigation-Menu-Item-Icon
{
    width: 24px;
}

.Store-Content-Container
{
    display: flex;
    flex-direction: column;
    box-shadow: var(--box-shadow-30);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
    width: 100%;
    height: fit-content;
}

.Store-Content-Container.Large-Gap
{
    gap: var(--spacing-lg);
}

.Store-Content-Container.Row
{
    flex-direction: row;
}

.Store-Content-Container.Justify-Between
{
    justify-content: space-between;
}

.Store-Tabs-Container
{
    display: flex;
    flex-direction: row;
    height: fit-content;
    gap: var(--spacing-md);
    border-bottom: 2px var(--border-style-solid) var(--primary-color);
}

.Store-Tab-Button
{
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    transition: background var(--animation-duration-base);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Store-Tab-Button.Hidden
{
    display: none;
}

.Store-Tab-Button:Hover
{
    color: var(--primary-color);
    background-color: var(--light-color-hover);
}

.Store-Tab-Button.Active
{
    font-weight: bold;
    color: var(--primary-color);
    background-color: var(--light-color-hover);
}

.Store-Tab-Content
{
    display: none;
}

.Store-Tab-Content.Active
{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.Store-Tab-Content.Centered
{
    align-items: center;
    justify-content: center;
    text-align: center;
}

.Store-Profile-Username-Container-Wrapper
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Store-Profile-Username-Container
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
}

.Store-Profile-Username-Primary-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.Store-Profile-Username-Secondary-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Store-Profile-Username-Secondary-Text.Success
{
    color: var(--success-color);
}

.Store-Profile-Username-Secondary-Text.Error
{
    color: var(--error-color);
}

.Store-Profile-Address-Container-Wrapper
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-lg);
    width: 100%;
}

.Store-Profile-Address-Container
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: calc(50% - var(--spacing-md));
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-30);
    gap: var(--spacing-md);
}

.Store-Profile-Address-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.Store-Profile-Address-Content
{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.Store-Product-Card
{
    display: flex;
    flex-direction: row;
    height: fit-content;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    box-shadow: var(--box-shadow-30);
    border-radius: var(--border-radius-md);
}

.Store-Product-Card-Image-Text-Wrapper
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
}

.Store-Product-Card-Image-Wrapper
{
    position: relative;
    width: 30%;
}

.Store-Product-Card-Image
{
    width: 100%;
    height: auto;
}

.Store-Product-Card-Campaign-Badge
{
    position: absolute;
    top: 5px;
    left: 5px;
    max-height: 64px;
    height: auto;
    transition: transform 0.3s ease;
    animation: glow 2s ease-in-out infinite;
}

.Store-Product-Card-Text-Group
{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.Store-Product-Card-Text-Group.Row
{
    flex-direction: row;
    gap: var(--spacing-xs);
}

.Store-Product-Card-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-lg-xl);
    font-weight: var(--font-weight-bold);
}

.Store-Product-Card-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
}

.Store-Product-Card-Text.Description
{
    font-size: var(--font-size-lg);
}

.Store-Product-Card-Text.Success
{
    color: var(--success-color);
}

.Store-Product-Card-Text.Error
{
    color: var(--error-color);
}

.Store-Product-Card-Description.Bold
{
    font-weight: var(--font-weight-bold);
}

.Store-Product-Card-Buy-Wrapper
{
    display: flex;
    min-width: fit-content;
    flex-direction: column;
    gap: var(--spacing-md);
}

.Store-Product-Quantity-Selector
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    align-self: center;
    box-shadow: var(--box-shadow-30);
    border-radius: var(--border-radius-md);
}

.Store-Product-Quantity-Selector Button
{
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    background: var(--primary-gradient-smooth);
    color: var(--light-color);
}

.Store-Product-Quantity-Selector Button.Left
{
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
}

.Store-Product-Quantity-Selector Button.Right
{
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.Store-Product-Quantity-Selector Button:Hover
{
    background: var(--primary-gradient-smooth-hover);
}

.Store-Product-Quantity-Selector .Quantity
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    background: var(--light-color-hover);
}

.Store-Order-Summary-Container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
    padding: 0 0 0 var(--spacing-md);
    border-left: 2px var(--border-style-solid) var(--primary-color);
    margin-left: var(--spacing-md);
}

.Store-Order-Summary-Image
{
    width: 200px;
}

.Store-Order-Summary-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.Store-Order-Summary-Bold-Text
{
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.Store-Order-Summary-Text
{
    color: var(--success-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Store-Order-Summary-Text.Muted
{
    color: #686868;
}

.Store-Order-Summary-Shipping-Text
{
    color: var(--primary-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}

.Store-Order-Summary-Error-Text
{
    display: none;
    text-align: center;
    color: var(--error-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
}

.Store-Order-Summary-Error-Text.Show
{
    display: block;
}

.Store-Tab-Content-Wrapper
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
    width: 100%;
    height: 100%;
}

.Store-Error-Message-Container
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-30);
    background: var(--error-color);
    color: var(--light-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

.Store-Order-Information-Container-Wrapper
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
}

.Store-Order-Information-Container
{
    cursor: pointer;
    overflow: hidden;
    border: 2px var(--border-style-solid) var(--primary-color);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-base);
    box-shadow: var(--box-shadow-30);
}

.Store-Order-Information-Summary
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--light-color);
}

.Store-Order-Information-Details
{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 var(--spacing-md);
    transition: max-height var(--transition-slower),
    opacity var(--transition-base),
    padding var(--transition-slower);
}

.Store-Order-Information-Container.Open .Store-Order-Information-Details
{
    opacity: 1;
    max-height: 700px;
    padding: var(--spacing-md);
}

.Store-Order-Product-Image
{
    width: 300px;
}

.Store-Order-Information-Text
{
    display: flex;
    align-self: center;
    text-align: center;
    color: var(--dark-color);
    font-size: var(--font-size-lg);
}

.Store-Order-Information-Text.Primary
{
    color: var(--primary-color);
}

.Store-Order-Information-Text.Success
{
    color: var(--success-color);
}

.Store-Order-Information-Text.Error
{
    color: var(--error-color);
}

.Store-Order-Information-Text-Group
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.Store-Order-Information-Link-Group
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.Store-Order-Information-Text.Hover:Hover
{
    text-decoration: underline;
}

.Store-Order-Information-Details-Basic-Information
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.Store-Order-Information-Details-Basic-Information-Text-Group-Wrapper
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-sm);
}

.Store-Order-Information-Details-Basic-Information-Text-Group
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.Store-Order-Information-Details-Basic-Information-Text
{
    font-size: var(--font-size-lg);
}

.Store-Order-Information-Details-Basic-Information-Text.Large
{
    font-size: var(--font-size-xl);
}

.Store-Order-Information-Details-Basic-Information-Text.Bold
{
    font-weight: var(--font-weight-bold);
}

.Store-Order-Information-Details-Basic-Information-Text.Success
{
    color: var(--success-color);
}

.Store-Order-Information-Details-Basic-Information-Text.Error
{
    color: var(--error-color);
}

.Store-Order-Information-Details-Basic-Information-Text.Primary
{
    color: var(--primary-color);
}

.Store-Order-Information-Details-Basic-Information-Text.Hover:Hover
{
    text-decoration: underline;
}

.Store-Order-Information-Details-Basic-Information-Text-Box-Wrapper
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

.Store-Order-Information-Details-Basic-Information-Text-Box
{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-30);
}

.Store-Order-Information-Address-Text-Group
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.Store-Checkout-Error-Container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;
    background: var(--error-color);
    color: var(--light-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--box-shadow-30);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

.Store-Checkout-Success-Icon
{
    width: 10%;
}

.Store-Checkout-Failed-Icon
{
    width: 10%;
}

.Store-Checkout-Order-ID
{
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    color: var(--primary-color);
    user-select: all;
    cursor: pointer;
}

.Store-Checkout-Description
{
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
}

.Store-Checkout-Description.Bold
{
    font-weight: var(--font-weight-bold);
}

.Store-Checkout-Description.Error
{
    color: var(--error-color);
}

.Store-Message-Container
{
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: fit-content;
    margin-bottom: var(--spacing-md);
    box-shadow: var(--box-shadow-30);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    background-color: var(--light-color);
}

.Store-Message-Container.Light-Text
{
    color: var(--light-color);
}

.Store-Message-Container.No-Margin
{
    margin-bottom: 0;
}

.Store-Message-Container.Full-Width
{
    width: 100%;
}

.Store-Message-Container.Success
{
    background-color: var(--success-color);
}

.Store-Message-Container.Warning
{
    background-color: var(--warning-color);
}

.Store-Message-Container.Error
{
    background-color: var(--error-color);
}

.Store-Message-Container-Message
{
    color: var(--light-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

.Store-Ticket-Information-Container-Wrapper
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-md);
}

.Store-Ticket-Information-Container
{
    overflow: hidden;
    border: 2px var(--border-style-solid) var(--primary-color);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-base);
    box-shadow: var(--box-shadow-30);
}

.Store-Ticket-Information-Summary
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--light-color);
}

.Store-Ticket-Information-Text
{
    display: flex;
    align-self: center;
    color: var(--dark-color);
    font-size: var(--font-size-lg);
}

.Store-Ticket-Information-Text.Selectable
{
    cursor: pointer;
    user-select: all;
}

.Store-Ticket-Information-Text.Primary
{
    color: var(--primary-color);
}

.Store-Ticket-Information-Text.Success
{
    color: var(--success-color);
}

.Store-Ticket-Information-Text.Error
{
    color: var(--error-color);
}

.Store-Ticket-Information-Text-Group
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xs);
}

.Store-Ticket-Information-Title
{
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
}

.Store-Ticket-Information-Info
{
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    color: var(--dark-color);
}

.Store-Ticket-Information-Info.Selectable
{
    cursor: pointer;
    user-select: all;
}

.Store-Ticket-Information-Info.Success
{
    color: var(--success-color);
}

.Store-Ticket-Information-Info.Error
{
    color: var(--error-color);
}

.Store-Ticket-Message-Container
{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-30);
    background: var(--light-color);
}

.Store-Ticket-Message-Info-Container
{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

.Store-Ticket-Message
{
    font-size: var(--font-size-xl);
}

.Store-Ticket-Message.Bold-Primary
{
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
}

.Store-Ticket-Message.Text-Small
{
    font-size: var(--font-size-sm);
}

.Store-Ticket-Message.Text-Medium
{
    font-size: var(--font-size-md);
}

.Store-Ticket-Message.Selectable
{
    user-select: text;
}

.Store-Cards-Container
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-items: center;
}

.Store-Cards-Info-Text
{
    text-align: center;
    align-self: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--dark-color);
}

.Store-Cards-Container
{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.Store-Cards-Wrapper
{
    position: relative;
    width: 100%;
    height: 250px;
}

.Store-Card
{
    width: 100%;
    height: 100%;
    perspective: 1000px;
    position: relative;
}

.Store-Card-Inner
{
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform var(--transition-base);
    transform-style: preserve-3d;
}

.Store-Cards-Wrapper:Hover .Store-Card-Inner
{
    transform: translateY(-5px);
}

.Store-Card-Front
{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-30);
    padding: var(--spacing-lg);
    color: var(--light-color);
}

.Store-Card-Front::before
{
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../../assets/images/Card-Background.svg");
}

.Store-Card-Left-Section
{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    z-index: 5;
}

.Store-Card-Bank-Name
{
    text-align: left;
    color: var(--light-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    text-shadow: var(--text-shadow-dark);
}

.Store-Card-Remove-Section
{
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 5;
}

.Store-Card-Select-Section
{
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 5;
}

.Store-Card-Remove-Button
{
    color: var(--light-color);
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-circle);
    width: 40px;
    height: 40px;
    opacity: 0.8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.Store-Card-Select-Button
{
    color: var(--light-color);
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-circle);
    width: 40px;
    height: 40px;
    opacity: 0.8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.Store-Card-Remove-Button:Hover
{
    opacity: 1;
    transform: scale(1.1);
    background: var(--error-color);
    border-color: var(--error-color-hover-darkest);
    box-shadow: var(--box-shadow-20);
}

.Store-Card-Select-Button:Hover
{
    opacity: 1;
    transform: scale(1.1);
    background: var(--success-color);
    border-color: var(--success-color-hover-darkest);
    box-shadow: var(--box-shadow-20);
}

.Store-Card-Number
{
    position: absolute;
    font-family: 'Courier New', monospace;
    text-align: center;
    letter-spacing: 4px;
    width: 100%;
    top: 50%;
    left: 50%;
    font-size: 24px;
    transform: translate(-50%, -50%);
    text-shadow: var(--text-shadow-dark);
    font-weight: var(--font-weight-bolder);
    z-index: 5;
}

.Store-Card-Info
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: var(--spacing-lg);
    left: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 5;
}

.Store-Card-Holder-Section,
.Store-Card-Expiry-Section
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.Store-Card-Label
{
    margin-bottom: 2px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--light-color);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    opacity: 0.8;
}

.Store-Card-Holder,
.Store-Card-Expiry
{
    color: var(--light-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bolder);
    text-shadow: var(--text-shadow-dark);
}

.Store-Cards-Info-Text
{
    text-align: center;
    color: var(--dark-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
}

.Store-Card[data-schema="VISA"] .Store-Card-Front
{
    background: linear-gradient(135deg, #1E3C72, #2A5298);
}

.Store-Card[data-schema="MASTERCARD"] .Store-Card-Front
{
    background: linear-gradient(135deg, #EB001B, #FF5F00);
}

.Store-Card[data-schema="AMEX"] .Store-Card-Front
{
    background: linear-gradient(135deg, #006FCF, #0080D1);
}

.Store-Card[data-schema="TROY"] .Store-Card-Front
{
    background: linear-gradient(135deg, #004D99, #0066CC);
}

.Store-Card[data-schema="DISCOVER"] .Store-Card-Front
{
    background: linear-gradient(135deg, #FF6000, #FF8C00);
}

.Store-Card[data-schema="UNIONPAY"] .Store-Card-Front
{
    background: linear-gradient(135deg, #003F7F, #005AA8);
}

.Store-Card[data-schema="JCB"] .Store-Card-Front
{
    background: linear-gradient(135deg, #0066CC, #003D7A);
}

.Store-Card[data-schema="DINERS"] .Store-Card-Front
{
    background: linear-gradient(135deg, #004D99, #0066CC);
}

.Store-Card[data-schema="MAESTRO"] .Store-Card-Front
{
    background: linear-gradient(135deg, #EB001B, #FF5F00);
}

.Store-Card .Store-Card-Front
{
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.Card-Wrapper
{
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.Card-Tabs
{
    margin-bottom: var(--spacing-md);
}

.Store-Card-Select-Button.active
{
    background-color: var(--success-color);
    border-color: var(--success-color-hover-darkest);
    color: var(--light-color);
    opacity: 1;
}
/* Store [End] */



/* Legal [Start] */
.Legal-Container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
}

.Legal-Container-Title
{
    text-align: center;
    color: var(--primary-color);
    font-size: var(--font-size-xxxl);
    font-weight: var(--font-weight-bold);
}

.Legal-Container-Revision-Text
{
    text-align: center;
    color: var(--dark-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Legal-Container-Revision-Text.Bold
{
    font-weight: var(--font-weight-bold);
}

.Legal-Container-Content-Box
{
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-30);
}

.Legal-Container-Content-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-lg-xl);
    font-weight: var(--font-weight-bold);
}

.Legal-Container-Content-Text
{
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.Legal-Container-Content-Text.Link
{
    color: var(--primary-color);
    font-weight: var(--font-weight-regular);
}

.Legal-Container-Content-Text.Link:Hover
{
    text-decoration: underline;
}

.Legal-Container-Content-Separator
{
    align-self: center;
    padding: var(--spacing-md);
}

.Legal-Container-Content-Box b
{
    color: var(--primary-color);
}

.Legal-Container-Content-Text-Group
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-sm);
    padding-left: var(--spacing-lg);
}

.Legal-Container-Content-Sub-Title
{
    color: var(--primary-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.Legal-Container-Revision
{
    text-align: center;
}
/* Legal [End] */



/* Error Pages [Start] */
.Error-Page-Container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: var(--primary-gradient-smooth);
    min-height: 100vh;
    height: 100vh;
}

.Error-Page-Logo
{
    width: 30%;
    cursor: pointer;
}

.Error-Page-Text
{
    text-align: center;
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--light-color);
}
/* Error Pages [End] */



/* Mobile Responsiveness [Start] */
@media (max-width: 1300px)
{
    /* Libraries [Start] */
    .jp-card
    {
        left: 50%;
        transform: translateX(-50%);
    }
    /* Libraries [End] */



    /* Tooltip [Start] */
    .Custom-Tooltip-Text
    {
        width: 115px;
        margin-left: -50px;
    }
    /* Tooltip [End] */



    /* Modal [Start] */
    .Modal.Mobile-Width-Full
    {
        max-width: 90%;
        width: 90%;
    }

    .Modal-Header-Title-Text
    {
        font-size: var(--font-size-lg-xl);
    }
    /* Modal [End] */



    /* Button [Start] */
    .Primary-Button.Mobile-Centered
    {
        align-self: center;
    }

    .Primary-Button-Outline.Mobile-Centered
    {
        align-self: center;
    }
    /* Button [End] */



    /* Form [Start] */
    .Custom-Form-Double-Group
    {
        flex-direction: column;
    }

    .Custom-Form.Tight-30
    {
        width: 100%;
    }
    /* Form [End] */



    /* Top Bar [Start] */
    .Top-Bar
    {
        padding: var(--spacing-md) var(--spacing-md);
        justify-content: center;
    }

    .Top-Bar-Link
    {
        font-size: var(--font-size-sm);
    }

    .Top-Bar-Social-Container
    {
        display: none;
    }
    /* Top Bar [End] */



    /* Navigation Bar [Start] */
    .Navigation-Bar
    {
        padding: var(--spacing-md) var(--spacing-md);
        justify-content: center;
    }

    .Navigation-Bar-Brand
    {
        width: 250px;
    }

    .Navigation-Bar-Brand-And-Menu
    {
        width: 100%;
    }

    .Navigation-Bar-Menu
    {
        display: none;
    }

    .Navigation-Bar-Buttons
    {
        display: none;
    }

    .Mobile-Navigation-Bar-Button
    {
        display: flex;
    }
    /* Navigation Bar [End] */



    /* Footer [Start] */
    .Footer-Container
    {
        flex-direction: column;
        gap: var(--spacing-xl);
        padding: var(--spacing-lg);
    }

    .Footer-Brand-Logo
    {
        width: 100%;
    }

    .Cookie-Notification-Container
    {
        width: calc(100vw - 64px);
    }
    /* Footer [End] */



    /* Home [Start] */
    .Home-Hero-Container
    {
        gap: var(--spacing-lg);
    }

    .Campaign-Badge
    {
        top: 150px;
        max-height: 100px;
    }

    .Home-Hero-Title
    {
        font-size: var(--font-size-mobile-gigantic-md);
        font-weight: var(--font-weight-light);
    }

    .Home-Hero-Slogan
    {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-light);
    }

    .Home-About-Us-Container
    {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }

    .Home-About-Us-Image
    {
        min-width: 100%;
    }

    .Home-About-Us-Content
    {
        min-width: 100%;
    }

    .Home-Benefits-Container
    {
        padding: var(--spacing-lg);
    }

    .Home-Benefits-Card-Container
    {
        flex-direction: column;
    }

    .Home-Benefits-Card
    {
        width: 100%;
    }

    .Home-Values-Container
    {
        padding: var(--spacing-lg);
    }

    .Home-Values-Content-Container
    {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .Home-Values-Content-Container.Reverse
    {
        flex-direction: column;
    }

    .Home-Values-Content-Image
    {
        width: 100%;
    }

    .Home-Values-Content-Text-Group
    {
        max-width: 100%;
    }

    .Home-FAQ-Container
    {
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
    }

    .Home-FAQ-Accordion-Container
    {
        width: 100%;
    }

    .Home-FAQ-Accordion-Header
    {
        gap: var(--spacing-md);
    }
    /* Home [End] */



    /* Collavita [Start] */
    .Collavita-Info-Container
    {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }

    .Collavita-Info-Image
    {
        width: 100%;
    }

    .Collavita-Info-Content
    {
        max-width: 100%;
    }

    .Collavita-Contents-Container
    {
        padding: var(--spacing-lg);
    }

    .Collavita-Contents-Content
    {
        width: 100%;
    }

    .Collavita-Contents-Content-List
    {
        grid-template-columns: 1fr;
    }

    .Collavita-Contents-Detail-Container
    {
        padding: var(--spacing-lg);
    }

    .Collavita-Contents-Detail-Content-Container
    {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .Collavita-Contents-Detail-Content-Container.Reverse
    {
        flex-direction: column;
    }

    .Collavita-Contents-Detail-Content-Image
    {
        width: 100%;
    }

    .Collavita-Contents-Detail-Content-Text-Group
    {
        max-width: 100%;
    }

    .Collavita-How-To-Use-Container
    {
        padding: var(--spacing-lg);
    }

    .Collavita-How-To-Use-Content-Container
    {
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .Collavita-How-To-Use-Content-Item-Title
    {
        max-width: 100%;
    }

    .Collavita-How-To-Use-Content-Item-Text
    {
        max-width: 100%;
    }
    /* Collavita [End] */



    /* Articles [Start] */
    .Articles-Info-Container
    {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }

    .Articles-Info-Image
    {
        width: 100%;
    }

    .Articles-Info-Content
    {
        max-width: 100%;
    }

    .Articles-Contents-Container
    {
        padding: var(--spacing-lg);
    }

    .Articles-Contents-Content
    {
        width: 100%;
        flex-direction: column;
    }

    .Articles-Contents-Content-Source-Button
    {
        align-self: center;
    }
    /* Articles [End] */



    /* Recipes [Start] */
    .Recipes-Container
    {
        padding: var(--spacing-lg);
    }

    .Recipes-Content-Container
    {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .Recipes-Content-Container.Reverse
    {
        flex-direction: column;
    }

    .Recipes-Content-Image
    {
        width: 100%;
    }

    .Recipes-Content-Text-Group
    {
        max-width: 100%;
    }
    /* Recipes [End] */



    /* Contact [Start] */
    .Contact-Container
    {
        padding: var(--spacing-lg);
    }

    .Contact-Content-Container
    {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .Contact-Map-Container
    {
        width: 100%;
        height: 250px;
    }
    /* Contact [End] */



    /* Auth [Start] */
    .Auth-Container
    {
        padding: var(--spacing-lg);
    }
    /* Auth [End] */



    /* Storefront [Start] */
    .Storefront-Product-Container
    {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }

    .Storefront-Product-Container.Reverse
    {
        flex-direction: column;
    }

    .Storefront-Product-Image-Wrapper
    {
        width: 100%;
    }

    .Storefront-Product-Image
    {
        width: 100%;
    }

    .Storefront-Campaign-Badge
    {
        max-width: 64px;
        top: 5px;
        left: 5px;
    }

    .Storefront-Product-Info-Content
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-md);
        max-width: 100%;
    }

    .Storefront-Product-Info-Title
    {
        text-align: center;
        font-size: var(--font-size-xxl);
    }

    .Storefront-Product-Price-Container
    {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }
    /* Storefront [End] */



    /* Store [Start] */
    .Store-Container
    {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }

    .Store-Content-Container.Row
    {
        flex-direction: column;
    }

    .Store-Navigation-Container
    {
        width: 100%;
    }

    .Store-Tabs-Container
    {
        flex-direction: column;
        gap: 0;
    }

    .Store-Tab-Button
    {
        border-radius: var(--border-radius-md);
        padding: var(--spacing-md);
    }

    .Store-Tab-Button:Last-Child
    {
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    }

    .Store-Profile-Username-Container-Wrapper
    {
        gap: var(--spacing-sm);
    }

    .Store-Profile-Username-Container
    {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .Store-Profile-Address-Container-Wrapper
    {
        flex-direction: column;
    }

    .Store-Profile-Address-Container
    {
        width: 100%;
    }

    .Store-Product-Card
    {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .Store-Product-Card-Image-Text-Wrapper
    {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .Store-Product-Card-Image-Wrapper
    {
        width: 100%;
    }

    .Store-Product-Card-Campaign-Badge
    {
        max-width: 50px;
        top: 3px;
        left: 3px;
    }

    .Store-Product-Card-Text-Group
    {
        text-align: center;
    }

    .Store-Product-Card-Image
    {
        width: 100%;
        height: auto;
    }

    .Store-Order-Summary-Container
    {
        justify-content: center;
        border-left: none;
        border-top: 2px solid var(--primary-color);
        padding: var(--spacing-md) 0 0 0;
        margin-left: 0;
    }

    .Store-Tab-Content
    {
        align-items: center;
    }

    #paymentForm
    {
        margin-bottom: var(--spacing-md);
    }

    .Store-Order-Information-Summary
    {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .Store-Order-Information-Details-Basic-Information
    {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .Store-Order-Product-Image
    {
        width: 100%;
    }

    .Store-Order-Information-Details-Basic-Information-Text-Group-Wrapper
    {
        gap: var(--spacing-md);
    }

    .Store-Order-Information-Details-Basic-Information-Text
    {
        text-align: center;
        align-self: center;
    }

    .Store-Order-Information-Container.Open .Store-Order-Information-Details
    {
        max-height: 1000px;
    }

    .Store-Order-Information-Details-Basic-Information-Text-Group
    {
        flex-direction: column;
        align-self: center;
    }

    .Store-Checkout-Success-Icon
    {
        width: 25%;
    }

    .Store-Checkout-Failed-Icon
    {
        width: 25%;
    }

    .Store-Ticket-Information-Container-Wrapper
    {
        width: 100%;
    }

    .Store-Ticket-Information-Summary
    {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .Store-Ticket-Information-Text-Group
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-xs);
    }

    .Store-Ticket-Message-Info-Container
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-self: center;
        gap: var(--spacing-xs);
    }

    .Store-Ticket-Message
    {
        text-align: center;
        align-self: center;
    }

    .Store-Cards-Container
    {
        gap: var(--spacing-lg);
        grid-template-columns: 1fr;
    }

    .Store-Cards-Wrapper
    {
        height: 160px;
    }

    .Store-Card-Front
    {
        padding: var(--spacing-md);
    }

    .Store-Card-Left-Section
    {
        top: var(--spacing-md);
        left: var(--spacing-md);
    }

    .Store-Card-Bank-Name
    {
        font-size: var(--font-size-md);
    }

    .Store-Card-Remove-Section
    {
        top: 12px;
        right: 12px;
    }

    .Store-Card-Select-Section
    {
        top: 12px;
        right: 12px;
    }

    .Store-Card-Remove-Button
    {
        width: 36px;
        height: 36px;
        padding: var(--spacing-xs);
    }

    .Store-Card-Select-Button
    {
        width: 36px;
        height: 36px;
        padding: var(--spacing-xs);
    }

    .Store-Card-Number
    {
        font-size: var(--font-size-lg);
        letter-spacing: 2px;
    }

    .Store-Card-Info
    {
        bottom: var(--spacing-md);
        left: var(--spacing-md);
        right: var(--spacing-md);
    }

    .Store-Cards-Wrapper:Hover .Store-Card-Inner
    {
        transform: translateY(-3px);
    }

    .Card-Wrapper
    {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        transform: scale(0.75);
        transform-origin: center;
    }

    .Card-Tabs
    {
        margin-bottom: var(--spacing-lg);
    }
    /* Store [End] */



    /* Legal [Start] */
    .Legal-Container
    {
        padding: var(--spacing-lg);
    }

    .Legal-Container-Content-Box
    {
        width: 100%;
        padding: var(--spacing-md);
    }
    
    .Legal-Container-Content-Text-Group
    {
        padding-left: 0;
    }
    /* Legal [End] */



    /* Error Pages [Start] */
    .Error-Page-Container
    {
        padding: var(--spacing-lg);
    }

    .Error-Page-Logo
    {
        width: 100%;
    }
    /* Error Pages [End] */
}
/* Mobile Responsiveness [End] */