:root {
    --custom-palette-quaternary: #0113db;
}

p {
    text-align: center;
}

li > p {
    text-align: unset;
}

/* Unique */

#work-with-us-image {
    position: relative;
    height: 100%;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}

#contact-form .mud-input-outlined-border {
    border-radius: 48px !important;
    border: 2px solid var(--mud-palette-primary) !important;
}

/* Map */

#map {
    height: 600px;
}
@media screen and (max-width: 600px) {
    #map {
        height: 400px;
    }
}

.marker-cluster-small, .marker-cluster-medium {
    background-color: #919dec !important;
}

.marker-cluster-small div, .marker-cluster-medium div {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-surface) !important;
}

.locations-list {
    height: 548px;
    overflow-y: scroll;
}
@media screen and (max-width: 600px) {
    .locations-list {
        height: 200px;
    }
}

/* Navigation Menu */

.custom-nav-menu .mud-nav-item {
    width: inherit !important;
    margin-left: 16px;
    margin-right: 16px;
}

.custom-nav-menu .mud-nav-link {
    padding: 0 !important;
}

.custom-nav-menu .mud-nav-link-text {
    margin: 0;
    text-align: center;
    font-weight: 600;
}

.custom-nav-menu .mud-nav-item:hover~.subpage-menu,
.custom-nav-menu .subpage-menu:hover {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subpage-menu {
    position: absolute;
    width: fit-content !important;
    background-color: var(--mud-palette-surface);
    padding: 16px 8px 8px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    border-radius: 0px 0px 4px 4px;
}
.subpage-item {
    white-space: nowrap;
}

.small-nav-menu {
    position: fixed;
    top: 120px;
    width: 100vw;
    left: 0;
}

/* Frame */

.frame-border {
    position: relative;
    border: 16px solid var(--mud-palette-tertiary);
    width: 100%;
}

.frame-top-icon {
    position: absolute;
    left: -32px;
    top: -32px;
    width: 64px;
    height: 64px;
}

.frame-bottom-icon {
    position: absolute;
    right: -32px;
    bottom: -32px;
    transform: scaleX(-1) scaleY(-1);
    width: 64px;
    height: 64px;
}

.frame-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Borders */

.border-bottom {
    border-bottom: 8px solid var(--mud-palette-primary);
}

.border-bottom-light {
    border-bottom: 4px solid var(--custom-palette-quaternary);
}

.border-bottom-extra-light {
    border-bottom: 2px solid var(--mud-palette-primary);
}

/* Lines */

.line-rounded {
    position: absolute;
    width: 100%;
    height: 8px;
    background-color: var(--mud-palette-primary);
    border-radius: 24px;
}

.line-rounded-light {
    width: 100%;
    height: 4px;
    background-color: var(--mud-palette-primary);
    border-radius: 24px;
}

.line-medium {
    width: 100%;
    height: 16px;
    background-color: var(--mud-palette-primary);
}

/* Split Image Text */

.split-title {
    padding: 16px 0px;
    font-size: 2.5rem;
}

.split-side-image {
    position: absolute;
    object-fit: cover !important;
    width: 50vw;
    height: 100%;
    z-index: -1;
    left: 50%;
}

.split-side-text {
    position: absolute;
    background-color: var(--mud-palette-primary);
    width: 100vw;
    height: 100%;
    z-index: -2;
    right: 50%;
}

.split-side-left {
    margin-left: -50vw;
}

.split-side-right {
    margin-right: -50vw;
}

@media screen and (max-width: 958px) {
    .split-side-text {
        right: initial;
    }

    .split-side-image {
        left: initial;
    }

    .split-side-left {
        margin-left: -24px;
    }

    .split-side-right {
        margin-left: -24px;
    }
}

/* Lists */

.large-list {
    margin-left: 24px;
}

.large-list > li,
.large-list > li > p {
    font-size: 1.5rem;
}

.large-font-size {
    font-size: 4rem;
    font-weight: 600;
}

/* Card */

.card-info-title-secondary {
    position: absolute;
    background-color: var(--mud-palette-secondary);
    color: var(--mud-palette-surface);
    border-radius: 24px;
    top: -40px;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
}
.card-info-body-primary {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    border-radius: 24px;
    height: 100%;
}

.card-info-title-primary {
    position: absolute;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    border-radius: 24px;
    top: -40px;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
}
.card-info-body-secondary {
    background-color: var(--mud-palette-secondary);
    color: var(--mud-palette-surface);
    border-radius: 24px;
    height: 100%;
}

/* Other */

.stylized-circle {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
}
.stylized-circle-text {
    font-family: serif;
    font-size: 8rem;
    color: var(--mud-palette-surface);
    padding: 8px 16px;
}

.highlighted-text {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    padding-left: 8px;
    padding-right: 8px;
}

.overlapping-highlighted-text {
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
}

.primary-background-surface-text-color {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
}

.pickup-point-chip {
    padding: 2px 4px;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    text-wrap: nowrap;
}

.custom-spacing > .mud-grid-item {
    padding-bottom: 100px;
}

.banner-title {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    padding: 24px 0;
    text-align: center;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-surface);
    margin-bottom: 24px;
}

.banner-title-white {
    padding: 24px 0;
}

.banner-title-gray {
    padding: 24px 0;
    background: linear-gradient(90deg,var(--mud-palette-surface) 0%, var(--mud-palette-tertiary) 100%);
}

.background-image {
    position: absolute;
    width: 101vw;
    height: 100%;
    z-index: -1;
    top: 0 !important;
    object-fit: cover !important;
    object-position: left !important;
    left: 50%;
    margin-left: -50vw;
}

.overlapping-tab-extended-back {
    position: absolute;
    background-color: var(--mud-palette-tertiary);
    width: 100%;
    height: 100%;
    top: -50%;
    z-index: -1;
}

/* Generic */

.height-100 {
    height: 100% !important;
}

.width-100 {
    width: 100% !important;
}

.relative-position {
    position: relative !important;
}

.surface-color {
    color: var(--mud-palette-surface) !important;
}

.black-color {
    color: var(--mud-palette-black) !important;
}

.normal-font-weight {
    font-weight: 400 !important;
}

.half-vh-height {
    height: 50vh;
}

.full-vh-height {
    height: 100vh;
}

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

.align-text-start {
    text-align: start !important;
}

/* ================================

   MudBlazor Breakpoint Helpers

   Equivalent to MudHidden behavior

   ================================ */

/* Hide only XS: 0px - 599.95px */

@media (max-width: 599.98px) {

    .hide-xs {
        display: none !important;
    }
}

/* Hide only SM: 600px - 959.95px */

@media (min-width: 600px) and (max-width: 959.98px) {

    .hide-sm {
        display: none !important;
    }
}

/* Hide only MD: 960px - 1279.95px */

@media (min-width: 960px) and (max-width: 1279.98px) {

    .hide-md {
        display: none !important;
    }
}

/* Hide only LG: 1280px - 1919.95px */

@media (min-width: 1280px) and (max-width: 1919.98px) {

    .hide-lg {
        display: none !important;
    }
}

/* Hide only XL: 1920px - 2559.95px */

@media (min-width: 1920px) and (max-width: 2559.98px) {

    .hide-xl {
        display: none !important;
    }
}

/* Hide only XXL: 2560px+ */

@media (min-width: 2560px) {

    .hide-xxl {
        display: none !important;
    }
}

/* ================================

   Hide and down

   ================================ */

/* Equivalent to Breakpoint.Xs */

@media (max-width: 599.98px) {

    .hide-xs-and-down {
        display: none !important;
    }
}

/* Equivalent to Breakpoint.SmAndDown */

@media (max-width: 959.98px) {

    .hide-sm-and-down {
        display: none !important;
    }
}

/* Equivalent to Breakpoint.MdAndDown */

@media (max-width: 1279.98px) {

    .hide-md-and-down {
        display: none !important;
    }
}

/* Equivalent to Breakpoint.LgAndDown */

@media (max-width: 1919.98px) {

    .hide-lg-and-down {
        display: none !important;
    }
}

/* Equivalent to Breakpoint.XlAndDown */

@media (max-width: 2559.98px) {

    .hide-xl-and-down {
        display: none !important;
    }
}

/* Equivalent to Breakpoint.XxlAndDown */

.hide-xxl-and-down {
    display: none !important;
}

/* ================================

   Hide and up

   ================================ */

/* Equivalent to Breakpoint.XsAndUp */

.hide-xs-and-up {
    display: none !important;
}

/* Equivalent to Breakpoint.SmAndUp */

@media (min-width: 600px) {

    .hide-sm-and-up {
        display: none !important;
    }
}

/* Equivalent to Breakpoint.MdAndUp */

@media (min-width: 960px) {

    .hide-md-and-up {
        display: none !important;
    }
}

/* Equivalent to Breakpoint.LgAndUp */

@media (min-width: 1280px) {

    .hide-lg-and-up {
        display: none !important;
    }
}

/* Equivalent to Breakpoint.XlAndUp */

@media (min-width: 1920px) {

    .hide-xl-and-up {
        display: none !important;
    }
}

/* Equivalent to Breakpoint.XxlAndUp */

@media (min-width: 2560px) {

    .hide-xxl-and-up {
        display: none !important;
    }
}

/* Cookie Consent Banner */

.cookie-consent-banner {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 320px;
    max-width: calc(100vw - 48px);
    border-radius: 16px;
    z-index: 9999;
}

.cookie-consent-text {
    color: var(--mud-palette-text-secondary);
}

.cookie-consent-categories,
.cookie-consent-categories * {
    font-size: 0.75rem !important;
}