.Joy-Hero-Banner {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translate(-50%);
    height: var(--joy-hero-banner-height);
}

.Joy-Hero-Banner:has(.Avada-LoyaltyPage__Loading--root) {
    padding-block: 24px;
}

.Joy-Hero-Banner_Image {
    top: 0;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    min-height: 345px;
    display: block !important;
}

.Joy-Hero-Banner_Container {
    position: absolute;
}

.Joy-Hero-Banner_Container.middle-left {
    left: calc(3.6em);
    transform: translate(0%, -50%);
    top: 50%;
}

.Joy-Hero-Banner_Container.middle-right {
    right: calc(3.6em);
    transform: translate(0%, -50%);
    top: 50%;
}

.Joy-Hero-Banner_Container.middle-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Joy-Hero-Banner_Container.Joy-Hero-Banner_Container--WithoutImage {
    position: unset;
    transform: unset;
    margin: 16px 0 16px 16px;
}

.Joy-Hero-Banner_Container.top-left {
    top: 5rem;
    left: 5rem;
}

.Joy-Hero-Banner_Container.top-right {
    top: 5rem;
    right: 5rem;
}

.Joy-Hero-Banner_Container.top-center {
    left: 50%;
    transform: translate(-50%);
    top: 5rem;
}

.Joy-Hero-Banner_Container.bottom-left {
    bottom: 5rem;
    left: 5rem;
}

.Joy-Hero-Banner_Container.bottom-right {
    bottom: 5rem;
    right: 5rem;
}

.Joy-Hero-Banner_Container.bottom-center {
    left: 50%;
    transform: translate(-50%);
    bottom: 5rem;
}

.Joy-Hero-Banner_Content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Joy-Hero-Banner_Content.left {
    align-items: flex-start;
}

.Joy-Hero-Banner_Content.right {
    align-items: flex-end;
}

.Joy-Hero-Banner_Content.center {
    align-items: center;
}

.Joy-Hero-Banner_Title {
    all: unset;
    display: block;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.Joy-Hero-Banner_ActionGroup {
    margin-top: 36px;
    display: flex;
    gap: 24px;
}

.Joy-Hero-Banner_ActionGroup a {
    padding: 10px;
    width: 220px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 0;
    transition: all 0.15s ease-in-out;
}

.Joy-Hero-Banner_ActionGroup.vip-tier {
    margin-top: 0;
}

.Joy-Hero-Banner_ModalLoading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 317px;
    height: 168px;
    z-index: 1000;
    background: #fff;
    border-radius: 4px;
    padding: 24px;

    &.transform-in {
        display: block;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }

    .Joy-Hero-Banner_ModalLoading--spinner {
        display: block;
        margin: 0px auto;
        width: 44px;
        height: 44px;
        border: 2px solid #303030;
        border-top: 2px solid transparent;
        border-radius: 50%;
        animation: spin 0.5s linear 0s infinite;
    }

    .Joy-Hero-Banner_ModalLoading--description {
        margin-top: 32px;
        text-align: center;
        color: #303030;
        font-size: 13px;
        font-weight: 450;
    }
}

@keyframes spin {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(359deg);
    }
}

@media only screen and (max-width: 460px) {
    .Joy-Hero-Banner {
        height: unset;
    }

    .Joy-Hero-Banner_Image,
    .Joy-Hero-Banner_Image > div {
        min-height: 450px;
    }

    .Joy-Hero-Banner_ActionGroup {
        flex-direction: column;
    }

    .Joy-Hero-Banner_Container {
        width: 85vw;
    }

    .Joy-Hero-Banner_Container.middle-left,
    .Joy-Hero-Banner_Container.middle-right {
        left: calc(1.5em);
    }

    .Joy-Hero-Banner_Content {
        align-items: flex-start;

        &.center {
            align-items: inherit;
        }

        &.mobile-left {
            align-items: flex-start;
        }

        &.mobile-right {
            align-items: flex-end;
        }

        &.mobile-center {
            align-items: center;
        }

        &.Joy-Hero-Banner_Container--WithoutImage {
            align-items: start;
        }
    }

    .Joy-Hero-Banner_Title,
    .Joy-Hero-Banner_Descriptions {
        text-align: left;

        &.center {
            text-align: inherit;
        }

        &.mobile-left {
            text-align: left;
        }

        &.mobile-right {
            text-align: right;
        }

        &.mobile-center {
            text-align: center;
        }

        &.Joy-Hero-Banner_Container--WithoutImage {
            text-align: left;
        }
    }

    .Joy-Hero-Banner_Container .mobile-left {
        left: calc(1.5em);
    }

    .Joy-Hero-Banner_Container .mobile-right .Joy-LineClamp,
    .Joy-Hero-Banner_Container .mobile-right .Joy-LineClamp_Subtitle {
        margin-right: 1.5rem;
        right: 1.5rem;
        position: relative;
    }
}

@media only screen and (min-width: 750px) {
    .Joy-Hero-Banner_Title.right,
    .Joy-Hero-Banner_Descriptions.right {
        text-align: right;
    }

    .Joy-Hero-Banner_Container.middle-right .Joy-LineClamp_Subtitle,
    .Joy-Hero-Banner_Container.top-right .Joy-LineClamp_Subtitle,
    .Joy-Hero-Banner_Container.bottom-right .Joy-LineClamp_Subtitle,
    .Joy-Hero-Banner_Container.middle-left .Joy-LineClamp_Subtitle,
    .Joy-Hero-Banner_Container.top-left .Joy-LineClamp_Subtitle,
    .Joy-Hero-Banner_Container.bottom-left .Joy-LineClamp_Subtitle {
        margin: 0 !important;
    }

    .Joy-Hero-Banner_Container.middle-center .Joy-Hero-Banner_Descriptions.right {
        text-align: right;
    }

    .Joy-Hero-Banner_Container.middle-center .Joy-Hero-Banner_Title.right {
        text-align: right;
    }

    .Joy-Hero-Banner_Title.left,
    .Joy-Hero-Banner_Descriptions.left {
        text-align: left;
    }

    .Joy-Hero-Banner_Title.center,
    .Joy-Hero-Banner_Descriptions.center {
        text-align: center;
    }
}