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

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

@font-face {
    font-family: SofiaPro;
    font-weight: bold;
    src: url('fonts/dbsharpx/SofiaProBoldAz.otf');
}
@font-face {
    font-family: dbsharpx;
    font-weight: bold;
    src: url('fonts/dbsharpx.ttf');
}
:root {
    --primary-font-color: #ffffff;
    --secondary-font-color: #5C3327;
    --font-size-jumbo: 2.6vw;
    --font-size-heading: 2vw;
    --font-size-base: 1.5vw;
    --font-size-small: 1.2vw;
    --font-size-micro: 1.0vw;
    --brown: #5C3327;
    --gold: #C89A42;
} 
body {
    font-family: dbsharpx;
    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%;

}
input {font-family:dbsharpx;}
    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-base);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: 60vw;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%;}
.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-base)}
.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: 8vw;
        --font-size-heading: 7vw;
        --font-size-base: 5.2vw;
        --font-size-small: 4.5vw;
        --font-size-micro: 3.5vw;
        --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: 80vw;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:100%;}
    
    /*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                  {width:100%;}
    .done_row2 div img              {position:relative;width:45%;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-base)}
    .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;}


}