@font-face {
    font-family: Modish;
    src: url('fonts/SofiaPro/SofiaProRegularAz.otf');
}

@font-face {
    font-family: SofiaPro;
    src: url('fonts/SofiaPro/SofiaProRegularAz.otf');
}

@font-face {
    font-family: SofiaPro;
    font-weight: bold;
    src: url('fonts/SofiaPro/SofiaProBoldAz.otf');
}

:root {
    --primary-font-color: #ffffff;
    --secondary-font-color: #5C3327;
    --font-size-jumbo: 2vw;
    --font-size-heading: 1.6vw;
    --font-size-base: 1vw;
    --font-size-small: 0.8vw;
    --font-size-micro: 0.6vw;
    --brown: #5C3327;
    --gold: #C89A42;
}

body {
    font-family: SofiaPro;
    font-size: var(--font-size-base);
    color: var(--brown);
    padding: 0;
    margin: 0;
    background: url(assets/img_bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

    body::-webkit-scrollbar {
        width: 0;
        background: transparent;
    }

a {
    color: var(--brown);
    text-decoration: none;
}

/*CONTAINERS*/
.show-desktop {
    display: block
}

.show-mobile {
    display: none;
}

.container {
    min-height: 100vh; /* Ensures the container takes at least the full viewport height */
    position: relative; /* Establishes a positioning context */
    box-sizing: border-box;
    overflow:hidden;
}

.content {
    min-height: 100vh;
}


.logo {
    z-index: 1000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 4vh;
    width: 100px;
}

    .logo img {
        width: 100%;
        z-index: 1000;
    }


/*ETUTORIALS*/
.etutorials_title {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 20vh;
    width: 300px;
    text-align: center;
    font-size: var(--font-size-jumbo)
}

.etutorials_subtitle {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 22vh;
    width: 600px;
    text-align: center;
}

.etutorials_list {
    position: relative;
    top: 24vh;
    width: 440px;
    left: 50%;
    transform: translateX(-50%);
}

.etutorials_card {
    position: relative;
    width: 440px;
    height: 380px;
}

.etutorials_card_title {
    position: relative;
    width: 90%;
    text-align: center;
    font-size: var(--font-size-heading);
    left: 50%;
    transform: translateX(-50%);
}

.etutorials_card_image {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%)
}

    .etutorials_card_image img {
        width: 100%;
    }

.etutorials_back {
    position: relative;
    top: 28vh;
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: var(--font-size-small)
}

.etutorial_detail_card {
    position: relative;
    top: 50%;
    left: 50%;
    width: 70%;
    height: auto;
    transform: translate(-50%, -50%)
}

.etutorial_detail_title {
    position: relative;
    top: 20%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-size: var(--font-size-jumbo);
    text-align: center;
    margin: 5% 0;
}

.etutorial_detail_level {
    position: relative;
    top: 30%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-size: var(--font-size-heading);
    text-align: center;
    margin: 5% 0;
}

    .etutorial_detail_level img {
        width: 20px;
    }

.etutorial_detail_duration {
    position: relative;
    top: 20%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-size: var(--font-size-heading);
    text-align: center;
    margin: 5% 0;
}

    .etutorial_detail_duration img {
        width: 20px;
    }

.etutorial_detail_download {
    position: relative;
    top: 20%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-size: var(--font-size-heading);
    text-align: center;
    margin: 5% 0;
}

    .etutorial_detail_download img {
        width: 100%;
    }

.etutorial_detail_back {
    position: relative;
    top: 20%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-size: var(--font-size-heading);
    text-align: center;
    margin: 5% 0;
}



/*brandstories*/
.brandstories_title {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 20vh;
    width: 300px;
    text-align: center;
    font-size: var(--font-size-jumbo)
}

.brandstories_subtitle {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 22vh;
    width: 300px;
    text-align: center;
}

.brandstories_list {
    position: relative;
    top: 24vh;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
    height: 300px;
}

.brandstories_slide {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1vw;
}

.brandstories_card {
    position: relative;
    width: 33%;
}

.brandstories_card_title {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-base);
    height: 30px;
}

.brandstories_card_image {
    position: absolute;
    width: 100%;
    margin: 10px 0 0 0;
}

    .brandstories_card_image img {
        width: 100%;
    }

.brandstories_back {
    position: absolute;
    top: 74vh;
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: var(--font-size-small)
}

.brandstory_detail_card {
    position: relative;
    top: 50%;
    left: 50%;
    width: 70%;
    height: auto;
    transform: translate(-50%, -50%)
}

.brandstory_detail_title {
    position: relative;
    top: 20%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-size: var(--font-size-jumbo);
    text-align: center;
    margin: 5% 0;
}

.brandstory_detail_level {
    position: relative;
    top: 30%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    font-size: var(--font-size-heading);
    text-align: center;
    margin: 5% 0;
}

    .brandstory_detail_level img {
        width: 20px;
    }

.brandstory_detail_duration {
    position: relative;
    top: 20%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-size: var(--font-size-heading);
    text-align: center;
    margin: 5% 0;
}

    .brandstory_detail_duration img {
        width: 20px;
    }

.brandstory_detail_download {
    position: relative;
    top: 20%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-size: var(--font-size-heading);
    text-align: center;
    margin: 5% 0;
}

    .brandstory_detail_download img {
        width: 100%;
    }

.brandstory_detail_back {
    position: relative;
    top: 20%;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    font-size: var(--font-size-heading);
    text-align: center;
    margin: 5% 0;
}




.eshop_title {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 22vh;
    width: 400px;
    text-align: center;
}

.eshop_col {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 28vh;
    width: 650px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.eshop_row1 {
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 40px;
    height: 70px;
}

    .eshop_row1 .cell {
        flex: auto;
        width: 33%;
    }

.eshop_row2 {
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 40px;
    height: 70px;
}

    .eshop_row2 .cell {
        flex: auto;
        width: 50%;
    }

.eshop_row3 {
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 40px;
    height: 40px;
}

    .eshop_row3 .cell {
        flex: auto;
        width: 100%;
    }

.cell img {
    height: 100%;
}


.discover_ptitle {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 19vh;
    width: 300px;
    text-align: center;
}

.discover_psubtitle {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 20vh;
    width: 300px;
    text-align: center;
    font-size: var(--font-size-jumbo)
}

.discover_list {
    position: relative;
    width: 250px;
    top: 25vh;
    overflow-x: auto;
    left: 50%;
    transform: translateX(-50%);
    scroll-snap-type: x mandatory;
    display: flex;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: block;
}

    .discover_list::-webkit-scrollbar {
        display: none;
    }

.discover_track {
    display: flex;
    gap: 2rem;
}

.discover_card {
    position: relative;
    width: 250px;
    height: 420px;
    text-align: center;
    background: url(assets/discovermore/img_discover_card.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.discover_image {
    position: relative;
    width: 80%;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
}

    .discover_image img {
        width: 100%;
    }

.discover_subtitle {
    position: relative;
    width: 90%;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-small)
}

.discover_button {
    position: absolute;
    width: 80%;
    top: 78%;
    left: 50%;
    transform: translateX(-50%);
}

    .discover_button img {
        width: 80%;
    }

.discover_back {
    position: relative;
    top: 26vh;
    left: 50%;
    width: 70%;
    transform: translateX(-50%);
    text-align: center;
}

.discover_timer {
    position: relative;
    width: 80%;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.discover_day {
    flex: 0.33;
    background-image: url('assets/discovermore/img_days.png');
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 220/288;
}

.discover_hour {
    flex: 0.33;
    background-image: url('assets/discovermore/img_hours.png');
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 220/288;
}

.discover_min {
    flex: 0.33;
    background-image: url('assets/discovermore/img_min.png');
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 220/288;
}

.discover_timer_text {
    position: relative;
    color: #fff;
    text-align: center;
    width: 100%;
    font-size: var(--font-size-jumbo);
    line-height: 50px;
}

.content3 {
    min-height: 100vh;
    margin-top: 20vh;
    background-color: #FAF7F0;
    padding: 5vh 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

    .content3 .area {
        position: relative;
        min-height: 100vh;
        width: 60%;
        left: 50%;
        transform: translateX(-50%);
    }

        .content3 .area .subtitle {
            position: relative;
            width: 100%;
            left: 50%;
            transform: translateX(-50%);
            top: 0vh;
            font-size: var(--font-size-base);
            text-align: justify
        }

    .content3 .scrollable {
        overflow-y: scroll;
        overflow-x: hidden
    }

        .content3 .scrollable::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        .content3 .scrollable::-webkit-scrollbar-track {
            background: var(--gold);
        }

        .content3 .scrollable::-webkit-scrollbar-thumb {
            background: var(--brown);
        }

            .content3 .scrollable::-webkit-scrollbar-thumb:hover {
                background: #555;
            }

.content_form {
    height: 100vh;
    margin-top: 0vh;
    background-color: #FAF7F0;
    padding: 10vh 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

    .content_form .area {
        position: relative;
        height: 100vh;
        width: 60%;
        left: 50%;
        transform: translateX(-50%);
    }

    .content_form .scrollable {
        overflow-y: scroll;
        overflow-x: hidden
    }

        .content_form .scrollable::-webkit-scrollbar {
            width: 3px;
            height: 3px;
        }

        .content_form .scrollable::-webkit-scrollbar-track {
            background: var(--gold);
        }

        .content_form .scrollable::-webkit-scrollbar-thumb {
            background: var(--brown);
        }

            .content_form .scrollable::-webkit-scrollbar-thumb:hover {
                background: #555;
            }




/*FORM*/
.form {
    background: url(assets/form/img_header.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.form_container {
    background-color: #FAF7F0;
	margin-top:20vh;
}

.form_left {
    position: relative;
    background: url(assets/home/img_pyramind_bg_desktop.png) no-repeat;
    background-position: center center;
    background-size: cover;
}

    .form_left .main_splash {
        position: absolute;
        left: 50%;
        top: 12%;
        width: 45%;
        transform: translateX(-50%)
    }

    .form_left .lower_text {
        position: absolute;
        left: 50%;
        bottom: 20px;
        width: 90%;
        transform: translateX(-50%);
        text-align: center;
        color: var(--brown);
    }

.form_right {
    position: relative;
    color: var(--primary-font-color);
    background-image: none;
    background-color: #FAF7F0 !important;
}

    .form_right .spend {
        position: absolute;
        width: 80%;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        font-size: var(--font-size-jumbo);
        text-align: center;
    }

    .form_right .btn_join {
        position: relative;
        width: 70%;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
    }

.part {
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

.part1 {
    width: 70%;
    left: 50%;
    position: fixed;
    z-index: 100
}

.part2 {
    z-index: 120;
}

header {
    font-size: var(--font-size-jumbo);
    text-align: center;
}

    header small {
        font-size: var(--font-size-base);
        text-align: center;
    }

.row {
    width: 100%;
    margin-top: 20px;
}

    .row .label {
        width: 100%;
        font-size: var(--font-size-small);
    }

    .row .field {
        width: 100%;
    }

        .row .field input[type=text], input[type=file], input[type=number] {
            width: calc(100% - 20px);
            border: solid 1px var(--brown);
            font-size: var(--font-size-base);
            color: var(--brown);
            padding: 10px;
            border-radius: 30px;
            background-color: #FAF7F0;
        }

        .row .field input[type=file] {
            border: dashed 2px #828282;
        }

        .row .field img {
            width: 200px;
            left: 50%;
            transform: translateX(-50%);
            position: relative;
        }

        .row .field span {
            font-size: var(--font-size-small);
            color: red;
        }

.clickable {
    cursor: pointer;
}


.green {
    color: #478F4B !important;
}

.file-upload-wrapper {
    display: flex;
    align-items: center;
    border: 2px dashed #ccc;
    border-radius: 10px;
    padding: 6px;
    width: 100%;
    font-family: sans-serif;
    font-size: 14px;
    background: #fdfaf6; /* subtle bg */
}

    .file-upload-wrapper img {
        width: 110px !important;
    }
    /* hide actual input */
    .file-upload-wrapper input[type="file"] {
        display: none;
    }

/* custom button */
.file-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}


/* optional: show filename once selected */
.file-name {
    margin-left: 10px;
    color: #555 !important;
    font-size: 13px !important;
    white-space: nowrap;
    text-align: right;
    width: 100%;
}

/*DONE*/
.done_title {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 21vh;
    width: 600px;
    text-align: center;
    font-size: var(--font-size-jumbo)
}

.done_subtitle {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 22vh;
    width: 600px;
    text-align: center;
    font-size: var(--font-size-base);
    line-height: 30px;
}

.done_col {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 24vh;
    width: 500px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 100px;
}

.done_row1 {
    width: 100%;
}

    .done_row1 img, video {
        width: 100%;
    }

.done_row2 {
    width: 100%;
    display: flex;
    flex-direction: row;
}

    .done_row2 div {
        width: 50%;
        margin: 0 25%;
    }

        .done_row2 div img {
            position: relative;
            width: 80%;
            left: 50%;
            transform: translateX(-50%)
        }

.confirm {
    position: absolute;
    top: 0vh;
    height: 0vh;
    width: 0;
    min-height: 50vh;
    margin-top: 20vh;
    background-color: #FAF7F0;
    padding: 10vh 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    z-index: 10;
    opacity: 0;
}

.confirm_show {
    top: 0vh;
    height: 100vh;
    opacity: 1;
    width: 100%;
}

.confirm_title {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 0vh;
    width: 500px;
    text-align: center;
    font-size: var(--font-size-jumbo)
}

.confirm_subtitle {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 2vh;
    width: 600px;
    text-align: center;
    font-size: var(--font-size-base)
}

.confirm_validation {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 5vh;
    width: 600px;
    text-align: center;
    font-size: var(--font-size-base)
}

.confirm_part {
    width: 450px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

.confirm_button {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 5vh;
    width: 500px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

    .confirm_button div {
        flex: 1;
    }

    .confirm_button img {
        position: relative;
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 200px;
    }



.game_done_image {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 20vh;
    width: 32vw;
    text-align: center;
}

.game_done_title {
    position: relative;
    text-align: center;
    top: 21vh;
    width: 500px;
    margin: 0px auto; 
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--font-size-jumbo)
}

.game_done_subtitle {
    position: relative;
    text-align: center;
    top: 22vh;
    width: 500px;
    margin: 0px auto; 
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--font-size-base)
}

.game_done_button {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 23vh;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 100px;
}

    .game_done_button div:nth-child(1) {
        width: 100%;
        flex: 1
    }

        .game_done_button div:nth-child(1) img {
            position: relative;
            width: 50%;
            left: 50%;
            transform: translateX(-50%)
        }

    .game_done_button div:nth-child(2) {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

        .game_done_button div:nth-child(2) div {
            width: 50%;
        }

            .game_done_button div:nth-child(2) div img {
                position: relative;
                width: 90%;
                left: 50%;
                transform: translateX(-50%)
            }

.leaderboard_container {
    min-height: 110vh !important;
}

.leaderboard_title {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 17vh;
    width: 400px;
    text-align: center;
    font-size: var(--font-size-jumbo)
}

.leaderboard_subtitle {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 21vh;
    width: 600px;
    text-align: center;
    font-size: var(--font-size-small);
    line-height: 30px;
}

.leaderboard_col {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 18vh;
    width: 500px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .leaderboard_col .lrow {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 10px;
        text-align: center;
        width: 100%;
    }

        .leaderboard_col .lrow div {
            padding: 5px 10px;
        }

        .leaderboard_col .lrow:nth-child(2) div:nth-child(1) {
            padding: 10px 10px !important;
        }

        .leaderboard_col .lrow:nth-child(2) div:nth-child(2) {
            padding: 15px 10px !important;
        }

        .leaderboard_col .lrow:nth-child(2) div:nth-child(3) {
            padding: 15px 10px !important;
        }

        .leaderboard_col .lrow div:nth-child(1) {
            width: 5%;
            text-align: right;
            padding: 0px 10px;
        }

        .leaderboard_col .lrow div:nth-child(2) {
            width: 55%;
            text-align: left;
            padding: 0px 10px;
        }

        .leaderboard_col .lrow div:nth-child(3) {
            width: 35%;
            text-align: right;
            padding: 0px 10px;
        }

        .leaderboard_col .lrow .long {
            width: 100% !important;
            text-align: center !important;
        }

        .leaderboard_col .lrow img {
            width: 28px;
            filter: drop-shadow(0 0 4px rgba(240, 202, 75, 0.6));
        }

    .leaderboard_col .white {
        background-color: #fff;
        border-radius: 5px;
        text-align: center;
        border: solid 5px #fff;
    }

    .leaderboard_col .lrow .lleft {
        width: 50% !important;
        margin-top: 10px;
    }

        .leaderboard_col .lrow .lleft img {
            position: relative;
            width: 90%;
            left: 50%;
            transform: translateX(-50%)
        }

    .leaderboard_col .lrow .lright {
        width: 50% !important;
        margin-top: 10px;
    }

        .leaderboard_col .lrow .lright img {
            position: relative;
            width: 90%;
            left: 50%;
            transform: translateX(-50%)
        }

.gold-border {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(#fffef9, #fffef9) padding-box, /* soft ivory inner background */
    linear-gradient( 120deg, #fffbe6 0%, #fff3b0 15%, #ffe98a 30%, #fddf62 45%, #f7d33c 60%, #f9e79f 75%, #fff9d6 100% ) border-box;
    border: 5px solid transparent !important;
    background-size: 400% 400%;
    animation: moltenGold 4s ease-in-out infinite;
    color: #5b311a;
    text-align: center;
    box-shadow: 0 1px 10px rgba(212, 175, 55, 0.25);
}

@keyframes moltenGold {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}




/*SHOWCASE*/
.showcase {
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

    .showcase .left {
        position: relative;
        width: 60vw;
        aspect-ratio: 1 / 1;
    }

    .showcase .right {
        flex: 1;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
        background-color: #FAF7F0;
    }

.level3_image {
    position: relative;
    top: 55%;
    left: 50%;
    width: 70%;
    height: auto;
    transform: translate(-50%, -50%)
}

.clickable {
    cursor: pointer;
}

/*FOOTER*/
.footer {
    left: 0px;
    width: 100%;
    background-color: var(--brown);
    z-index: 15;
}

    .footer ul {
        list-style-type: none;
        padding: 20px;
        margin: 0px;
    }

        .footer ul li {
            width: 100%;
            text-align: center;
            padding: 5px 0px 5px 0px;
        }

            .footer ul li a {
                text-decoration: none;
                color: var(--primary-font-color);
                font-size: var(--font-size-small)
            }


.corner_round {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}


.socmed {
    position: fixed;
    bottom: 10vh;
    height: 35vh;
    right: 0
}

    .socmed img {
        height: 100%;
        cursor: pointer;
    }


.socmed_body {
    margin-top: 20vh;
    height: 85vh;
    width: 100%;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    background-color: #FAF7F0;
}

.socmed_title {
    position: relative;
    width: 500px;
    left: 50%;
    transform: translateX(-50%);
    top: 13vh;
    font-size: var(--font-size-jumbo);
    text-align: center;
}

.socmed_icons {
    position: relative;
    width: 300px;
    left: 50%;
    transform: translateX(-50%);
    top: 20vh;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.socmed_icons_row {
    width: 100%;
    height: 60px;
    display: flex;
    gap: 40px;
    flex-direction: row;
}

.socmed_icon {
    flex: 0.25;
}

    .socmed_icon img {
        width: 100%;
        cursor: pointer;
    }

.socmed_text2 {
    position: relative;
    width: 500px;
    left: 50%;
    transform: translateX(-50%);
    top: 25vh;
    font-size: var(--font-size-jumbo);
    text-align: center;
}

.socmed_textbox {
    position: relative;
    width: 260px;
    height: 40px;
    left: 50%;
    transform: translateX(-50%);
    top: 30vh;
    font-size: var(--font-size-jumbo);
    text-align: center;
}

.link-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 260px;
    padding: 8px 14px;
    border: 1px solid #b38b6d;
    border-radius: 999px;
    background-color: #faf6f0;
    color: #6b3e1e;
    font-size: 14px;
    box-sizing: border-box;
}

    .link-box a {
        display: flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: inherit;
    }


    .link-box img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        vertical-align: middle;
    }

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b3e1e;
    display: flex;
    align-items: center;
}

    .copy-btn img {
        width: 16px;
        height: 16px;
    }

    .copy-btn:hover {
        opacity: 0.7;
    }

.socmed_cancel {
    position: relative;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    top: 32vh;
    font-size: var(--font-size-jumbo);
    text-align: center;
}

    .socmed_cancel img {
        width: 100%;
        cursor: pointer
    }

@media print, screen and (max-width:40em) {
    .show-desktop {
        display: none;
    }

    .show-mobile {
        display: block;
    }

    html, body {
        overflow-x: hidden;
    }

    body {
        background: url(assets/img_bg_hp.png?x=3);
        background-repeat: no-repeat;
        background-size: 100%;
    }

    :root {
        --primary-font-color: #ffffff;
        --secondary-font-color: #5C3327;
        --font-size-jumbo: 7.5vw;
        --font-size-heading: 6vw;
        --font-size-base: 4vw;
        --font-size-small: 3.4vw;
        --font-size-micro: 2.4vw;
        --brown: #5C3327;
        --gold: #C89A42;
    }

    .container {
        box-sizing: border-box;
        min-height: 900px;
    }

    .content {
        box-sizing: border-box;
        min-height: 900px;
    }



    .etutorials_subtitle {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 22vh;
        width: 90%;
        text-align: center;
    }

    .etutorial_detail_card {
        position: relative;
        top: 38vh;
        left: 50%;
        width: 90%;
        height: auto;
        transform: translateX(-50%)
    }

    .etutorial_detail_title {
        position: relative;
        top: 20%;
        left: 50%;
        width: 90%;
        transform: translateX(-50%);
        font-size: var(--font-size-jumbo);
        text-align: center;
        margin: 5% 0;
    }

    .etutorial_detail_level {
        position: relative;
        top: 35%;
        left: 50%;
        width: 90%;
        transform: translateX(-50%);
        font-size: var(--font-size-heading);
        text-align: center;
        margin: 5% 0;
    }

        .etutorial_detail_level img {
            width: 20px;
        }

    .etutorial_detail_duration {
        position: relative;
        top: 20%;
        left: 50%;
        width: 90%;
        transform: translateX(-50%);
        font-size: var(--font-size-heading);
        text-align: center;
        margin: 5% 0;
    }

        .etutorial_detail_duration img {
            width: 20px;
        }

    .etutorial_detail_download {
        position: relative;
        top: 20%;
        left: 50%;
        width: 80%;
        transform: translateX(-50%);
        font-size: var(--font-size-heading);
        text-align: center;
        margin: 5% 0;
    }

        .etutorial_detail_download img {
            width: 100%;
        }

    .etutorial_detail_back {
        position: relative;
        top: 20%;
        left: 50%;
        width: 90%;
        transform: translateX(-50%);
        font-size: var(--font-size-heading);
        text-align: center;
        margin: 5% 0;
    }

    /*brandstories*/
    .brandstories_container {
        min-height: 1300px !important;
    }

    .brandstories_title {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 20vh;
        width: 300px;
        text-align: center;
        font-size: var(--font-size-jumbo)
    }

    .brandstories_subtitle {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 22vh;
        width: 300px;
        text-align: center;
    }

    .brandstories_list {
        position: relative;
        top: 24vh;
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
        height: unset;
    }

    .brandstories_slide {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1vh;
    }

    .brandstories_card {
        position: relative;
        width: 100%;
        height: 300px;
    }

    .brandstories_card_title {
        position: relative;
        width: 100%;
        text-align: center;
        font-size: var(--font-size-base)
    }

    .brandstories_card_image {
        position: absolute;
        width: 100%;
        margin: 10px 0 0 0;
    }

        .brandstories_card_image img {
            width: 100%;
        }

    .brandstories_back {
        position: relative;
        top: 28vh;
        width: 100px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: var(--font-size-small)
    }

    .brandstory_detail_card {
        position: relative;
        top: 500px;
        left: 50%;
        width: 90%;
        height: auto;
        transform: translate(-50%, -50%)
    }

    .brandstory_detail_title {
        position: relative;
        top: 10%;
        left: 50%;
        width: 90%;
        transform: translateX(-50%);
        font-size: var(--font-size-heading);
        text-align: center;
        margin: 5% 0;
    }

    .brandstory_detail_level {
        position: relative;
        top: 30%;
        left: 50%;
        width: 90%;
        transform: translateX(-50%);
        font-size: var(--font-size-base);
        text-align: center;
        margin: 5% 0;
    }

        .brandstory_detail_level img {
            width: 20px;
        }

    .brandstory_detail_back {
        position: relative;
        top: 20%;
        left: 50%;
        width: 70%;
        transform: translateX(-50%);
        font-size: var(--font-size-base);
        text-align: center;
        margin: 5% 0;
    }

    .eshop_container {
        min-height: 1200px !important;
    }

    .eshop_title {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 22vh;
        width: 300px;
        text-align: center;
    }

    .eshop_col {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 28vh;
        width: 200px;
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .eshop_row1 {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 40px;
        height: unset;
    }

        .eshop_row1 .cell {
            flex: auto;
            width: 100%;
        }

    .eshop_row2 {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 40px;
        height: unset;
    }

        .eshop_row2 .cell {
            flex: auto;
            width: 100%;
        }

    .eshop_row3 {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 40px;
        height: unset;
    }

        .eshop_row3 .cell {
            flex: auto;
            width: 100%;
        }

    .cell img {
        width: 100%;
    }

    .eshop_row3 .cell img {
        width: 40%;
    }

    /*DISCOVER*/
    .discover_container {
        min-height: 1000px !important;
    }

    .discover {
        position: relative;
        width: 100%;
        height: clamp(800px, 90vh, 1000px);
        background: url(assets/discovermore/img_discover_bg.png) no-repeat;
        background-size: 100% 100%;
    }

    .discover_ptitle {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 19vh;
        width: 300px;
        text-align: center;
    }

    .discover_psubtitle {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 20vh;
        width: 300px;
        text-align: center;
        font-size: var(--font-size-jumbo)
    }

    .discover_list {
        position: relative;
        width: 340px;
        top: 22vh;
        overflow-x: auto;
        left: 50%;
        transform: translateX(-50%);
        height: 70%;
        scroll-snap-type: x mandatory;
        display: flex;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .discover_list::-webkit-scrollbar {
            display: none; /* hide scrollbar (Chrome/Safari) */
        }

    .discover_track {
        display: flex;
        flex-wrap: nowrap;
        gap: 1rem;
    }

    .discover_card {
        position: relative;
        flex: 1;
        width: 340px;
        height: 550px;
        text-align: center;
        background: url(assets/discovermore/img_discover_card.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .discover_title {
        position: relative;
        width: 90%;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
    }

    .discover_image {
        position: relative;
        width: 80%;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }

        .discover_image img {
            width: 100%;
        }

    .discover_subtitle {
        position: relative;
        width: 70%;
        top: 12%;
        left: 50%;
        transform: translateX(-50%);
    }

    .discover_button {
        position: absolute;
        width: 80%;
        top: 70%;
        left: 50%;
        transform: translateX(-50%);
    }

        .discover_button img {
            width: 80%;
        }

    .discover_back {
        position: relative;
        top: 240px;
        left: 50%;
        width: 70%;
        transform: translateX(-50%);
        text-align: center;
    }

    .discover_timer {
        position: relative;
        width: 80%;
        top: 22%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .discover_day {
        flex: 0.33;
        background-image: url('assets/discovermore/img_days.png');
        background-repeat: no-repeat;
        background-size: cover;
        aspect-ratio: 220/288;
    }

    .discover_hour {
        flex: 0.33;
        background-image: url('assets/discovermore/img_hours.png');
        background-repeat: no-repeat;
        background-size: cover;
        aspect-ratio: 220/288;
    }

    .discover_min {
        flex: 0.33;
        background-image: url('assets/discovermore/img_min.png');
        background-repeat: no-repeat;
        background-size: cover;
        aspect-ratio: 220/288;
    }

    .discover_timer_text {
        position: relative;
        color: #fff;
        text-align: center;
        width: 100%;
        font-size: var(--font-size-jumbo);
        line-height: 70px;
    }




    .content3 {
        min-height: 150vh;
        margin-top: 20vh;
        background-color: #FAF7F0;
        padding: 5vh 0;
    }

        .content3 .area {
            position: relative;
            min-height: 150vh;
            width: 90%;
            left: 50%;
            transform: translateX(-50%);
        }

            .content3 .area .subtitle {
                position: relative;
                width: 90vw;
                left: 50%;
                transform: translateX(-50%);
                top: 1vh;
                font-size: var(--font-size-small);
            }

    .content_form {
        height: unset;
        min-height: 50vh;
        margin-top: 0vh;
        background-color: #FAF7F0;
        padding: 10vh 0;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }

        .content_form .area {
            position: relative;
            height: unset;
            min-height: 50vh;
            width: 80%;
            left: 50%;
            transform: translateX(-50%);
        }

        .content_form .scrollable {
            overflow-y: scroll;
            overflow-x: hidden
        }

            .content_form .scrollable::-webkit-scrollbar {
                width: 3px;
                height: 3px;
            }

            .content_form .scrollable::-webkit-scrollbar-track {
                background: var(--gold);
            }

            .content_form .scrollable::-webkit-scrollbar-thumb {
                background: var(--brown);
            }

                .content_form .scrollable::-webkit-scrollbar-thumb:hover {
                    background: #555;
                }



    /*FORM*/
    .form {
        background: url(assets/form/img_header_mobile.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    .part {
        width: 100%;
    }

    header {
        font-size: var(--font-size-jumbo);
        text-align: center;
    }

    .row {
        width: 100%;
        margin-top: 20px;
    }

        .row .label {
            width: 100%;
            font-size: var(--font-size-small);
        }

        .row .field {
            width: 100%;
        }

            .row .field input[type=text], input[type=file], input[type=number] {
                width: calc(100% - 20px);
                border: solid 1px var(--brown);
                font-size: var(--font-size-base);
                color: var(--brown);
                padding: 10px;
                border-radius: 40px;
            }

            .row .field img {
                width: 50%;
                left: 50%;
                transform: translateX(-50%);
                position: relative;
            }

    #file_notif {
        font-size: var(--font-size-small);
    }

    .done_title {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 20vh;
        width: 90%;
        text-align: center;
        font-size: var(--font-size-jumbo)
    }

    .done_subtitle {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 22vh;
        width: 90%;
        text-align: center;
        font-size: var(--font-size-small)
    }

    .done_col {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 24vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 100px;
    }

    .done_row1 {
        width: 100%;
    }

        .done_row1 img, video {
            width: 100%;
        }

    .done_row2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

        .done_row2 div {
            
        }

            .done_row2 div img {
                position: relative;
                width: 100%;
                left: 50%;
                transform: translateX(-50%)
            }

    .confirm {
        position: absolute;
        top: 0vh;
        height: 0vh;
        width: 0;
        min-height: 50vh;
        margin-top: 20vh;
        background-color: #FAF7F0;
        padding: 10vh 0;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        z-index: 10;
        opacity: 0;
    }

    .confirm_show {
        top: 0vh;
        height: 100vh;
        opacity: 1;
        width: 100%;
    }

    .confirm_title {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 0vh;
        width: 90vw;
        text-align: center;
        font-size: var(--font-size-jumbo)
    }

    .confirm_subtitle {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 2vh;
        width: 90vw;
        text-align: center;
        font-size: var(--font-size-base)
    }

    .confirm_validation {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 5vh;
        width: 90vw;
        text-align: center;
        font-size: var(--font-size-base)
    }

    .confirm_part {
        width: 80vw;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
    }

    .confirm_button {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 5vh;
        width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .confirm_button div {
            width: 100%;
        }

        .confirm_button img {
            position: relative;
            width: 60%;
            left: 50%;
            transform: translateX(-50%)
        }

    .game_done_image {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 20vh;
        width: 80vw;
        text-align: center;
    }

    .game_done_title {
        position: relative;
        text-align: center;
        top: 22vh;
        width: 90vw;
        margin: 0px auto;
        left;
        left: 0;
        right: 0;
        text-align: center;
        font-size: var(--font-size-jumbo)
    }

    .game_done_subtitle {
        position: relative;
        text-align: center;
        top: 24vh;
        width: 90vw;
        margin: 0px auto;
        left;
        left: 0;
        right: 0;
        text-align: center;
        font-size: var(--font-size-base)
    }

    .game_done_button {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 26vh;
        width: 70vw;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 100px;
    }

        .game_done_button div {
            width: 100%;
            flex: 1;
        }

            .game_done_button div img {
                position: relative;
                width: 60%;
                left: 50%;
                transform: translateX(-50%)
            }

    .leaderboard_title {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 18vh;
        width: 96vw;
        text-align: center;
        font-size: var(--font-size-jumbo)
    }

    .leaderboard_subtitle {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 20vh;
        width: 96vw;
        text-align: center;
        font-size: var(--font-size-small);
        line-height: 30px;
    }

    .leaderboard_col {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        top: 22vh;
        width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

        .leaderboard_col .lrow {
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 10px;
            text-align: center;
            width: 100%;
        }

            .leaderboard_col .lrow div {
                padding: 5px 10px;
            }

            .leaderboard_col .lrow:nth-child(1) div {
                padding: 10px 10px;
            }

            .leaderboard_col .lrow:nth-child(2) div:nth-child(1) {
                padding: 10px 10px !important;
            }

            .leaderboard_col .lrow:nth-child(2) div:nth-child(2) {
                padding: 15px 10px !important;
            }

            .leaderboard_col .lrow:nth-child(2) div:nth-child(3) {
                padding: 15px 10px !important;
            }

            .leaderboard_col .lrow div:nth-child(1) {
                width: 5%;
                text-align: right;
            }

            .leaderboard_col .lrow div:nth-child(2) {
                width: 55%;
                text-align: left;
            }

            .leaderboard_col .lrow div:nth-child(3) {
                width: 35%;
                text-align: right;
            }

            .leaderboard_col .lrow .long {
                width: 100% !important;
                text-align: center !important;
            }

            .leaderboard_col .lrow img {
                width: 28px
            }

        .leaderboard_col .white {
            background-color: #fff;
            border-radius: 8px;
            text-align: center;
        }

        .leaderboard_col .lrow .lleft {
            width: 50% !important;
            margin-top: 20px;
        }

            .leaderboard_col .lrow .lleft img {
                position: relative;
                width: 100%;
                left: 50%;
                transform: translateX(-50%)
            }

        .leaderboard_col .lrow .lright {
            width: 50% !important;
            margin-top: 20px;
        }

            .leaderboard_col .lrow .lright img {
                position: relative;
                width: 100%;
                left: 50%;
                transform: translateX(-50%)
            }





    /*SHOWCASE*/
    .showcase {
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: unset;
        width: 100%;
        height: unset;
        min-height: 100vh;
    }

        .showcase .left {
            width: 100vw;
            height: 20vh;
        }

        .showcase .right {
            flex: 1;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 0px;
            border-top-right-radius: 30px;
            min-height: 800px;
        }

    .level3_image {
        position: absolute;
        top: 25vh;
        left: 50%;
        width: 88%;
        height: auto;
        transform: translateX(-50%)
    }

    @keyframes undulate {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(10px);
        }

        100% {
            transform: translateY(0px);
        }
    }


    /*FOOTER*/
    .footer {
        left: 0px;
        bottom: 0px;
        background-color: var(--brown);
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        width: 100%;
    }

        .footer ul {
            list-style-type: none;
            padding: 20px;
            margin: 0px;
        }

    .footerlogo ul li {
        width: 100%;
        text-align: center;
        padding: 5px 0px 5px 0px;
    }

    .footer ul li a {
        text-decoration: none;
        color: var(--primary-font-color);
        font-size: var(--font-size-small)
    }


    .socmed {
        position: relative;
        bottom: 0vh;
        width: 100%;
        height: unset;
    }

        .socmed img {
            width: 100%;
            height: unset;
        }
}