@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Noto+Serif+HK:wght@200..900&display=swap');
/* 1. Create a Clean Base
------------------------------------------------------------------------------*/
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address,
small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label,input, textarea, option, .nobox {background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}
blockquote, q {quotes: none;}
br {height: 0;}
ul, ol, dl{list-style: none;}
ul, ol, dl, li {margin:0; padding:0;  color: #555555; font-size: 14px; line-height: 24px;}
html, body{height: 100%; -webkit-appearance:none; border:none; -webkit-text-size-adjust:none;}
body{position:relative;}

/* Class for clearing floats */
.clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0;}
.cf:after,.cf:before{display: table;content: ''}
:after,:before{box-sizing: border-box;}
.cf:after{clear: both;}
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-family: "Google Sans", sans-serif !important;}

/* 2. Define Base Typography
------------------------------------------------------------------------------*/

/* Create the Default Headers  */
h1, h2, h3, h4, h5, h6 {font-family:var(--sofia);}

/* Other Typo */
strong {font-weight: bold;}
hr {border:0 #000 solid; border-top-width: 1px; clear: both; height: 0;}
ol {list-style: decimal;}
ul {list-style:none;}

/* 3. Images
------------------------------------------------------------------------------*/
/* Remove border around linked images */
img {border: 0; border-style: none;max-width: 100%;display: block;}

/*common display style*/
.dis-b{display:block;}
.pos_rel{ position:relative;}
.hidden{ display:none !important;}
.d_flex{display: flex;justify-content:flex-start;flex-wrap:wrap;}
.d_flex_ac{align-items: center;}
.d_flex_jc{justify-content: center;}
.d_flex_jb{justify-content: space-between;}
.d_flex_je{justify-content:flex-end;}
a,.in,.sub,img{transition: 0.4s ease all;}
/* btn arrow end */
.hide{display: none;}
body{overflow: hidden;position: relative;height: 100vh;}

/* .loading video{width: 100%;height: 100%;object-fit: cover;object-position: center;} */
.loading{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: 2;}
.loading .page3{width: 100%;height: 100vh;}
.loading .page3 img { width: 100%; height: 100%; display: block; object-fit: contain; }
.loading .colin { width: 500px; position: absolute; left: 6%; top: 15%; z-index: 2;}
.loading .colin::after{content:'';width: 10px;height: 10px;border-radius: 50px;top: 0;bottom: 0;left: 0;right: 0;margin: auto;position: absolute;}
.loading .colin .brand{max-width:350px;display: block;margin: 0 auto;}





.mobile_only{display: none;}

.get_the_app{position: absolute;bottom:40px;left: 0;right: 0;margin: 0 auto;z-index: 1;width: fit-content;text-align: center;}
.get_the_app h2{    background: linear-gradient(180deg, #f4bc42 0%, #e3a028 45%, #ab6c12 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;font-size: 20px;margin-bottom: 20px;}
.get_the_app .btn_col{display: flex;align-items: center;gap: 20px;}
.get_the_app .btn_col a{max-width: 200px;}
.get_the_app .btn_col a img{display: block;max-width: 100%;}

.swiper-button-next, .swiper-button-prev { color: #ffb400; }
.page1{width: 100%;height: 100vh;background-image: url(../images/page_bg.jpg);background-repeat: no-repeat;background-size: 100% 100%;display: flex;align-items: center;justify-content: center;position: relative;}
.page1::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #000;opacity: 0.6;}
.page1 .wrapper{max-width: 1680px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;width: 100%;position: relative;z-index: 2;}
.page1 .divider{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
.page1 .wrapper>div{width: 45%;}
.page1 .logo_box{text-align: center;}
.page1 .logo_box .brand{display: block;margin: 0 auto;width: fit-content;}
.page1 .logo_box h2{color: #c2811b;font-size: 20px;line-height: 27px;font-weight: 500;letter-spacing: 3px;margin: 22px 0;}
.page1 .logo_box h1{color: #fff;font-size: 75px;line-height: 75px;font-weight: 700;letter-spacing: 2px;margin: 22px 0;}
.page1 .logo_box h1 span{background: linear-gradient(135deg, #D4AF37 0%, #F3E5AB 50%, #D4AF37 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; display: inline-block;}
.page1 .logo_box p{color: #D1D5DB;font-size: 25px;line-height: 1;font-weight: 300;}

.page1 .comming_soon{background-color: #000000A6;border: 1px solid #8B8B8B5E;border-radius: 26px;padding: 120px 10px;text-align: center;}
.page1 .comming_soon h2{color: #fff;font-size:50px;line-height: 70px;font-weight: 700;letter-spacing: 1px;margin-bottom: 15px;text-transform: uppercase;display: block;}
.page1 .comming_soon h2 br{display: block;}
.page1 .comming_soon p{color: #D1D5DB;font-size: 22px;line-height:31px;font-weight: 300;margin-top:25px;}
.page1 .comming_soon h3{color: #c2811b;font-size: 26px;line-height: 35px;font-weight: 500;letter-spacing:0px;margin-bottom: 40px;}

.page1 .countdown{ display:flex; gap:40px; justify-content:center; flex-wrap:wrap;}
.page1 .countdown .box { width: 125px; height: 136px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #D4AF3733; border-radius: 14px; background-color: #1A1A1A;position: relative;}
.page1 .countdown .box:not(:last-child)::after { content: ''; position: absolute; right: -20px; top: 53px; width: 4px; height: 22px; background-image: url(../images/dot.svg); background-repeat: no-repeat; background-size: 100% 100%; }
.page1 .countdown .box span { font-size: 54px; font-weight:700; line-height:54px; color: #c2811b;}
.page1 .countdown .box p{ font-size:18px; color: #fff;margin: 0;}
.page1 .countdown .box:last-child span{color:#D1D5DB;}

.page2{width: 100%;height: 100vh;}
.page2 img { width: 100%; height: 100%; display: block; object-fit: contain; background-color: #010101; }
.mobile_only{display: none;}




.page1 .logo_box h2,
.page1 .comming_soon h3,
.page1 .countdown .box span,
.get_the_app h2{background: linear-gradient(180deg, #fee195 0%, #c3944d 45%, #a26a2f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}

.page1 .logo_box h1,
.page1 .logo_box h1 span,
.page1 .comming_soon h2,
.page1 .comming_soon h2 span ,
.swiper-button-next, .swiper-button-prev{ background: linear-gradient(180deg, #fee195 0%, #c3944d 45%, #a26a2f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}

.page1 .countdown .box:last-child span{ background: linear-gradient(180deg, #fff 0%, #fff 45%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}

/* 1280 */
@media screen and (max-width: 1599px) {
    .page1 .wrapper { max-width: 1160px; }
    .page1 .logo_box h1 { font-size: 64px; line-height: 60px; letter-spacing:1.5px; margin: 14px 0; }
    .page1 .logo_box h2 { font-size: 16px; line-height: 18px; letter-spacing: 2px; margin: 18px 0; }
    .page1 .logo_box p { font-size: 16px; line-height: 1; letter-spacing: 1px; }
    .page1 .logo_box .brand { max-width: 180px; }
    .page1 .comming_soon h2 { font-size: 38px; line-height: 40px; margin-bottom: 10px; }
    .page1 .comming_soon h3 { font-size: 22px; line-height: 25px; letter-spacing: 0px; margin-bottom: 30px; }
    .page1 .countdown { gap: 30px; }
    .page1 .countdown .box { width: 98px; height: 100px; }
    .page1 .countdown .box p { font-size: 16px; line-height: 1; }
    .page1 .countdown .box span { font-size: 50px; line-height: 50px; margin-bottom: 6px; }
    .page1 .comming_soon { padding: 60px 10px; }
    .page1 .comming_soon p { font-size: 16px; line-height:1.5; margin-top: 16px; }
    .get_the_app { bottom: 30px; }
    .get_the_app .btn_col a { max-width: 150px; }
    .page1 .countdown .box:not(:last-child)::after { top: 41px; }
    
}
@media screen and (max-width:1279px) {
    .page1 .wrapper { max-width: 950px; }
    .page1 .wrapper>div { width: 48%; }
    .page1 .logo_box h1 { font-size: 60px; }
    .page1 .countdown { gap: 20px; }
    .page1 .countdown .box { width: 89px; height: 90px; }
    .page1 .countdown .box:not(:last-child)::after { top: 31px; right: -13px; }
    .page1 .comming_soon h2 { font-size: 34px; line-height: 40px; margin-bottom: 10px; }
    
}
@media screen and (max-width:1023px) {
    .page1 .wrapper{flex-wrap: wrap;gap: 50px;max-width: 600px;}
    .page1 .wrapper>div { width: 100%; }
    .page1 .divider { transform: rotate(90deg); top: 20px;}
    .page1 .comming_soon { padding: 50px 10px; }
    .page2 img.desktop_only{display: none;}
    .page2 img.mobile_only{display: block;}


    
}
@media screen and (max-width:767px) {
    .page1{align-items: flex-start;padding-top: 8vh;}
    .page1 .wrapper { gap: 0; max-width:320px;display: block;}
    .page1 .logo_box{margin-bottom: 20px;}
    .page1 .logo_box .brand { max-width: 120px; }
    .page1 .logo_box h2 { margin: 10px 0; }
    .page1 .logo_box h1 { font-size: 40px; margin: 10px 0; }
    .page1 .logo_box h1 { font-size: 40px; margin: 10px 0; line-height: 1; }
    .page1 .comming_soon { padding: 20px 10px; max-width: 278px; margin: 6vh auto 0; }
    .page1 .comming_soon h2 { font-size: 20px; line-height: 1; margin-bottom: 10px; letter-spacing: 0; }
    .page1 .comming_soon h3 { font-size: 14px; line-height: 25px; letter-spacing: 0px; margin-bottom: 20px; }
    .page1 .countdown .box { width: 49px; height: 55px; } 
    .page1 .countdown .box span { font-size: 22px; line-height: 20px; margin-bottom: 4px; }
    .page1 .countdown .box p { font-size: 10px; line-height: 1; }
    .page1 .comming_soon p { font-size: 10px; line-height: 1.5; margin-top: 8px; }
    .get_the_app .btn_col { gap: 10px; }
    .get_the_app .btn_col a { max-width: 130px; }
    .get_the_app h2 { font-size: 18px; margin-bottom: 15px; }
    .page1 .divider{display: none;}
    .page1 .comming_soon>p{display: none;}
    .page1 .countdown .box:not(:last-child)::after { top: 16px; }
    .page1 { background-size: 800px 100%; background-position: bottom -70px center; background-color: #000; }


}