body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Disable horizontal scrolling */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    background: url(/images/bg-auth.png) no-repeat center / cover;
}

.main-content {
    background: url('/images/main-bg.png') no-repeat;
    --webkit-background: url('/images/main-bg.png') no-repeat;
    background-size: 100% 100%;
    background-position: center;
    height: 1011px;
    max-width: 430px;
    width: 100%;
    padding-left: 24px;;
    padding-right: 24px;;

    position: relative;
}
.main-content-logo {
    position: relative;
    left: 0; right: 0; top: 95px;

    width: 175px;
    height: 300px;
    margin: auto;
}
.main-content-logo img {
    width: 100%;
    /* margin-top: 152px; */
}

.navbar-brand img {
    width: 70px;
    flex-shrink: 0;
}
.btn-signin, .btn-login {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.ornament-logo {
    position: relative;
    left: 0; right: 0;
    /* height: 240px; */
}
.ornament-logo-left {
    position: absolute;
    left: -23px;
    top: -58px;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}
.ornament-logo .circle {
    position: relative;
    left: -52px;
    top: -150px;

    width: 123px;
    height: 123px;
    filter: blur(5.6px);
}

.ornament-logo-right {
    position: absolute;
    top: 0; right: -18px;

    width: 90px;
    height: 222px;
    overflow: hidden;
}
.ornament-logo-right .wave-r {
    width: 192px;
    height: 222px;
}

.dine-in {
    text-align: center;
}
.dine-in-sub {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
}
.dine-in-title {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}


/* start section prize */
.prize-ornament {
    position: absolute;
    top: 0; left: 0; right: 0;
}
.prize-ornament-start {
    position: absolute;
    left: 0;
    /* top: 322px; */
    top: 360px;
    width: 70px;

    background: url(/images/start-gold.png) 50% / cover no-repeat;
    background-size: 68px 45px;
    height: 50px;
    filter: blur(3.4px);
}
.prize-ornament-circle {
    position: absolute;
    /* top: 420px; */
    top: 455px;
    right: 0;
    width: 37px;
    height: 74px;

    background: url(/images/circle-gold-BR.png)50% / cover no-repeat;
    background-size: 37px 74px;
}

.prize-sub {
    width: 125.896px;
    height: 17.778px;
    border-radius: 5px;
    background: #4C3283;
    z-index: 1;

    color: #FFF;
    font-family: Lato;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}
.prize-nominal {
    width: 330px;
    height: 89.826px;
    margin-top: -10px;
    background: url('/images/total-prize.png') 50% / cover no-repeat;
}
.prize-text-image {
    width: 282px;
    height: 171px;
    background: url('/images/text-prize.png') 50% / cover no-repeat;
}
.prize-list {
    margin-top: 8px;
    /* width: 345px; */
    height: 24px;
    display: flex;
    justify-content: space-between;
}
.prize-unit {
    color: #FFF;
    text-align: center;
    font-family: Lato;
    font-size: 6px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    width: 90px;
    border-right-width: 0.5px;
    border-right-color: #fff;
    border-right-style: solid;
}
.prize-unit:last-child {
    border-right: none;
}
.prize-unit div { font-weight: bold; }

/* end section prize */


/* start section giftbox */
.giftbox-container {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: -53px;
    height: 460px;
    width: 100%;
    overflow: hidden;
}
.giftbox-group {
    position: relative;
    left: 5px;
    top: 79px;
    width: 100%;
    height: 200px;
    z-index: 1;
}
.voucher {
    position: relative;
    top: 75px;
    left: -6px;
    width: 102px;
    height: 116px;
}
.vespa {
    position: absolute;
    left: 20px;
    top: 58px;
    width: 225px;
    height: 190px;
}
.scoopy {
    position: absolute;
    right: 75px;
    top: 85px;
    width: 170px;
    transform: rotate(4deg);
}
.iphone {
    position: absolute;
    /* right: 173px; */
    right: 0; left: 0;
    top: 118px;
    width: 81px;
    /* height: 126.804px; */
}
.macbook {
    position: absolute;
    left: 0;
    right: 0;
    top: 162px;

    width: 158px;
    height: 97px;
}
.giftbox-top {
    position: relative;
    top: -157px;
    left: 4px;
    width: 210px;
    height: 143px;
}
.giftbox-bottom {
    position: absolute;
    left: 6px;
    bottom: 10px;
    width: 400px;
    height: 182px;
}
.bg-acc {
    position: absolute;
    top: -4px;
    left: -15px;
}
.acc-ornament {
    position: absolute;
    top: 75px;
    left: 18px;
    width: 423px;
}
.acc-star {
    position: absolute;
    right: -15px;
    top: 155px;
}
.acc-circle-bl {
    position: absolute;
    bottom: -30px;
    left: 0;
}
/* end section giftbox */

/* start section festidraw */
.festidraw-container {
    height: 590px;
    width: 100%;
    max-width: 430px;
    padding-top: 23px;
    padding-left: 34px;
    padding-right: 34px;
}
.festidraw-title {
    width: 234px;

    color: #476DD1;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}
.festidraw-subtitle {
    width: 234px;
    height: 23px;
    margin-bottom: 14px;

    color: #476DD1;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}
.festidraw-container p  {
    color: #000;
    text-align: justify;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    text-indent: 2.4rem;
}
.coupon-box {
    margin-top: 41px;
}
.coupon-title {
    color: #476DD1;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 17px;
}
video {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.coupon-learn {
    width: 339px;
    height: 181px;
}
/* end section festidraw */


/* start section periode */
.periode-container {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 430px;
    height: 290px;
}
.periode-box {
    position: relative;
    left: -8px;
    padding-top: 24px;
}
.periode-container .food-box,
.periode-container .periode-box {
    height: 247px;
}
.food-burger {
    width: 177px;
    height: 248px;
}
.food-pink {
    position: absolute;
    bottom: -51px;
    z-index: 1;

    width: 110px;
    height: 129px;
}
.food-discount {
    position: absolute;
    left: 41px;
    bottom: 0;

    width: 54px;
    height: 58px;
}
.periode-title {
    height: 27px;

    color: #476DD1;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.periode-subtitle {
    width: 126px;
    height: 24px;
    margin-left: 25px;

    color: #000;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.rundown-event {
    padding-top: 16px;
    padding-bottom: 16px;
}
.event-group {
    display: flex;
    padding-bottom: 16px;
}
.event-group svg {
    position: relative;
    top: 3.7px;
    margin-right: 2.84px;
}
.event-title {
    color: #000;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.event-subtitle {
    color: #342F2F;
    font-family: 'Lato', sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
/* end section periode */


/* start section FAQ */
.faq-container {
    position: relative;
    /* padding-top: 43px; */
    /* top: 43px; */
    width: 100%;
    max-width: 430px;
    min-height: 755px !important;
    background: #3352A0;
}
.faq-header {
    color: #fff;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 5px;
    padding-top: 30px;
}
.faq-text-group {
    padding: 20px 56px 20px 88px;
}
.faq-group {
    display: flex;
    padding-bottom: 11px;
}
.faq-group svg {
    position: relative;
    top: 2.7px;
    margin-right: 2.84px;
}
.faq-text {
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.half-gold {
    position: absolute;
    top: 420px;
    right: 0;
    width: 37px;
    height: 74px;

    background: url(/images/circle-gold-BR.png)50% / cover no-repeat;
    background-size: 37px 74px;
}
.bg-faq {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    height: 622px;
}
.bg-faq img {
    height: 545px;
}
.support-box {
    width: 100%;
    min-height: 170px;
    position: relative;
    top: 10px;
}
.support-title {
    color: #FFF;
    text-align: center;
    font-family: Lato;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.support-image {
    width: 308px;
    min-height: 73px;
    margin-top: 15px;
}
.image-crop {
    width: 100%;
    height: 45px;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    border-radius: 8px;
}
.more-info {
    margin-top: 11px;
}
.info-title {
    width: 113px;
    height: 28px;
    margin-bottom: 3px;

    color: #FFF;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.info-subtitle {
    width: 179px;
    height: 17px;

    color: #FFF;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
/* end section FAQ */


/* start section Animation */
@keyframes moveUpDown {
    0% {
        transform: translateY(-10);
    }
    100% {
        transform: translateY(25px);
    }
}
@keyframes moveUpDownV2 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-10px);
    }
}
@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes zoomInOutSlow {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes shine {
    0% {
        top:-120%;
        left:-120%;
    }
    100% {
        left:100%;
        top:100%;
    }
}

.moveUpDown {
    animation: moveUpDown 2s ease-in-out infinite alternate;
}
.moveUpDown-v2 {
    animation: moveUpDownV2 3s ease-in-out infinite alternate;
}
.zoomInOut {
    animation: zoomInOut 3s ease-in-out infinite alternate;
}
.zoomInOutSlow {
    animation: zoomInOutSlow 10s cubic-bezier(0.35, 0.15, 0.66, 0.85) infinite alternate;
}

.contour-wrap img {
    z-index: 998;
    position: relative;
}
.contour:before {
    content: "";
    z-index: 10;
    position: absolute;
    height: 200%;
    width: 200%;
    top: -120%;
    left: -120%;
    background: linear-gradient(transparent 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.5) 45%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%);
    transition: all 2s;
    transform: rotate(-45deg);
    animation: shine 3s infinite forwards;
}
.contour {
    position: absolute;
    top: 0;
    left: 0;
    height: 143.09px;
    width: 100%;
    overflow: hidden;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    mask-size: contain;
    z-index: 999;
    mask-image: url('/images/logo-festival.png');
    -webkit-mask-image: url('/images/logo-festival.png');
}

/* end section Animation */