/*========================================
JIO LOTTERY V2
STYLE.CSS
========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*========================
RESET
========================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#f5f8ff;
color:#222;
overflow-x:hidden;
line-height:1.6;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

/*========================
COMMON
========================*/

section{

padding:90px 0;

}

.section-header{

text-align:center;
margin-bottom:60px;

}

.section-header span{

display:inline-block;
background:#e8f1ff;
padding:8px 18px;
border-radius:50px;
font-size:14px;
font-weight:600;
color:#0d6efd;
margin-bottom:15px;

}

.section-header h2{

font-size:42px;
font-weight:700;
margin-bottom:15px;

}

.section-header p{

color:#666;
max-width:700px;
margin:auto;

}

/*========================
HEADER
========================*/

.header{

position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
box-shadow:0 5px 20px rgba(0,0,0,.08);
z-index:999;

}

.header .container{

display:flex;
align-items:center;
justify-content:space-between;
height:80px;

}

.logo{

display:flex;
align-items:center;
gap:12px;
color:#0d6efd;

}

.logo img{

width:55px;
height:55px;

}

.logo h2{

font-size:26px;
font-weight:700;

}

.navbar ul{

display:flex;
align-items:center;
gap:25px;

}

.navbar a{

color:#333;
font-weight:500;
transition:.3s;

}

.navbar a:hover{

color:#0d6efd;

}

.navbar .active{

color:#0d6efd;

}

.login-btn{

padding:10px 22px;
border:2px solid #0d6efd;
border-radius:8px;
color:#0d6efd;
font-weight:600;
transition:.3s;

}

.login-btn:hover{

background:#0d6efd;
color:#fff;

}

.register-btn{

padding:10px 22px;
background:#0d6efd;
color:#fff !important;
border-radius:8px;
font-weight:600;
transition:.3s;

}

.register-btn:hover{

background:#004fd4;

}

.menu-btn{

display:none;
font-size:28px;
cursor:pointer;

}

/*========================
HERO
========================*/

.hero{

padding-top:150px;

}

.hero-container{

display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:60px;

}

.badge{

display:inline-block;
padding:10px 18px;
background:#e8f1ff;
color:#0d6efd;
border-radius:50px;
font-size:15px;
font-weight:600;
margin-bottom:25px;

}

.hero-left h1{

font-size:60px;
line-height:1.2;
margin-bottom:25px;

}

.hero-left p{

font-size:18px;
color:#666;
margin-bottom:35px;

}

.hero-buttons{

display:flex;
gap:18px;
margin-bottom:45px;

}

.btn-primary{

display:inline-block;
padding:16px 34px;
background:#0d6efd;
color:#fff;
border-radius:10px;
font-weight:600;
transition:.3s;

}

.btn-primary:hover{

transform:translateY(-4px);
background:#0056d6;

}

.btn-secondary{

display:inline-block;
padding:16px 34px;
border:2px solid #0d6efd;
color:#0d6efd;
border-radius:10px;
font-weight:600;
transition:.3s;

}

.btn-secondary:hover{

background:#0d6efd;
color:#fff;

}

.hero-right img{

width:100%;
animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0);
}

}

.hero-stats{

display:flex;
gap:35px;

}

.hero-stats h3{

font-size:30px;
color:#0d6efd;

}

.hero-stats p{

font-size:15px;
color:#666;
}
/*========================================
NOTICE BAR
========================================*/

.notice {
  
  display: flex;
  align-items: center;
  background: #0d6efd;
  overflow: hidden;
  color: #fff;
  
}

.notice-title {
  
  background: #0047c9;
  padding: 18px 25px;
  font-weight: 700;
  white-space: nowrap;
  
}

.notice-content {
  
  flex: 1;
  overflow: hidden;
  
}

.notice-scroll {
  
  display: flex;
  width: max-content;
  animation: noticeMove 30s linear infinite;
  
}

.notice-scroll span {
  
  padding: 18px 40px;
  white-space: nowrap;
  font-weight: 500;
  
}

@keyframes noticeMove {
  
  0% {
    transform: translateX(0);
  }
  
  100% {
    transform: translateX(-50%);
  }
  
}

/*========================================
SERVICES
========================================*/

.services {
  
  background: #fff;
  
}

.service-grid {
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  
}

.service-card {
  
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
  transition: .4s;
  
}

.service-card:hover {
  
  transform: translateY(-10px);
  
}

.service-card img {
  
  width: 100%;
  height: 240px;
  object-fit: cover;
  
}

.service-content {
  
  padding: 25px;
  
}

.service-content h3 {
  
  font-size: 24px;
  margin-bottom: 15px;
  
}

.service-content p {
  
  color: #666;
  margin-bottom: 20px;
  
}

.service-content a {
  
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0d6efd;
  font-weight: 600;
  
}

/*========================================
WHY CHOOSE US
========================================*/

.why-us {
  
  background: #f8fbff;
  
}

.why-grid {
  
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  
}

.why-box {
  
  background: #fff;
  padding: 35px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  transition: .4s;
  
}

.why-box:hover {
  
  transform: translateY(-8px);
  
}

.why-box i {
  
  font-size: 50px;
  color: #0d6efd;
  margin-bottom: 20px;
  
}

.why-box h3 {
  
  margin-bottom: 15px;
  
}

.why-box p {
  
  color: #666;
  
}

/*========================================
COUNTER
========================================*/

.counter {
  
  background: linear-gradient(135deg, #0d6efd, #0046c8);
  color: #fff;
  
}

.counter-grid {
  
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  
}

.counter-box {
  
  text-align: center;
  
}

.counter-box h2 {
  
  font-size: 42px;
  margin-bottom: 10px;
  
}

.counter-box p {
  
  font-size: 16px;
  
}

/*========================================
ABOUT
========================================*/

.about {
  
  background: #fff;
  
}

.about-grid {
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  
}

.about-image img {
  
  border-radius: 20px;
  
}

.about-content span {
  
  display: inline-block;
  color: #0d6efd;
  font-weight: 600;
  margin-bottom: 15px;
  
}

.about-content h2 {
  
  font-size: 42px;
  margin-bottom: 20px;
  
}

.about-content p {
  
  color: #666;
  margin-bottom: 25px;
  
}

.about-content ul {
  
  margin-bottom: 30px;
  
}

.about-content ul li {
  
  padding: 10px 0;
  font-size: 17px;
  
}
/*========================================
REWARD TABLE
========================================*/

.reward-section{

background:#f5f8ff;

}

.table-responsive{

overflow-x:auto;

}

.reward-table{

width:100%;
border-collapse:collapse;
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.reward-table th{

background:#0d6efd;
color:#fff;
padding:18px;
font-size:18px;

}

.reward-table td{

padding:18px;
text-align:center;
border-bottom:1px solid #eee;

}

.reward-table tr:hover{

background:#f4f8ff;

}

.active-status{

display:inline-block;
padding:6px 14px;
background:#22c55e;
color:#fff;
border-radius:20px;
font-size:14px;
font-weight:600;

}

/*========================================
FAQ
========================================*/

.faq{

background:#fff;

}

.faq-box{

background:#f8fbff;
padding:30px;
border-radius:15px;
margin-bottom:20px;
box-shadow:0 10px 25px rgba(0,0,0,.05);
transition:.3s;

}

.faq-box:hover{

transform:translateX(8px);

}

.faq-box h3{

margin-bottom:15px;
color:#0d6efd;

}

.faq-box p{

color:#666;
line-height:1.8;

}

/*========================================
CTA
========================================*/

.cta{

background:linear-gradient(135deg,#0d6efd,#0046c8);
text-align:center;
color:#fff;

}

.cta h2{

font-size:48px;
margin-bottom:20px;

}

.cta p{

font-size:18px;
margin-bottom:35px;

}

/*========================================
CONTACT
========================================*/

.contact{

background:#fff;

}

.contact-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.contact-card{

padding:40px;
text-align:center;
background:#f8fbff;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.06);
transition:.3s;

}

.contact-card:hover{

transform:translateY(-10px);

}

.contact-card i{

font-size:45px;
color:#0d6efd;
margin-bottom:20px;

}

.contact-card h3{

margin-bottom:15px;

}

.contact-card p{

color:#666;

}

/*========================================
FOOTER
========================================*/

.footer{

background:#111827;
color:#fff;
padding:80px 0 30px;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
margin-bottom:40px;

}

.footer h2,
.footer h3{

margin-bottom:20px;

}

.footer p{

color:#cbd5e1;

}

.footer ul li{

margin-bottom:12px;

}

.footer ul a{

color:#cbd5e1;
transition:.3s;

}

.footer ul a:hover{

color:#fff;

}

.footer hr{

border:none;
height:1px;
background:#2b3445;
margin-bottom:20px;

}

.copyright{

text-align:center;
color:#94a3b8;

}

/*========================================
WHATSAPP BUTTON
========================================*/

.whatsapp{

position:fixed;
left:25px;
bottom:25px;
width:60px;
height:60px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
color:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.25);
z-index:999;
transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

}

/*========================================
SCROLL TOP
========================================*/

#topBtn{

position:fixed;
right:25px;
bottom:25px;
width:55px;
height:55px;
background:#0d6efd;
color:#fff;
border:none;
border-radius:50%;
font-size:20px;
cursor:pointer;
display:none;
z-index:999;
box-shadow:0 10px 25px rgba(0,0,0,.25);
transition:.3s;

}

#topBtn:hover{

transform:translateY(-5px);

}