*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#ffffff;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 30px;
background:#ff6347;
color:white;
position:sticky;
top:0;
z-index:1000;
}

/* Logo */

.logo{
font-size:22px;
font-weight:bold;
}

/* Menu */

.nav-links{
display:flex;
gap:25px;
align-items:center;
}

.nav-links a{
text-decoration:none;
color:white;
font-size:16px;
transition:0.3s;
}

.nav-links a:hover{
color:#ffe6e0;
}

/* Download Button */

.download-btn{
background:#ff6347;
color:white;
padding:8px 16px;
border-radius:6px;
font-weight:bold;
}

.download-btn:hover{
background:orange;
}

/* Mobile Menu Icon */

.menu-toggle{
display:none;
font-size:24px;
cursor:pointer;
}

/* Responsive */

@media(max-width:768px){

.nav-links{
position:absolute;
top:60px;
right:0;
background:#ff6347;
width:200px;
flex-direction:column;
align-items:center;
padding:20px;
display:none;
}

.nav-links.active{
display:flex;
}

.menu-toggle{
display:block;
}

}
/* HERO SECTION */

.hero{
padding:60px 20px;
background:white;
}

.hero-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}

/* TEXT */

.hero-text{
flex:1;
}

.hero-text h1{
font-size:40px;
color:#ff6347;
margin-bottom:15px;
}

.markets{
font-size:20px;
font-weight:bold;
margin-bottom:15px;
color:#333;
}

.desc{
font-size:16px;
margin-bottom:25px;
color:#555;
}

.hero-download{
background:#ff6347;
color:white;
padding:12px 25px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
transition:0.3s;
}

.hero-download:hover{
background:#ff3b1f;
}

/* SLIDER */

.hero-slider{
flex:1;
text-align:center;
}

.hero-slider img{
width:100%;
max-width:420px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
transition:0.5s;
}

/* MOBILE */

@media(max-width:768px){

.hero-container{
flex-direction:column;
text-align:center;
}

.hero-text h1{
font-size:30px;
}

.markets{
font-size:18px;
}

.hero-slider img{
max-width:300px;
}

}
/* RESULT SECTION */

.result-section{
padding:60px 20px;
background:#fff5f3;
text-align:center;
}

.result-title{
font-size:32px;
color:#ff6347;
margin-bottom:40px;
}

/* GRID */

.result-container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
max-width:1000px;
margin:auto;
}

/* CARD */

.result-card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.15);
border-top:5px solid #ff6347;
animation:vibrate 1.5s infinite;
}

.result-card h3{
color:#333;
margin-bottom:10px;
}

.result-number{
font-size:28px;
font-weight:bold;
color:#ff6347;
}

/* VIBRATE ANIMATION */

@keyframes vibrate{
0%{transform:translate(0)}
20%{transform:translate(-2px,2px)}
40%{transform:translate(-2px,-2px)}
60%{transform:translate(2px,2px)}
80%{transform:translate(2px,-2px)}
100%{transform:translate(0)}
}

/* MOBILE */

@media(max-width:900px){
.result-container{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:500px){
.result-container{
grid-template-columns:1fr;
}
}
/* GAME TIMING SECTION */

.game-time-section{
padding:60px 20px;
background:white;
}

.time-title{
text-align:center;
font-size:32px;
color:#ff6347;
margin-bottom:35px;
}

.game-time-container{
max-width:700px;
margin:auto;
background:#fff5f3;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

/* ROW */

.game-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 10px;
border-bottom:1px dashed #ff6347;
font-size:18px;
}

.game-row:last-child{
border-bottom:none;
}

.game-name{
font-weight:600;
color:#333;
}

.game-time{
color:#ff6347;
font-weight:bold;
}

/* MOBILE */

@media(max-width:600px){

.game-row{
font-size:16px;
}

}




/* ABOUT APP SECTION */

.about-app{
padding:60px 20px;
background:#fff5f3;
}

.about-title{
text-align:center;
font-size:32px;
color:#ff6347;
margin-bottom:30px;
}

.about-box{
max-width:900px;
margin:auto;
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,0.1);
line-height:1.8;
font-size:17px;
color:#333;
}

/* NOTE BOX */

.note-box{
background:#ffe6e0;
border-left:5px solid #ff6347;
padding:15px;
margin:20px 0;
border-radius:6px;
}

/* BRAND TEXT */

.brand-text{
margin-top:20px;
font-weight:600;
color:#ff6347;
}

/* MOBILE */

@media(max-width:768px){

.about-box{
font-size:16px;
padding:20px;
}

.about-title{
font-size:26px;
}

}
/* RESPONSIBLE INFO SECTION */

.info-section{
padding:60px 20px;
background:white;
}

.info-title{
text-align:center;
font-size:30px;
color:#ff6347;
margin-bottom:30px;
}

.info-box{
max-width:900px;
margin:auto;
background:#fff5f3;
padding:25px;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.1);
line-height:1.8;
font-size:17px;
color:#333;
border-left:6px solid #ff6347;
}

/* MOBILE */

@media(max-width:768px){

.info-title{
font-size:24px;
}

.info-box{
font-size:16px;
padding:20px;
}

}
/* TRUSTED PLATFORM SECTION */

.trusted-section{
padding:60px 20px;
background:#fff5f3;
}

.trusted-title{
text-align:center;
font-size:32px;
color:#ff6347;
margin-bottom:30px;
}

.trusted-box{
max-width:900px;
margin:auto;
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 8px 25px rgba(0,0,0,0.1);
line-height:1.8;
font-size:17px;
color:#333;
text-align:center;
}

/* WHATSAPP BUTTON */

.whatsapp-btn{
display:inline-block;
margin-top:25px;
background:#25D366;
color:white;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
font-size:16px;
transition:0.3s;
}

.whatsapp-btn:hover{
background:#1ebe5d;
transform:scale(1.05);
}

/* MOBILE */

@media(max-width:768px){

.trusted-title{
font-size:26px;
}

.trusted-box{
padding:20px;
font-size:16px;
}

}




/* HOW TO PLAY SECTION */

.how-play{
padding:70px 20px;
background:white;
}

.how-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
gap:50px;
}

/* IMAGE */

.how-image{
flex:1;
text-align:center;
}

.how-image img{
width:100%;
max-width:420px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* TEXT */

.how-text{
flex:1;
}

.how-text h2{
font-size:32px;
color:#ff6347;
margin-bottom:25px;
}

/* STEPS */

.steps{
display:flex;
flex-direction:column;
gap:15px;
}

.step{
display:flex;
align-items:center;
background:#fff5f3;
padding:12px 15px;
border-radius:8px;
}

.step-num{
background:#ff6347;
color:white;
width:35px;
height:35px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-weight:bold;
margin-right:15px;
}

.step p{
margin:0;
font-size:17px;
color:#333;
}

/* MOBILE */

@media(max-width:768px){

.how-container{
flex-direction:column;
text-align:center;
}

.step{
justify-content:center;
}

}




/* FOOTER */

.footer{
background:#ff6347;
color:white;
padding-top:40px;
}

.footer-container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
gap:40px;
padding:20px;
flex-wrap:wrap;
}

/* COLUMN */

.footer-col{
flex:1;
min-width:220px;
}

.footer-col h3{
margin-bottom:15px;
}

.footer-col p{
line-height:1.6;
}

/* LINKS */

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col ul li{
margin-bottom:10px;
}

.footer-col ul li a{
color:white;
text-decoration:none;
transition:0.3s;
}

.footer-col ul li a:hover{
text-decoration:underline;
}

/* WHATSAPP BUTTON */

.footer-whatsapp{
display:inline-block;
margin-top:10px;
background:#25D366;
padding:10px 18px;
border-radius:6px;
color:white;
text-decoration:none;
font-weight:bold;
}

/* COPYRIGHT */

.footer-bottom{
text-align:center;
padding:15px;
background:#e5533d;
margin-top:20px;
font-size:14px;
}

/* MOBILE */

@media(max-width:768px){

.footer-container{
flex-direction:column;
text-align:center;
}

}