html {
    padding: 0;
    margin: 0;
    background: var(--mud-palette-background);
    background: linear-gradient(90deg, var(--mud-palette-background) 3%, #ebebeb 100%);
    max-width: 100vw;
    overflow-x: hidden;
}

/*////////////////////////// begin Global Styles //////////////////////////*/

.HeroButton {
    /*    background-color: var(--mud-palette-text-primary);
    color: hsl(210, 40%, 98%);*/
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1.5rem;
}

.HeroButton:hover {
    background-color: rgb(from var(--mud-palette-text-primary) r g b / .9) !important;
}

.text-4xl {
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 3rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

@media (max-width: 480px) {
    .text-4xl {
        font-size: 1.75rem;
    }
}

.text-lg {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

@media (max-width: 480px) {
    .text-lg {
        font-size: 1rem;
    }
}

@media (hover: hover) and (pointer: fine) {
    .mud-button:hover {
        background-color: unset;
    }
}

/*////////////////////////// end Global Styles //////////////////////////*/

/*////////////////////////// begin Header Component //////////////////////////*/

.sticky-header {
    position: fixed;
    top: 0;
    padding-top: 50px;
    z-index: 9;
    width: 100%;
    background: transparent;
    border: none;
    padding-left: unset;
    padding-right: unset;
}

.header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 16px;
    box-shadow: 0 10px 40px #0000001a;
    justify-content: space-between;
    max-width: 70%;
}

@media (max-width: 1024px) {
    .header {
        max-width: 80%; /* use more width */
        padding: 10px 1.5rem; /* reduce padding significantly */
    }
}

@media (max-width: 600px) {
    .header {
        max-width: 90%;
        padding: 10px 1rem; /* even smaller padding */
        gap: 0.5rem; /* space between vertically stacked items */
    }
}

@media (min-width: 990px) {
    .header {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

@media (max-width: 768px) {
    .HeaderMediaBig {
        display: none;
    }
}

@media (min-width: 768px) {
    .HeaderMediaSmall {
        display: none;
    }
}

@media (min-width: 768px) {
    .HeaderRightContainer {
        gap: 1rem;
    }
}

/*////////////////////////// end Header Component //////////////////////////*/

/*////////////////////////// begin Hero Component //////////////////////////*/

.HeroGrid {
    padding: 10rem 4rem 5rem 4rem;
    color: var(--mud-palette-text-primary);
    display: flex;
    justify-content: space-between;
    background-image: linear-gradient(to bottom right, #eef2ff, rgba(238, 242, 255, 0));
}

@media (max-width: 768px) {
    .HeroGrid {
        padding: 10rem 1.5rem 5rem 1.5rem;
    }
}

.list-disc {
    margin-top: 1rem;
    color: var(--mud-palette-text-secondary);
    padding-left: 1.5rem;
    list-style-type: disc;
}

.font-semibold {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
}

.shadow-xl {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-width: 1px;
    border-radius: 1rem;
    border-color: #e5e7eb;
}

/*////////////////////////// end Hero Component //////////////////////////*/

/*////////////////////////// begin Icon Component //////////////////////////*/

.IconCompContainer {
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (max-width: 768px) {
    .IconCompContainer {
        padding: 0 3rem;
    }
}

/*////////////////////////// end Icon Component //////////////////////////*/

/*////////////////////////// begin Image Component //////////////////////////*/

.ImageSectionContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 5rem 0;
    max-width: none;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

@media (max-width: 1025px) {
    .ImageSectionContainer {
        gap: 2rem;
    }
}

.ImageSectionGrid {
    display: flex;
    gap: 4rem;
    padding: 2rem;
    width: 100%;
    margin: 0;
    text-align: left;
}

@media (max-width: 960px) {
    .ImageSectionGrid {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .ImageSectionGrid {
        padding: 0 3rem;
    }
}

.ImageSectionGridReverse {
    display: flex;
    gap: 4rem;
    padding: 2rem;
    width: 100%;
    margin: 0;
}

@media (max-width: 960px) {
    .ImageSectionGridReverse {
        flex-direction: column-reverse;
    }
}

@media (max-width: 768px) {
    .ImageSectionGridReverse {
        padding: 0 3rem;
    }
}

.imageContainer,
.imageContainerImage {
    width: 50%;
}

.imageContainerImage {
    height: 24rem;
}

@media (max-width: 768px) {
    .imageContainerImage {
        height: 18rem;
    }
}

.imageContainerImage,
.imageContainerImageRev {
/*    opacity: 1;*/
    will-change: clip-path, opacity;
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .imageContainerImage,
        .imageContainerImageRev {
            animation: clip-reveal linear forwards;
            animation-timeline: view();
            animation-range: entry 20% cover 50%;
            opacity: 0;
        }

        .imageContainerImage {
            clip-path: inset(0 100% 0 0); /* reveal from left */
        }

        .imageContainerImageRev {
            clip-path: inset(0 0 0 100%); /* reveal from right */
        }
    }

    @keyframes clip-reveal {
        to {
            clip-path: inset(0 0 0 0); /* fully revealed */
            opacity: 1;
        }
    }
}

/*////////////////////////// end Image Component //////////////////////////*/

/*////////////////////////// begin FAQ Component //////////////////////////*/

.wrapperContainer {
    padding: 5rem 3rem;
}

@media (max-width: 768px) {
    .wrapperContainer {
        padding: 5rem 2rem 3rem 2rem;
    }
}

.FAQContainer {
    background-color: var(--mud-palette-background);
    max-width: unset;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

.ExpansionPanelClass {
    margin: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: var(--mud-palette-surface);
    border-radius: 0.75rem;
}

.mud-expand-panel:first-child {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.mud-expand-panel:last-child {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.mud-expand-panel.mud-panel-expanded {
    margin: 0.5rem;
    border-radius: 0.75rem;
}

.MudExpansionPanels {
    width: 70%;
    max-width: 45rem;
}

@media (max-width: 768px) {
    .MudExpansionPanels {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .MudExpansionPanels {
        width: 100%;
    }
}

/*////////////////////////// end FAQ Component //////////////////////////*/

/*////////////////////////// begin Payment Component //////////////////////////*/

.bigContainerPayment {
    padding: 10rem 4rem 5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    background-color: var(--mud-palette-background);
    max-width: unset;
}

@media (max-width: 768px) {
    .bigContainer {
        padding: 12rem 1.5rem 5rem 1.5rem;
    }
}

/*////////////////////////// end Payment Component //////////////////////////*/

/*////////////////////////// begin Contact Component //////////////////////////*/

.BigContactContainerPayment {
    padding: 10rem 4rem 5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    max-width: unset;
}

@media (max-width: 768px) {
    .BigContactContainerPayment {
        padding: 12rem 1.5rem 5rem 1.5rem;
    }
}

/*////////////////////////// end Contact Component //////////////////////////*/

/*////////////////////////// begin Footer Component //////////////////////////*/

.mud-button {
    font-weight: unset;
    text-transform: unset;
}

.TopFooter,
.BottomFooter {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

@media (max-width: 768px) {
    .TopFooter {
        flex-direction: column;
        gap: 1rem;
    }

    .BottomFooter {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .BottomFooterLast {
        flex-direction: column-reverse;
        width: 100% !important;
    }

    .BottomFooterLastTop {
        display: flex;
        justify-content: center;
    }

    .BottomFooterLastBottom {
        justify-content: center;
    }
}

/*////////////////////////// end Footer Component //////////////////////////*/

/*////////////////////////// begin LanguageSelector Component //////////////////////////*/

.mud-select .mud-select-input {
    width: fit-content;
}

.sticky-header .mud-select .mud-select-input .mud-input-slot {
    width: fit-content;
    height: 1.5lh;
}

.mud-popover.mud-popover-relative-width {
    width: fit-content;
    max-height: unset !important;
}

.mud-input {
    line-height: unset;
}

.LanguageSelector .mud-input.mud-input-underline:after,
.LanguageSelector .mud-input.mud-input-underline:before {
    border-bottom: none !important;
}

.LanguageSelector .mud-button {
    height: 100%;
    width: 100%;
    padding: 0;
}

.mud-popover .mud-list {
    max-height: none;
}

.overflow-y-auto {
    overflow-y: hidden;
}

/*////////////////////////// end LanguageSelector Component //////////////////////////*/
/*.gl-disable-transitions * {
    transition: none !important;
}*/
.mud-main-content {
    padding-top: 0 !important;
}

.text-secondary {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-top: 0.75rem;
}

.gl-svg-wrapper {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

    .gl-svg-wrapper.fade-out {
        opacity: 0;
    }

.gl-svg-dark {
    fill: var(--mud-palette-white);
}

.gl-svg-light {
    fill: var(--mud-palette-black);
}

/*////////////////////////// begin Documentation Components //////////////////////////*/

/* Docs.razor */
.docs-layout {
    background-color: var(--mud-palette-background);
}

.docs-container {
    padding: 5rem 2rem 5rem 2rem;
}

.toc-container {
    position: sticky;
    top: 80px;
    padding-left: 2rem;
}

.toc-title {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@media (max-width: 960px) {
    .docs-container {
        padding: 5rem 2rem 5rem 2rem;
    }
}

/* DocsContent.razor */
.docs-content {
    max-width: 768px;
    margin: 0 auto;
    font-family: var(--mud-typography-default-family);
}

p > img {
    width: 100%;
    padding-bottom: 2rem;
}

.docs-navigation {
    display: flex;
    justify-content: flex-end;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* DocsNavMenu.razor */
.docs-nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-background);
}

.docs-nav-header {
    padding: 1.5rem 1.5rem 1rem;
}

.docs-nav-menu {
    padding: 0.5rem 0.75rem;
}

.nav-section {
    padding-top: 0.5rem;
}

.docs-nav-item {
    border-radius: 0.375rem;
    margin: 0.125rem 0;
    font-size: 0.875rem;
    min-height: 2.25rem;
    color: var(--mud-palette-text-secondary);
}

.docs-nav-group {
    margin: 0.25rem 0;
}

.docs-nav ::deep .mud-nav-link {
    padding: 0.5rem 0.75rem;
    transition: all 0.15s ease-in-out;
}

.docs-nav ::deep .mud-nav-link:hover:not(.active) {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
    color: var(--mud-palette-text-primary);
}

.docs-nav ::deep .mud-nav-link.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.docs-nav ::deep .mud-nav-group > .mud-nav-link {
    padding-left: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.docs-nav ::deep .mud-nav-group .mud-nav-group-children {
    padding-left: 0.75rem;
}

.docs-nav ::deep .mud-nav-group:not(.mud-nav-group-expanded) > .mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

/* DocsTableOfContents.razor */
.toc {
    position: sticky;
    top: 80px;
}

.toc-list {
    padding: 0;
}

.toc-item {
    font-size: 0.875rem;
    padding: 0.25rem 0;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    border-radius: 0.375rem;
    color: var(--mud-palette-text-secondary);
}

.toc-item:hover {
    color: var(--mud-palette-text-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
}

.toc .level-1 {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.toc .level-2 {
    padding-left: 1rem;
}

.toc .level-3 {
    padding-left: 2rem;
    font-size: 0.8125rem;
}

.toc ::deep .mud-list-item {
    padding: 0.25rem 0.75rem;
    min-height: 2rem;
}

.toc ::deep .mud-list-item-text {
    margin: 0;
}

/*////////////////////////// end Documentation Components //////////////////////////*/

/*////////////////////////// begin md styles //////////////////////////*/

.markdown-body {
    background-color: white;
    color: black;
}

    .markdown-body table tr {
        background-color: unset;
    }

        .markdown-body table tr:nth-child(2n) {
            background-color: unset;
        }

    .markdown-body blockquote {
        color: unset;
    }

/*////////////////////////// end md styles //////////////////////////*/