body.no-scroll{
    position: unset;
}

/* ========================================
   BASE CONTAINER STYLES
   ======================================== */

.home-wrap {
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.row.container {
    flex-flow: row;
}

.container.row {
    width: 100%;
    max-width: 1520px;
    height: 100%;
    padding: 77px 0px 50px;
}

.left-wrap,
.right-wrap {
    padding: 0px !important;
}

/* ========================================
   LEFT CONTENT SECTION
   ======================================== */

/* Logo Section */
.img-logo img {
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 100px;

    object-fit: cover;
}

/* Tagline Section */
.img-tagline {
    width: 100%;
    height: 100%;
    max-width: 590px;
    max-height: 170px;
    margin: 14px 0px 0px !important;
}

/* ========================================
   LOTTERY SECTION
   ======================================== */

/* Lottery Wrapper */
.row.lottery-wrap {
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Lottery Image Inner Container */
.row.lottery-wrap .img-inner{
    overflow: unset;
}

/* Lottery Images - Hover Effect */
.row.lottery-wrap img {
    margin-top: 40px;
    transition: transform 0.3s ease;

    cursor: pointer;
}

.row.lottery-wrap img:hover {
    transform: scale(1.1);
}

/* Lottery Container */
.lottery-container {
    padding: 0px !important;
    overflow: visible !important;
}

/* Lottery Column Inner */
.lottery-container .col-inner {
    display: flex;
    gap: 20px;
    overflow: visible !important;
}

/* Lottery Items */
.lottery-container .col-inner .has-hover {
    margin-bottom: 0px !important;
    overflow: visible !important;
}

/* ========================================
   REPUTATION SECTION
   ======================================== */

/* Reputation Wrapper */
.reputation-wrap {
    margin: 0px !important;
}

/* Reputation Column */
.reputation-wrap .col {
    padding: 0px;
}

/* Reputation Column Inner */
.reputation-wrap .col .col-inner {
    width: fit-content;
    margin: 0px !important;
}

/* Reputation Image Container */
.img-reputation {
    width: 100%;
    height: 100%;
    margin: 40px 0px 0px !important;
}

/* Reputation Image Inner */
.img-reputation .img-inner {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
}

/* Reputation Image */
.img-reputation .img-inner img {
    width: 100%;
    height: 125px;
    max-width: 490px;
    max-height: 100%;
    object-fit: cover;
}

/* ========================================
   CALL TO ACTION BUTTON
   ======================================== */

/* CTA Button - Hurry Up */
.btn-hurryup {
    width: 100%;
    height: 100%;
    max-width: 680px;
    max-height: 125px;
    margin-top: 16px;
}


/* ========================================
   RIGHT CONTENT SECTION - REGISTER FORM
   ======================================== */

/* Right Wrapper Column Inner */
.right-wrap .col-inner {
    position: relative !important;
    padding: 0px !important;
}

/* Right Wrapper Hover State */
.right-wrap .has-hover {
    margin-bottom: 0px !important;
}

/* ========================================
   MOBILE ELEMENTS (Hidden on Desktop)
   ======================================== */

/* Mobile Model Image */
.model-mobile {
    display: none;
}

/* Mobile Reputation Wrapper */
.reputation-wrap-mobile-wrap {
    display: none;
}

/* ========================================
   REGISTER FORM CONTAINER
   ======================================== */

/* Register Form Wrapper */
.row.register-wrap {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 100% !important;
    max-width: 420px;
    padding: 12px 16px !important;
    border: 2px solid #FCE667 !important;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(3, 68, 232, 0.8) 0%, rgba(0, 10, 39, 0.8) 100%);
    transform: translateX(-50%);
}

/* ========================================
   POPUP REGISTER FORM
   ======================================== */

/* Popup Container - Fixed Centered Position */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 420px;
    margin: 0px !important;
    padding: 12px 16px !important;
    border: 2px solid #FCE667 !important;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(3, 68, 232, 0.8) 0%, rgba(0, 10, 39, 0.8) 100%) !important;
    z-index: 9999;
}

/* ========================================
   POPUP - CLOSE BUTTON
   ======================================== */

/* Close Button Position */
.popup .close-popup {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

/* Close Button Icon */
.popup .close-popup img {
    margin-top: 0px;
}

/* ========================================
   POPUP - HEADER SECTION
   ======================================== */

/* Popup Header Block */
.popup .popup-header-block {
    width: 100%;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
}

/* Logo via CSS Pseudo-element */
.popup .popup-header-block::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 320px;
    height: 80px;
    background-image: url(../../../uploads/2026/01/img-logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

/* Logo via HTML img tag (Alternative) */
.popup .popup-header-block img {
    width: 100%;
    max-width: 320px;
    max-height: 80px;
    object-fit: cover;
    margin-top: 0px;
}

/* ========================================
   POPUP - REGISTER BUTTON
   ======================================== */

/* Register Button in Close Popup */
.popup .close-popup .btn-register-popup {
    margin-top: 0px;
}

/* Register Button in Form */
.popup .form-submit .btn-register {
    margin-top: 0px;
}

/* Register Button Image */
.popup .form-submit .btn-register img {
    margin-top: 6px;
}

/* ========================================
   REGISTER FORM CONTAINER
   ======================================== */

/* Register Container Padding */
.register-wrap .register-container {
    padding: 0px;
}

/* ========================================
   REGISTER FORM LOGO
   ======================================== */

/* Logo Container */
.img-logo-register-form {
    width: 100%;
    height: 100%;
    margin-bottom: 6px !important;
}

/* Logo Inner Wrapper */
.img-logo-register-form .img-inner {
    display: flex;
    justify-content: center;
}

/* Logo Image */
.img-logo-register-form img {
    width: 100%;
    height: 100%;
    max-width: 320px !important;
    max-height: 80px !important;
    object-fit: cover;

    margin-bottom: 6px;
}

/* ========================================
   FORM LAYOUT & STYLING
   ======================================== */

/* Form Background - Register & Popup */
.register-wrap .register-container .form-layout, .popup {
    background-color: transparent;
}

/* Hide Form Labels - Register & Popup */
.register-wrap .register-container .form-layout label, .popup .form-submit label {
    display: none;
}

/* Form Input Border - Register & Popup */
.register-wrap .register-container .form-layout .form-input, .popup .form-submit .form-input {
    border: 1px solid #005CFF;
}

/* Form Input Wrapper Spacing - Register & Popup */
.register-wrap .register-container .form-layout .form-submit .form-input-wrapper, .popup .form-submit .form-input-wrapper  {
    margin-bottom: 6px;
}

/* Input Text Styling - Register & Popup */
.register-wrap .register-container .form-layout .form-input input, .popup .form-submit .form-input input {
    margin-left: 10px !important;
    color: #FFFFFF;
    font-size: 16px !important;
    font-weight: 500 !important;
    background: transparent;
}

/* Input Placeholder Styling - Register & Popup */
.register-wrap .register-container .form-layout .form-input input::placeholder, .popup .form-submit .form-input input::placeholder {
    color: #8092b5;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* ========================================
   FORM INPUT ICONS
   ======================================== */

/* User Icon - Register & Popup */
.register-wrap .register-container .form-layout .form-input-user::before,.popup .form-submit .form-input-user::before  {
    background-image: url(../../../uploads/2026/01/ic-user.svg);
}

/* Password Icon - Register & Popup */
.register-wrap .register-container .form-layout .form-input-pass::before, .popup .form-submit .form-input-pass::before  {
    background-image: url(../../../uploads/2026/01/ic-lock.svg);
}

/* Password Toggle Icon Size - Register & Popup */
.register-wrap .register-container .form-layout .form-input-pass img, .popup .form-submit .form-input-pass img {
    width: 19px !important;
    height: 14px !important;

    margin-top: 0px;
}

/* Show Password - Eye Open Icon - Register & Popup */
.register-wrap .register-container .form-layout .form-input-pass img[src*="eye-close.svg"], .popup .form-submit .form-input-pass img[src*="eye-close.svg"] {
    content: url(../../../uploads/2026/01/ic-eye.svg);
}

/* Hide Password - Eye Close Icon - Register & Popup */
.register-wrap .register-container .form-layout .form-input-pass img[src*="eye.svg"]:not([src*="eye-close.svg"]), .popup .form-submit .form-input-pass img[src*="eye.svg"]:not([src*="eye-close.svg"]) {
    content: url(../../../uploads/2026/01/ic-eye-hidden.svg);
}

/* Phone Icon - Register & Popup */
.register-wrap .register-container .form-layout .form-input-phone::before, .popup .form-submit .form-input-phone::before  {
    background-image: url(../../../uploads/2026/01/ic-phone.svg);
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Pulse Scale Keyframes */
@keyframes pulse-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Pulse Animation - CTA & Register Buttons */
.btn-hurryup,
.btn-register {
    animation: pulse-scale 2s ease-in-out infinite;
    transition: all 0.3s ease;

    cursor: pointer;
}

/* ========================================
   TABLET RESPONSIVE (max-width: 1050px)
   ======================================== */

@media (max-width: 1050px) {

    /* ========================================
       TABLET - BACKGROUND
       ======================================== */

    #main #popup-register.active{
        display: none !important;
    }   

    .home-wrap{
        background-image: url('../../../uploads/2026/02/bg-tablet-scaled.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    /* ========================================
       TABLET - CONTAINER LAYOUT
       ======================================== */

    .container.row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 0 40px;
    }

    /* ========================================
       TABLET - LEFT CONTENT
       ======================================== */

    /* Left Wrapper Position */
    .left-wrap .col-inner {
        position: relative;
    }

    /* ========================================
       TABLET - LOGO
       ======================================== */

    .img-logo .img-inner {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .img-logo .img-inner img {
        max-width: 170px;
        max-height: 42px;
        object-fit: cover;
    }

    /* ========================================
       TABLET - TAGLINE
       ======================================== */

    .img-tagline {
        max-width: 100%;
        max-height: 100%;
        margin-top: 8px !important;
    }

    .img-tagline .img-inner {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .img-tagline img {
        max-width: 295px;
        max-height: 85px;
        object-fit: cover;
    }

    /* ========================================
       TABLET - MODEL DISPLAY TOGGLE
       ======================================== */

    /* Hide Desktop Model */
    .model {
        display: none;
    }

    /* Show Mobile Model */
    .model-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: -15px 0px 0px !important;
    }

    .model-mobile img {
        max-width: 300px;
        max-height: 350px;
        object-fit: cover;
    }

    /* ========================================
       TABLET - LOTTERY
       ======================================== */

    .row.lottery-wrap {
        position: absolute;
        bottom: 100px;
        left: 50%;
        display: flex;
        gap: 10px;
        margin: 0px !important;
        justify-content: center;
        transform: translateX(-50%);
    }

    .row.lottery-wrap .col {
        width: 115px;
    }

    .row.lottery-wrap .col img {
        max-width: 115px;
        max-height: 72px;
    }

    .lottery-container {
        max-width: 365px !important;
    }

    .lottery-container .col-inner {
        gap: 10px;
    }

    /* ========================================
       TABLET - REPUTATION (Hide Desktop)
       ======================================== */

    .reputation-wrap {
        display: none !important;
    }

    /* ========================================
       TABLET - REGISTER FORM
       ======================================== */

    /* Register Wrap Position Reset */
    .register-wrap {
        position: static !important;
        transform: none !important;
    }

    /* Right Wrapper Layout */
    div.right-wrap {
        display: flex;
        margin-top: -80px;
        justify-content: center;
    }

    .right-wrap .col-inner {
        display: flex;
        justify-content: center;
    }

    /* Register Form Size */
    .row.register-wrap {
        max-width: 330px;
    }

    .row.register-wrap .col-inner {
        display: flex;
        flex-direction: column;
    }

    /* Hide Register Form Logo on Tablet */
    .img-logo-register-form {
        display: none;
    }

    /* Register Button Spacing */
    .btn-register {
        margin-top: 6px !important;
    }

    /* ========================================
       TABLET - REPUTATION MOBILE (Show on Tablet)
       ======================================== */

    .reputation-wrap-mobile-wrap {
        display: block;
        padding: 0px !important;
    }

    .reputation-wrap-mobile-wrap .col {
        padding: 0px;
    }

    .reputation-wrap-mobile-wrap .col .img-reputation {
        margin-top: 24px !important;
    }

    .reputation-wrap-mobile-wrap .col .img-reputation img {
        max-width: 245px !important;
        max-height: 49px !important;
    }

    .reputation-wrap-mobile-wrap .row .reputation-wrap-mobile {
        display: flex;
        justify-content: center;
    }

    .reputation-wrap-mobile .col-inner {
        max-width: 340px !important;
    }

    /* ========================================
       TABLET - CTA BUTTON
       ======================================== */

    .btn-hurryup {
        margin-top: 8px;
    }
}

/* ========================================
   MOBILE RESPONSIVE (max-width: 768px)
   ======================================== */

@media (max-width: 768px) {
    
    /* Home Container Padding */
    .home-wrap {
        padding: 16px 15px 22px 15px !important;
    }

    /* Lottery Position */
    .row.lottery-wrap {
        bottom: 95px;
    }

    /* Register Form Position */
    div.right-wrap {
        margin-top: -90px;
    }
}

/* ========================================
   MOBILE RESPONSIVE (max-width: 549px)
   ======================================== */

@media (max-width: 549px) {

    /* Register Form Position */
    div.right-wrap {
        margin-top: -80px;
    }
}

/* ========================================
   MOBILE RESPONSIVE (max-width: 390px)
   ======================================== */

@media (max-width: 390px) {

    /* Mobile Background Image */
    .home-wrap{
        background-image: url('../../../uploads/2026/02/bg-mobile-scaled.png');
    }

    /* Hide Mobile Reputation */
    .reputation-wrap-mobile {
        display: none !important;
    }

    /* Register Form Position */
    div.right-wrap {
        margin-top: -90px;
    }
}