@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100..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; font-family: "Heebo", sans-serif;}

/* 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: "Heebo", sans-serif;}

/* 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;}
.page{position: fixed;top: 0;left: 0;width: 100%;height: 100%;transition: 0.5s ease all;}
.page.active{opacity: 0;visibility: hidden;}
.page>video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.page img{width: 100%;}
.page1{z-index: 6;}


.page2{background-color: rgb(0 ,0 ,0 , 0.8);z-index: 2;display: flex;align-items: center;justify-content: center;}
.page2 .inner{width:100%;height: fit-content;border-radius: 20px;text-align: center;max-width: 600px;position: relative;}
.countdown{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap;margin: 20px 0;}
.countdown .box{ width:80px; height:80px; border-radius:10px; display:flex; flex-direction:column; justify-content:center; align-items:center;border:1px solid #cfa35a;}
.countdown .box span { font-size: 30px; font-weight: bold; line-height: 30px; color: #fff;}
.countdown .box p{ margin-top:5px; font-size:15px; color: #cfa35a;}
.card {position: relative; width: 100%; max-width: 700px; padding: 50px 35px 45px; border-radius: 28px; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(20px); text-align: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8); border: 1.5px solid rgba(212, 175, 55, 0.8); overflow: hidden; }
.card::before { content: ''; position: absolute; top: -2px; left: 30%; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, #ffd86b, #d4af37, transparent); box-shadow: 0 0 12px 2px rgba(255, 216, 107, 0.8); }
.card::after { content: ''; position: absolute; right: -2px; top: 40%; width: 2px; height: 25%; background: linear-gradient(180deg, transparent, #ffd86b, transparent); box-shadow: 0 0 10px 1px rgba(255, 216, 107, 0.6); }
.card .tagline { color: #d4af37; font-size: 14px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.card .divider-line { height: 1px; width: 50px; background: linear-gradient(90deg, transparent, #d4af37); }
.card .divider-line.reverse { background: linear-gradient(90deg, #d4af37, transparent); }
.card .star-icon { color: #ffd86b; font-size: 10px; margin-bottom: 12px; }
.card .main-heading { font-size: 38px; font-weight:500; line-height: 1.25; color: #ffffff; margin-bottom: 24px; letter-spacing:1px; }
.card .main-heading span { background: linear-gradient(180deg, #e6c875 0%, #a8812a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; }
.card .middle-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px 0; }
.card .middle-divider .line { height: 1px; flex-grow: 1; max-width: 130px; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5)); }
.card .middle-divider .line.right { background: linear-gradient(90deg, rgba(212, 175, 55, 0.5), transparent); }
.card .description { font-size: 20px; font-weight: 400; color: #e0e0e0; line-height: 1.45; }
.card .description span { display: block; }
.card .scan-tag { color: #d4af37; font-size: 15px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
.card .scan-tag .line { height: 1px; width: 45px; background: linear-gradient(90deg, transparent, #d4af37); }
.card .scan-tag .line.right { background: linear-gradient(90deg, #d4af37, transparent); }
.card .qr-container { width: 100px; height: 100px; margin: 0 auto 12px; background: #ffffff; border-radius: 8px; padding:1px; box-shadow: 0 0 0 1px #d4af37, 0 0 20px rgba(212, 175, 55, 0.4); display: flex; align-items: center; justify-content: center; }
.card .qr-container img { width: 100%; height: 100%; object-fit: contain; }
.card .footer-text { font-size: 14px; color: #d1d1d1; line-height: 1.4; font-weight: 400; }
.card .footer-text span { display: block; }


.page3{background: #FAE9D4; background: linear-gradient(90deg, rgba(250, 233, 212, 1) 0%, rgba(247, 217, 180, 1) 50%);}
.page3 img{width: auto;display: block;margin: 0 auto;    max-height: 100%;}


/* responive */
@media (max-width:1399px) {
  .card { max-width: 600px; padding: 30px 25px; }
  .card .main-heading { font-size: 30px; line-height: 1.2; margin-bottom: 10px; }
  .card .description { font-size: 18px; }
  .card .qr-container { width: 80px; height: 80px; }
  .card .middle-divider { margin: 10px 0; }
  .card .scan-tag { font-size: 14px; margin-bottom: 14px; }
  .card .star-icon { font-size: 8px; margin-bottom: 10px; }
  
  
}
@media (max-width:768px) {
  .countdown { gap: 8px; margin: 12px 0; }
  .countdown .box { width:60px; height: 60px; }
  .countdown .box span { font-size: 22px; line-height: 20px; } 
  .countdown .box p { margin-top: 0; font-size: 11px; }
  .card .main-heading { font-size: 24px; line-height: 1.2; margin-bottom: 10px; }
  .card { max-width: 310px; padding: 30px 15px; }
  .card .scan-tag { font-size: 12px; margin-bottom: 14px; letter-spacing: 2px; }

}