body {
    margin: unset;
    overflow-x: hidden;
    background-color: #000000;
}

button {
    padding: unset;
}


@media screen and (min-width: 1401px) {
    .banner_section {
        height: 100vh;
        background:
            url("../media/banner/HB_invitation_desktop_1920x800_1.webp") no-repeat center center;
        background-size: cover;
    }


    .logo_banner_section {
        width: 100%;

        display: flex;
        justify-content: center;

        padding-top: 40px;
    }

    .logo_banner_section img {
        width: 170px;
        height: auto;

    }

    .banner_section_content {
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px;


        /* padding-top: calc((388 * 100vw) / 1920); */
        padding-top: calc((1200 * 100vh) / 1920);
        /* 137.5% */
    }

    .banner_section_cta {

        display: flex;
        justify-content: center;

        position: relative;
    }

    .banner_section_cta img:not(.sparkle) {
        width: calc((390 * 100vw) / 1920);
        height: auto;
    }


    .video_section {
        background:
            url("../media/video/video_back_1920x690.webp?v=1") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: calc((690 * 100vw) / 1920);

        padding-top: calc((30 * 100vw) / 1920);

    }


    .video_part {


        /* display: flex;
    justify-content: center;

    position: relative;
    width: 100%;
    max-width: 100%; */

        display: flex;
        justify-content: center;
        /* center horizontally */
        align-items: center;
        /* center vertically if parent has height */
        width: 100%;
        position: relative;
        /* overflow: hidden; */

    }

    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        background: rgba(18, 0, 37, 0.75);
        background-color: #120025BF;
    }


    .video-button {
        transition: opacity 0.3s ease;
    }

    .video-button.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background-color: unset;
        border: unset;
        width: 60px;
        height: 60px;
    }

    .video-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10;
    }

    .video_section_content {
        padding-top: calc((30 * 100vw) / 1920);

        display: flex;
        justify-content: center;

        color: #D5AEFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((26 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40px * 100vw) / 1920);
        /* 153.846% */
    }

    .explanation_section {

        background:
            url("../media/explanation/characters.webp?v=1") no-repeat center center,
            url("../media/explanation/back frame.webp?v=1") no-repeat center center;

        /* Set size for each background image */
        background-size: contain, cover;


        width: 100%;
        height: calc((534 * 100vw) / 1920);

        display: flex;
        justify-content: center;
    }

    .explanation_section_content {
        width: calc((689 * 100vw) / 1920);
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((26 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40 * 100vw) / 1920);
        /* 153.846% */
        text-align: center;

        padding-top: calc((155 * 100vw) / 1920);

    }


    .footer_section {
        background:
            url("../media/footer/Footer_banner_back_1920x800.webp?v=1") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: calc((800 * 100vw) / 1920);
    }

    .footer_section_icon {
        display: flex;
        justify-content: center;

        padding-top: calc((30 * 100vw) / 1920);

    }

    .footer_section_icon img {
        width: calc((370 * 100vw) / 1920);
        height: auto;
    }

    .footer_section_content {

        display: flex;
        justify-content: center;
    }

    .footer_section_content span {

        width: calc((1084 * 100vw) / 1920);
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: 26px;
        font-style: normal;
        font-weight: 500;
        line-height: 40px;
        /* 153.846% */
    }

    .bottom_bar_section {
        background:
            url("../media/footer/Footer_background.webp") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: 80px;

        display: flex;
        justify-content: center;
    }

    .bottom_bar_section_content {
        color: #FFF;
        text-align: center;
        /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000; */
        font-family: "Kumbh Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;

        padding-top: 30px;
    }


    .video_part {
        margin: 0 auto;
        width: calc((859 * 100vw) / 1920);
        position: relative;
        display: inline-block;
    }

    /* Your video keeps dynamic size */
    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        display: block;

        margin: 0 auto;
    }

    /* Overlay matches the video */
    .video-overlay {
        position: absolute;

        top: 0;
        left: 0;
        /* width: 100%; */
        width: calc((859 * 100vw) / 1920);
        /* matches video width */
        height: 100%;
        /* matches video height */
        border-radius: 16px;
        /* same rounding as video */
        background: rgba(18, 0, 37, 0.75);

        display: flex;
        justify-content: center;
        align-items: center;

        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background: none;
        border: none;
        cursor: pointer;
    }



    .video_part {
        display: flex;
        justify-content: center;
        /* horizontal center */
        width: 100%;
        position: relative;
    }

    .video_wrapper {
        width: calc((859 * 100vw) / 1920);
        max-width: 100%;
        position: relative;
        /* important for overlay to be relative to this */
    }

    .video_wrapper video {
        width: 100%;
        height: auto;
        border-radius: 16px;
        border: 2px solid #9C67D2;
        display: block;
    }

    /* Overlay now matches wrapper/video size */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* matches wrapper width */
        /* height: 100%; */
        height: calc(100% - 4px);
        /* matches wrapper height */
        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        border: 2px solid #9C67D2;
        background: rgba(18, 0, 37, 0.75);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

}


@media only screen and (max-width: 1400px) and (min-width:1280px) {
    .banner_section {
        height: 100vh;
        background:
            url("../media/banner/HB_invitation_desktop_1920x800_1.webp") no-repeat center center;
        background-size: cover;
    }


    .logo_banner_section {
        width: 100%;

        display: flex;
        justify-content: center;

        padding-top: calc((40 * 100vw) / 1920);
    }

    .logo_banner_section img {
        width: calc((170 * 100vw) / 1920);
        height: auto;

    }

    .banner_section_content {
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((32* 100vw) / 1920);
        ;
        font-style: normal;
        font-weight: 700;
        line-height: calc((44 * 100vw) / 1920);


        padding-top: calc((465 * 100vw) / 1920);
        /* 137.5% */
    }

    .banner_section_cta {

        position: relative;

        display: flex;
        justify-content: center;
    }

    .banner_section_cta img:not(.sparkle) {
        width: calc((390 * 100vw) / 1280);
        height: auto;
    }


    .video_section {
        background:
            url("../media/video/video_back_1920x690.webp?v=1") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: calc((690 * 100vw) / 1920);

        padding-top: calc((30 * 100vw) / 1920);

    }


    .video_part {


        /* display: flex;
    justify-content: center;

    position: relative;
    width: 100%;
    max-width: 100%; */

        display: flex;
        justify-content: center;
        /* center horizontally */
        align-items: center;
        /* center vertically if parent has height */
        width: 100%;
        position: relative;
        /* overflow: hidden; */

    }

    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        background: rgba(18, 0, 37, 0.75);
        background-color: #120025BF;
    }


    .video-button {
        transition: opacity 0.3s ease;
    }

    .video-button.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background-color: unset;
        border: unset;
        width: 60px;
        height: 60px;
    }

    .video-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10;
    }

    .video_section_content {
        padding-top: calc((30 * 100vw) / 1920);

        display: flex;
        justify-content: center;

        color: #D5AEFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((26 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40px * 100vw) / 1920);
        /* 153.846% */
    }

    .explanation_section {

        background:
            url("../media/explanation/characters.webp?v=1") no-repeat center center,
            url("../media/explanation/back frame.webp?v=1") no-repeat center center;

        /* Set size for each background image */
        background-size: contain, cover;


        width: 100%;
        height: calc((534 * 100vw) / 1920);

        display: flex;
        justify-content: center;
    }

    .explanation_section_content {
        width: calc((689 * 100vw) / 1920);
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((23 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40 * 100vw) / 1920);
        /* 153.846% */
        text-align: center;

        padding-top: calc((155 * 100vw) / 1920);

    }


    .footer_section {
        background:
            url("../media/footer/Footer_banner_back_1920x800.webp?v=1") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: calc((800 * 100vw) / 1920);
    }

    .footer_section_icon {
        display: flex;
        justify-content: center;

        padding-top: calc((30 * 100vw) / 1920);

    }

    .footer_section_icon img {
        width: calc((370 * 100vw) / 1920);
        height: auto;
    }

    .footer_section_content {

        display: flex;
        justify-content: center;
    }

    .footer_section_content span {

        width: calc((1084 * 100vw) / 1920);
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((26 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40 * 100vw) / 1920);
        /* 153.846% */
    }

    .bottom_bar_section {
        background:
            url("../media/footer/Footer_background.webp") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: 80px;

        display: flex;
        justify-content: center;
    }

    .bottom_bar_section_content {
        color: #FFF;
        text-align: center;
        /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000; */
        font-family: "Kumbh Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;

        padding-top: 30px;
    }


    .video_part {
        margin: 0 auto;
        width: calc((859 * 100vw) / 1920);
        position: relative;
        display: inline-block;
    }

    /* Your video keeps dynamic size */
    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        display: block;

        margin: 0 auto;
    }

    /* Overlay matches the video */
    .video-overlay {
        position: absolute;

        top: 0;
        left: 0;
        /* width: 100%; */
        width: calc((859 * 100vw) / 1920);
        /* matches video width */
        height: 100%;
        /* matches video height */
        border-radius: 16px;
        /* same rounding as video */
        background: rgba(18, 0, 37, 0.75);

        display: flex;
        justify-content: center;
        align-items: center;

        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background: none;
        border: none;
        cursor: pointer;
    }



    .video_part {
        display: flex;
        justify-content: center;
        /* horizontal center */
        width: 100%;
        position: relative;
    }

    .video_wrapper {
        width: calc((859 * 100vw) / 1920);
        max-width: 100%;
        position: relative;
        /* important for overlay to be relative to this */
    }

    .video_wrapper video {
        width: 100%;
        height: auto;
        border-radius: 16px;
        border: 2px solid #9C67D2;
        display: block;
    }

    /* Overlay now matches wrapper/video size */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* matches wrapper width */
        /* height: 100%; */
        height: calc(100% - 4px);
        /* matches wrapper height */
        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        border: 2px solid #9C67D2;
        background: rgba(18, 0, 37, 0.75);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

}


@media only screen and (max-width: 1279px) and (min-width:1024px) {
    .banner_section {
        height: 100vh;
        background:
            url("../media/banner/HB_invitation_desktop_1920x800_1.webp") no-repeat center center;
        background-size: cover;
    }


    .logo_banner_section {
        width: 100%;

        display: flex;
        justify-content: center;

        padding-top: calc((40 * 100vw) / 1920);
    }

    .logo_banner_section img {
        width: calc((170 * 100vw) / 1920);
        height: auto;

    }

    .banner_section_content {
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((32* 100vw) / 1920);
        ;
        font-style: normal;
        font-weight: 700;
        line-height: calc((44 * 100vw) / 1920);


        padding-top: calc((585 * 100vw) / 1920);
        /* 137.5% */
    }

    .banner_section_cta {

        position: relative;

        display: flex;
        justify-content: center;
    }

    .banner_section_cta img:not(.sparkle) {
        width: calc((390 * 100vw) / 1280);
        height: auto;
    }


    .video_section {
        background:
            url("../media/video/video_back_1920x690.webp?v=1") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: calc((690 * 100vw) / 1920);

        padding-top: calc((30 * 100vw) / 1920);

    }


    .video_part {


        /* display: flex;
    justify-content: center;

    position: relative;
    width: 100%;
    max-width: 100%; */

        display: flex;
        justify-content: center;
        /* center horizontally */
        align-items: center;
        /* center vertically if parent has height */
        width: 100%;
        position: relative;
        /* overflow: hidden; */

    }

    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        background: rgba(18, 0, 37, 0.75);
        background-color: #120025BF;
    }


    .video-button {
        transition: opacity 0.3s ease;
    }

    .video-button.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background-color: unset;
        border: unset;
        width: 60px;
        height: 60px;
    }

    .video-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10;
    }

    .video_section_content {
        padding-top: calc((30 * 100vw) / 1920);

        display: flex;
        justify-content: center;

        color: #D5AEFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((26 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40px * 100vw) / 1920);
        /* 153.846% */
    }

    .explanation_section {

        background:
            url("../media/explanation/characters.webp?v=1") no-repeat center center,
            url("../media/explanation/back frame.webp?v=1") no-repeat center center;

        /* Set size for each background image */
        background-size: contain, cover;


        width: 100%;
        height: calc((534 * 100vw) / 1920);

        display: flex;
        justify-content: center;
    }

    .explanation_section_content {
        width: calc((689 * 100vw) / 1920);
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((23 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40 * 100vw) / 1920);
        /* 153.846% */
        text-align: center;

        padding-top: calc((155 * 100vw) / 1920);

    }


    .footer_section {
        background:
            url("../media/footer/Footer_banner_back_1920x800.webp?v=1") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: calc((800 * 100vw) / 1920);
    }

    .footer_section_icon {
        display: flex;
        justify-content: center;

        padding-top: calc((30 * 100vw) / 1920);

    }

    .footer_section_icon img {
        width: calc((370 * 100vw) / 1920);
        height: auto;
    }

    .footer_section_content {

        display: flex;
        justify-content: center;
    }

    .footer_section_content span {

        width: calc((1084 * 100vw) / 1920);
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((26 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40 * 100vw) / 1920);
        /* 153.846% */
    }

    .bottom_bar_section {
        background:
            url("../media/footer/Footer_background.webp") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: 80px;

        display: flex;
        justify-content: center;
    }

    .bottom_bar_section_content {
        color: #FFF;
        text-align: center;
        /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000; */
        font-family: "Kumbh Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;

        padding-top: 30px;
    }


    .video_part {
        margin: 0 auto;
        width: calc((859 * 100vw) / 1920);
        position: relative;
        display: inline-block;
    }

    /* Your video keeps dynamic size */
    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        display: block;

        margin: 0 auto;
    }

    /* Overlay matches the video */
    .video-overlay {
        position: absolute;

        top: 0;
        left: 0;
        /* width: 100%; */
        width: calc((859 * 100vw) / 1920);
        /* matches video width */
        height: 100%;
        /* matches video height */
        border-radius: 16px;
        /* same rounding as video */
        background: rgba(18, 0, 37, 0.75);

        display: flex;
        justify-content: center;
        align-items: center;

        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background: none;
        border: none;
        cursor: pointer;
    }



    .video_part {
        display: flex;
        justify-content: center;
        /* horizontal center */
        width: 100%;
        position: relative;
    }

    .video_wrapper {
        width: calc((859 * 100vw) / 1920);
        max-width: 100%;
        position: relative;
        /* important for overlay to be relative to this */
    }

    .video_wrapper video {
        width: 100%;
        height: auto;
        border-radius: 16px;
        border: 2px solid #9C67D2;
        display: block;
    }

    /* Overlay now matches wrapper/video size */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* matches wrapper width */
        /* height: 100%; */
        height: calc(100% - 4px);
        /* matches wrapper height */
        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        border: 2px solid #9C67D2;
        background: rgba(18, 0, 37, 0.75);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

}

@media only screen and (max-width: 1023px) and (min-width:768px) {
    .banner_section {
        height: 100vh;
        background:
            url("../media/banner/HB_invitation_desktop_1920x800_1.webp") no-repeat center center;
        background-size: cover;
    }


    .logo_banner_section {
        width: 100%;

        display: flex;
        justify-content: center;

        padding-top: calc((40 * 100vw) / 1920);
    }

    .logo_banner_section img {
        width: calc((170 * 100vw) / 1920);
        height: auto;

    }

    .banner_section_content {
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((32* 100vw) / 1920);
        ;
        font-style: normal;
        font-weight: 700;
        line-height: calc((44 * 100vw) / 1920);


        padding-top: calc((700 * 100vw) / 1920);
        /* 137.5% */
    }

    .banner_section_cta {

        position: relative;

        display: flex;
        justify-content: center;
    }

    .banner_section_cta img:not(.sparkle) {
        width: calc((390 * 100vw) / 1280);
        height: auto;
    }


    .video_section {
        background:
            url("../media/video/video_back_1920x690.webp?v=1") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: calc((690 * 100vw) / 1920);

        padding-top: calc((30 * 100vw) / 1920);

    }


    .video_part {


        /* display: flex;
    justify-content: center;

    position: relative;
    width: 100%;
    max-width: 100%; */

        display: flex;
        justify-content: center;
        /* center horizontally */
        align-items: center;
        /* center vertically if parent has height */
        width: 100%;
        position: relative;
        /* overflow: hidden; */

    }

    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        background: rgba(18, 0, 37, 0.75);
        background-color: #120025BF;
    }


    .video-button {
        transition: opacity 0.3s ease;
    }

    .video-button.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background-color: unset;
        border: unset;
        width: 60px;
        height: 60px;
    }

    .video-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10;
    }

    .video_section_content {
        padding-top: calc((30 * 100vw) / 1920);

        display: flex;
        justify-content: center;

        color: #D5AEFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((26 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40px * 100vw) / 1920);
        /* 153.846% */
    }

    .explanation_section {

        background:
            url("../media/explanation/characters.webp?v=1") no-repeat center center,
            url("../media/explanation/back frame.webp?v=1") no-repeat center center;

        /* Set size for each background image */
        background-size: contain, cover;


        width: 100%;
        height: calc((534 * 100vw) / 1920);

        display: flex;
        justify-content: center;
    }

    .explanation_section_content {
        width: calc((689 * 100vw) / 1920);
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((23 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40 * 100vw) / 1920);
        /* 153.846% */
        text-align: center;

        padding-top: calc((155 * 100vw) / 1920);

    }


    .footer_section {
        background:
            url("../media/footer/Footer_banner_back_1920x800.webp?v=1") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: calc((800 * 100vw) / 1920);
    }

    .footer_section_icon {
        display: flex;
        justify-content: center;

        padding-top: calc((30 * 100vw) / 1920);

    }

    .footer_section_icon img {
        width: calc((370 * 100vw) / 1920);
        height: auto;
    }

    .footer_section_content {

        display: flex;
        justify-content: center;
    }

    .footer_section_content span {

        width: calc((1084 * 100vw) / 1920);
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((26 * 100vw) / 1920);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40 * 100vw) / 1920);
        /* 153.846% */
    }

    .bottom_bar_section {
        background:
            url("../media/footer/Footer_background.webp") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: 80px;

        display: flex;
        justify-content: center;
    }

    .bottom_bar_section_content {
        color: #FFF;
        text-align: center;
        /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000; */
        font-family: "Kumbh Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;

        padding-top: 30px;
    }


    .video_part {
        margin: 0 auto;
        width: calc((859 * 100vw) / 1920);
        position: relative;
        display: inline-block;
    }

    /* Your video keeps dynamic size */
    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        display: block;

        margin: 0 auto;
    }

    /* Overlay matches the video */
    .video-overlay {
        position: absolute;

        top: 0;
        left: 0;
        /* width: 100%; */
        width: calc((859 * 100vw) / 1920);
        /* matches video width */
        height: 100%;
        /* matches video height */
        border-radius: 16px;
        /* same rounding as video */
        background: rgba(18, 0, 37, 0.75);

        display: flex;
        justify-content: center;
        align-items: center;

        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background: none;
        border: none;
        cursor: pointer;
    }



    .video_part {
        display: flex;
        justify-content: center;
        /* horizontal center */
        width: 100%;
        position: relative;
    }

    .video_wrapper {
        width: calc((859 * 100vw) / 1920);
        max-width: 100%;
        position: relative;
        /* important for overlay to be relative to this */
    }

    .video_wrapper video {
        width: 100%;
        height: auto;
        border-radius: 16px;
        border: 2px solid #9C67D2;
        display: block;
    }

    /* Overlay now matches wrapper/video size */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* matches wrapper width */
        /* height: 100%; */
        height: calc(100% - 4px);
        /* matches wrapper height */
        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        border: 2px solid #9C67D2;
        background: rgba(18, 0, 37, 0.75);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

}

@media only screen and (max-width: 767px) {


    .banner_section_content br {
        display: none;
    }

    .banner_section {
        /* height: calc((540 * 100vw) / 460); */
        height: 100vh;
        background:
            url("../media/banner/HB_invitation_mob_460x540.webp?v=1") no-repeat center center;
        background-size: contain;
        background-position: center calc(50% - 80px);
        /* pushes up by 50px */
    }


    .logo_banner_section {
        width: 100%;

        display: flex;
        justify-content: center;

        padding-top: calc((20 * 100vw) / 460);
    }

    .logo_banner_section img {
        width: calc((94 * 100vw) / 460);
        height: auto;

    }

    .banner_section_content {
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((27 * 100vw) / 460);

        font-style: normal;
        font-weight: 700;
        line-height: calc((44 * 100vw) / 460);


        padding-top: calc((375 * 100vw) / 460);
        padding-bottom: calc((10 * 100vw) / 460);

        padding-left: calc((25 * 100vw) / 460);
        padding-right: calc((25 * 100vw) / 460);
        /* 137.5% */
    }

    .banner_section_cta {

        position: relative;

        display: flex;
        justify-content: center;
    }

    .banner_section_cta img:not(.sparkle) {
        width: calc((390 * 100vw) / 460);
        height: auto;
    }


    .video_section {
        background:
            url("../media/video/video_back_460x465.webp?v=1") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: calc((465 * 100vw) / 460);

        padding-top: calc((30 * 100vw) / 460);

    }


    .video_part {


        /* display: flex;
    justify-content: center;

    position: relative;
    width: 100%;
    max-width: 100%; */

        display: flex;
        justify-content: center;
        /* center horizontally */
        align-items: center;
        /* center vertically if parent has height */
        width: 100%;
        position: relative;
        /* overflow: hidden; */

    }

    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        background: rgba(18, 0, 37, 0.75);
        background-color: #120025BF;
    }


    .video-button {
        transition: opacity 0.3s ease;
    }

    .video-button.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background-color: unset;
        border: unset;
        width: 60px;
        height: 60px;
    }

    .video-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10;
    }

    .video_section_content {
        padding-top: calc((20 * 100vw) / 460);

        display: flex;
        justify-content: center;

        color: #D5AEFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((20 * 100vw) / 460);
        font-style: normal;
        font-weight: 500;
        line-height: calc((40px * 100vw) / 460);


        padding-left: 20px;
        padding-right: 20px;
        /* 153.846% */
    }

    .explanation_section {

        background:
            url("../media/explanation/seq_3.webp?v=1") no-repeat center center;
        /* Set size for each background image */
        background-size: contain;


        width: 100%;
        height: calc((712 * 100vw) / 460);

        display: flex;
        justify-content: center;
    }

    .explanation_section_content {
        /* width: calc((689 * 100vw) / 1920); */
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((20 * 100vw) / 460);
        font-style: normal;
        font-weight: 500;
        line-height: calc((34 * 100vw) / 460);
        /* 153.846% */
        text-align: center;

        padding-top: calc((48 * 100vw) / 460);
        padding-left: calc((55 * 100vw) / 460);
        padding-right: calc((55 * 100vw) / 460);

    }


    .footer_section {
        background:
            url("../media/footer/Footer_banner_back_460x296.webp?v=1") no-repeat bottom center;
        background-size: contain;

        width: 100%;
        height: calc((863 * 100vw) / 460);
    }

    .footer_section_icon {
        display: flex;
        justify-content: center;

        padding-top: calc((6 * 100vw) / 460);

    }

    .footer_section_icon img {
        width: calc((300 * 100vw) / 460);
        height: auto;
    }

    .footer_section_content {

        display: flex;
        justify-content: center;
    }

    .footer_section_content span {

        /* width: calc((1084 * 100vw) / 1920); */
        color: #FFF;
        text-align: center;
        font-family: "Kumbh Sans";
        font-size: calc((20* 100vw) / 460);
        font-style: normal;
        font-weight: 500;
        line-height: calc((36 * 100vw) / 460);

        padding-left: calc((20 * 100vw) / 460);
        padding-right: calc((20 * 100vw) / 460);
        /* 153.846% */
    }

    .bottom_bar_section {
        background:
            url("../media/footer/Footer_background.webp") no-repeat center center;
        background-size: cover;

        width: 100%;
        height: 80px;

        display: flex;
        justify-content: center;
    }

    .bottom_bar_section_content {
        color: #FFF;
        text-align: center;
        /* -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000; */
        font-family: "Kumbh Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;

        padding-top: 30px;
    }


    .video_part {
        margin: 0 auto;
        width: calc((859 * 100vw) / 1920);
        position: relative;
        display: inline-block;
    }

    /* Your video keeps dynamic size */
    .video_part video {
        width: calc((859 * 100vw) / 1920);
        height: auto;

        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        display: block;

        margin: 0 auto;
    }

    /* Overlay matches the video */
    .video-overlay {
        position: absolute;

        top: 0;
        left: 0;
        /* width: 100%; */
        width: calc((859 * 100vw) / 1920);
        /* matches video width */
        height: 100%;
        /* matches video height */
        border-radius: 16px;
        /* same rounding as video */
        background: rgba(18, 0, 37, 0.75);

        display: flex;
        justify-content: center;
        align-items: center;

        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .video-button {
        background: none;
        border: none;
        cursor: pointer;
    }



    .video_part {
        display: flex;
        justify-content: center;
        /* horizontal center */
        width: 100%;
        position: relative;
    }

    .video_wrapper {
        width: calc((412 * 100vw) / 460);
        max-width: 100%;
        position: relative;
        /* important for overlay to be relative to this */
    }

    .video_wrapper video {
        width: 100%;
        height: auto;
        border-radius: 16px;
        border: 2px solid #9C67D2;
        display: block;
    }

    /* Overlay now matches wrapper/video size */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* matches wrapper width */
        /* height: 100%; */
        height: calc(100% - 4px);
        /* matches wrapper height */
        border-radius: 16px;
        /* border: 2px solid #9C67D2; */
        border: 2px solid #9C67D2;
        background: rgba(18, 0, 37, 0.75);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s ease;
    }

    .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

}

@media screen and (max-width: 360px) {
    .banner_section_content {

        font-size: calc((25 * 100vw) / 460);
        line-height: calc((35 * 100vw) / 460);

        padding-top: calc((310 * 100vw) / 460);

        padding-left: calc((15 * 100vw) / 460);
        padding-right: calc((15 * 100vw) / 460);
    }


}








/* .banner_section_cta {
    position: relative;
    display: inline-block;
} */

/* .banner_section_cta img:first-child {
    display: block;
    width: 100%;
    height: auto;
} */

.sparkle {
    position: absolute;
    width: 20px;
    /* adjust size */
    height: 20px;
    transform: scale(0);
    animation: sparkleAnim 1.5s infinite alternate;
}

/* Stagger animation for each sparkle */
.banner_section_cta .sparkle:nth-child(2) {
    animation-delay: 0s;
}

.banner_section_cta .sparkle:nth-child(3) {
    animation-delay: 0.3s;
}

.banner_section_cta .sparkle:nth-child(4) {
    animation-delay: 0.6s;
}

.banner_section_cta .sparkle:nth-child(5) {
    animation-delay: 0.9s;
}

.banner_section_cta .sparkle:nth-child(6) {
    animation-delay: 1.2s;
}


.banner_section_cta .sparkle:nth-child(7) {
    animation-delay: 1.5s;
}

.banner_section_cta .sparkle:nth-child(8) {
    animation-delay: 1.9s;
}

@keyframes sparkleAnim {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@media screen and (max-width: 767px) {
    .banner_section_cta .sparkle:nth-child(2) {
        top: 20% !important;
        left: 75% !important;
    }

    .banner_section_cta .sparkle:nth-child(6) {
        top: 55% !important;
        left: 35% !important;
    }


    .banner_section_cta .sparkle:nth-child(7) {
        top: 35% !important;
        left: 60% !important;
    }

    .banner_section_cta .sparkle:nth-child(8) {
        top: 20% !important;
        left: 25% !important;
    }
}