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

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

body{
  background:#05070e;
  color:white;
}


/* -------- HERO SECTION -------- */

.hero{
  position:relative;
  height:90vh;
  background:url("https://images.hdqwalls.com/download/free-fire-elite-4k-19-1920x1080.jpg");
  background-size:cover;
  background-position:center;
}

.overlay{
  position:absolute;
  height:100%;
  width:100%;
  background:linear-gradient(to bottom, rgba(0,0,0,0.6), #05070e);
}

nav{
  display:flex;
  justify-content:space-between;
  padding:20px 40px;
  position:relative;
}

.logo{
  font-size:26px;
  font-weight:700;
}

.btn{
  background:linear-gradient(45deg,#ff1e1e,#ff7b00);
  padding:10px 18px;
  border-radius:6px;
  text-decoration:none;
  color:white;
}

.hero-content{
  position:relative;
  text-align:center;
  top:32%;
}

.hero-content h1{
  font-size:40px;
  text-shadow:0 0 15px red;
}

.big-btn{
  display:inline-block;
  margin-top:15px;
  padding:12px 30px;
  background:linear-gradient(45deg,#ff1e1e,#ff7b00);
  border-radius:10px;
  text-decoration:none;
  color:white;
  font-weight:700;
}



/* -------- DETAILS SECTION -------- */

.details{
  text-align:center;
  padding:40px 15px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:15px;
  margin-top:20px;
}

.card{
  background:linear-gradient(180deg,#0c1224,#080b16);
  padding:20px;
  border-radius:10px;
  border:1px solid red;
}



/* -------- RULES -------- */

.rules{
  padding:40px;
}

.rules ul li{
  margin:8px 0;
}


/* -------- REGISTER PAGE BG -------- */

.small-hero{
  background:url("https://images7.alphacoders.com/107/1074383.jpg");
  background-size:cover;
  background-position:center;
  text-align:center;
  padding:40px;
}

.form-box{
  max-width:450px;
  margin:30px auto;
  background:#0d1220;
  padding:25px;
  border-radius:12px;
  border:1px solid red;
}

input,textarea{
  width:100%;
  padding:10px;
  margin:8px 0 12px 0;
  border:none;
  border-radius:6px;
}

button{
  width:100%;
  padding:12px;
  background:linear-gradient(45deg,#ff1e1e,#ff7b00);
  border:none;
  border-radius:8px;
  font-size:18px;
  cursor:pointer;
}



footer{
  text-align:center;
  padding:20px;
  opacity:.8;
}



/* -------- PAYMENT SECTION -------- */

.pay-title{
  margin-top:10px;
  text-align:center;
}

.qr-box{
  text-align:center;
  margin:10px 0;
}

.qr-box img{
  width:220px;
  border-radius:10px;
}

.info{
  opacity:.8;
  font-size:13px;
  margin-bottom:10px;
}
/* -------- LEADERBOARD PAGE -------- */

.leader-hero{
  position:relative;
  text-align:center;
  padding:60px 20px;
  background:url("https://images7.alphacoders.com/112/1128033.jpg");
  background-size:cover;
  background-position:center;
}

.overlay2{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0,0,0,.7);
}

.leader-hero h1,
.leader-hero p{
  position:relative;
}

.leader-hero h1{
  font-size:38px;
  text-shadow:0 0 18px red;
}

.winner-section{
  padding:30px;
  text-align:center;
}

.winner-box{
  max-width:500px;
  margin:15px auto;
  background:#0d1220;
  padding:18px;
  border-radius:12px;
  border:1px solid red;
}

.winner-box span{
  color:#facc15;
}

.board{
  padding:25px;
}

table{
  width:100%;
  border-collapse:collapse;
  background:#0d1220;
  border-radius:10px;
  overflow:hidden;
}

th,td{
  padding:12px;
  text-align:center;
}

th{
  background:#ff1e1e;
}

tr{
  border-bottom:1px solid #222;
}
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 30px;
  position:relative;
  z-index:2;
}

.nav-links a{
  margin-left:18px;
  text-decoration:none;
  color:white;
  font-weight:500;
  transition:.3s;
}

.nav-links a:hover{
  color:#facc15;
}
/* -------- THANK YOU PAGE -------- */

.thank-container{
  height:80vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;
  animation:fadeIn 1.2s ease-in-out;
}

.checkmark{
  font-size:80px;
  color:#22c55e;
  margin-bottom:10px;
  animation:pop 0.6s ease-in-out;
}

.thank-container h1{
  font-size:34px;
  margin-bottom:10px;
  text-shadow:0 0 15px #22c55e;
}

.thank-container p{
  max-width:500px;
  opacity:.85;
  line-height:1.6;
}

.thank-btn{
  margin-top:20px;
  padding:12px 30px;
  background:linear-gradient(45deg,#ff1e1e,#ff7b00);
  color:white;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  transition:.3s;
}

.thank-btn:hover{
  transform:scale(1.05);
}

/* Animations */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes pop{
  0%{transform:scale(0);}
  80%{transform:scale(1.2);}
  100%{transform:scale(1);}
}
/* -------- THANK YOU PAGE -------- */

.thank-container{
  height:85vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:20px;
  animation:fadeIn 1.2s ease-in-out;
}

.checkmark{
  font-size:80px;
  color:#22c55e;
  margin-bottom:10px;
  animation:pop 0.6s ease-in-out;
}

.thank-container h1{
  font-size:34px;
  margin-bottom:10px;
  text-shadow:0 0 15px #22c55e;
}

.thank-text{
  max-width:520px;
  opacity:.9;
  line-height:1.6;
  margin-bottom:18px;
}

/* WhatsApp Button */
.whatsapp-join{
  display:inline-block;
  margin-top:10px;
  padding:14px 34px;
  background:linear-gradient(45deg,#25D366,#16a34a);
  color:white;
  text-decoration:none;
  border-radius:30px;
  font-size:18px;
  font-weight:600;
  box-shadow:0 0 25px rgba(37,211,102,.6);
  transition:.3s;
}

.whatsapp-join:hover{
  transform:scale(1.06);
}

/* Warning Note */
.note{
  margin-top:10px;
  font-size:14px;
  color:#facc15;
  opacity:.9;
}

.thank-btn{
  margin-top:22px;
  padding:12px 30px;
  background:linear-gradient(45deg,#ff1e1e,#ff7b00);
  color:white;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  transition:.3s;
}

.thank-btn:hover{
  transform:scale(1.05);
}

/* Animations */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(25px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes pop{
  0%{transform:scale(0);}
  80%{transform:scale(1.2);}
  100%{transform:scale(1);}
}
/* -------- LANGUAGE SWITCH -------- */

.lang-switch{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:15px 0;
}

.lang{
  padding:6px 16px;
  border-radius:20px;
  border:1px solid #facc15;
  text-decoration:none;
  color:white;
  font-size:14px;
  transition:.3s;
}

.lang:hover{
  background:#facc15;
  color:black;
}

.lang.active{
  background:#facc15;
  color:black;
  font-weight:600;
}
/* -------- HAMBURGER NAVBAR -------- */

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 30px;
  position:relative;
  z-index:10;
}

.logo{
  font-size:26px;
  font-weight:700;
}

/* Hide checkbox */
#menu-toggle{
  display:none;
}

/* Hamburger icon */
.hamburger{
  width:30px;
  height:22px;
  display:none;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}

.hamburger span{
  height:4px;
  width:100%;
  background:white;
  border-radius:5px;
  transition:.3s;
}

/* Nav links desktop */
.nav-links{
  display:flex;
  gap:20px;
}

.nav-links a{
  text-decoration:none;
  color:white;
  font-weight:500;
  transition:.3s;
}

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

/* -------- MOBILE VIEW -------- */
@media(max-width:768px){

  .hamburger{
    display:flex;
  }

  .nav-links{
    position:absolute;
    top:65px;
    right:30px;
    background:#0d1220;
    flex-direction:column;
    width:180px;
    padding:15px;
    border-radius:10px;
    border:1px solid red;
    display:none;
  }

  #menu-toggle:checked ~ .nav-links{
    display:flex;
  }

  #menu-toggle:checked + .hamburger span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
  }

  #menu-toggle:checked + .hamburger span:nth-child(2){
    opacity:0;
  }

  #menu-toggle:checked + .hamburger span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
  }
}
/* -------- RULES PAGE -------- */

.rules-hero{
  text-align:center;
  padding:50px 20px;
  background:linear-gradient(to right,#ff1e1e,#ff7b00);
}

.rules-hero h1{
  font-size:36px;
}

.rules-hero p{
  opacity:.9;
}

.rules-box{
  max-width:900px;
  margin:30px auto;
  padding:20px;
}

.rules-box h2{
  margin-top:25px;
  color:#facc15;
}

.rules-box ul{
  margin-top:10px;
  padding-left:20px;
}

.rules-box ul li{
  margin:8px 0;
  line-height:1.6;
}
/* -------- WHY PLAY GAMERS SECTION -------- */

.why-playgamers{
  padding:60px 20px;
  text-align:center;
  background:#05070e;
}

.why-playgamers h2{
  font-size:34px;
  margin-bottom:6px;
}

.why-sub{
  opacity:.8;
  margin-bottom:35px;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:22px;
  max-width:1100px;
  margin:auto;
}

.why-card{
  background:#0d1220;
  padding:22px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  transition:.3s;
}

.why-card:hover{
  transform:translateY(-6px);
  box-shadow:0 0 25px rgba(255,30,30,.4);
}

.why-card h3{
  margin-bottom:8px;
  color:#facc15;
  font-size:18px;
}

.why-card p{
  font-size:14px;
  opacity:.85;
}

.why-cta{
  display:inline-block;
  margin-top:40px;
  padding:14px 36px;
  background:linear-gradient(45deg,#ff1e1e,#ff7b00);
  color:white;
  text-decoration:none;
  border-radius:30px;
  font-size:18px;
  font-weight:600;
  transition:.3s;
}

.why-cta:hover{
  transform:scale(1.06);
}
/* -------- CONTACT PAGE -------- */

.contact-hero{
  text-align:center;
  padding:50px 20px;
  background:linear-gradient(45deg,#ff1e1e,#ff7b00);
}

.contact-box{
  max-width:700px;
  margin:30px auto;
  padding:20px;
  text-align:center;
}

.contact-methods{
  display:flex;
  flex-direction:column;
  gap:15px;
  margin:25px 0;
}

.contact-btn{
  padding:14px;
  border-radius:30px;
  text-decoration:none;
  color:white;
  font-size:16px;
  font-weight:600;
  transition:.3s;
}

.contact-btn:hover{
  transform:scale(1.05);
}

.contact-btn.whatsapp{
  background:#25D366;
}

.contact-btn.call{
  background:#2563eb;
}

.contact-btn.email{
  background:#9333ea;
}

.contact-note{
  font-size:14px;
  opacity:.85;
}
/* -------- COUNTDOWN TIMER -------- */

.countdown-box{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:18px 0;
}

.time-box{
  background:#0d1220;
  border:1px solid #ff1e1e;
  border-radius:10px;
  padding:10px 14px;
  min-width:70px;
  text-align:center;
  box-shadow:0 0 15px rgba(255,30,30,.4);
}

.time-box span{
  display:block;
  font-size:22px;
  font-weight:700;
  color:#facc15;
}

.time-box small{
  font-size:11px;
  opacity:.8;
}
/* -------- MAIN FOOTER -------- */

.main-footer{
  background:#05070e;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:40px;
  color:white;
}

.footer-top{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:30px;
  padding:0 20px 30px;
}

.footer-brand h2{
  color:#facc15;
  margin-bottom:8px;
}

.footer-brand p{
  font-size:14px;
  opacity:.85;
  line-height:1.6;
}

.footer-links h3,
.footer-social h3{
  margin-bottom:10px;
  color:#facc15;
}

.footer-links a,
.footer-social a{
  display:block;
  color:white;
  text-decoration:none;
  font-size:14px;
  margin:6px 0;
  opacity:.85;
  transition:.3s;
}

.footer-links a:hover,
.footer-social a:hover{
  color:#facc15;
  opacity:1;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:20px;
  text-align:center;
  font-size:13px;
}

.footer-bottom p{
  margin:6px 0;
}

.legal{
  opacity:.7;
  line-height:1.6;
}

.warning{
  color:#ff4d4d;
  font-weight:600;
}
/* -------- CAPTCHA BOX -------- */

.captcha-box{
  margin:15px 0;
  display:flex;
  justify-content:center;
}
/* -------- MATCH TODAY BADGE -------- */

.match-today{
  display:inline-block;
  padding:6px 16px;
  margin-bottom:10px;
  background:#ff1e1e;
  color:white;
  font-weight:700;
  border-radius:20px;
  letter-spacing:1px;
  animation:blink 1s infinite;
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:.3;}
  100%{opacity:1;}
}
/* -------- REGISTERED TEAMS -------- */

.teams-section{
  max-width:600px;
  margin:40px auto;
  padding:20px;
  text-align:center;
}

.teams-note{
  font-size:14px;
  opacity:.8;
  margin-bottom:20px;
}

.team{
  display:flex;
  justify-content:space-between;
  padding:14px 18px;
  margin:10px 0;
  border-radius:10px;
  background:#0d1220;
  border:1px solid rgba(255,255,255,.1);
}

.team small{
  font-weight:600;
}

.team.approved small{
  color:#22c55e;
}

.team.pending small{
  color:#facc15;
}

.team.highlight{
  border:2px dashed #facc15;
  box-shadow:0 0 15px rgba(250,204,21,.4);
}