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

body{
  font-family:'Cairo',sans-serif;
  color:white;
  min-height:100vh;
  background:
    linear-gradient(rgba(10,15,30,.7), rgba(10,15,30,.9)),
    url("images/images.jpeg");
  background-size:cover;
  background-position:center;
}

/* ===== Stars ===== */

.stars,.stars2,.stars3{
  position:fixed;
  width:200%;
  height:200%;
  z-index:0;
}

.stars{
  background:radial-gradient(1px 1px at 20px 30px,#fff,transparent);
  animation:moveStars 60s linear infinite;
}
.stars2{
  background:radial-gradient(2px 2px at 120px 80px,#ffd27d,transparent);
  animation:moveStars 120s linear infinite;
}
.stars3{
  background:radial-gradient(3px 3px at 200px 200px,#fff,transparent);
  animation:moveStars 180s linear infinite;
}

@keyframes moveStars{
  from{transform:translateY(0)}
  to{transform:translateY(-500px)}
}

/* ================= NAVBAR ================= */

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 25px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  position:relative;
  z-index:3;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
}

.logo img{height:48px;}

#navmenu{
  display:flex;
  align-items:center;
  gap:28px;
}

/* links */

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

nav a{
  color:white;
  text-decoration:none;
  font-size:15px;
  transition:.25s;
}

nav a:hover{color:#f5c77a}

/* auth container */

#nav-auth-container{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left: 20px;
}

/* sign in button */

.sign-btn{
  border:1px solid #f5c77a;
  padding:7px 14px;
  border-radius:20px;
}

/* hamburger */

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

.menu-toggle i{
  transition:transform .3s ease;
}

/* ================= PROFILE ================= */

.nav-profile{
  position:relative;
}

.nav-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid #f5c77a;
  cursor:pointer;
}

/* dropdown */

.profile-menu{
  position:absolute;
  right:0;
  top:48px;
  background:#0b1220;
  border-radius:12px;
  padding:14px;
  min-width:180px;
  display:none;
  flex-direction:column;
  gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.15);
}

.profile-menu.show{
  display:flex;
}

/* desktop hover */

.nav-profile:hover .profile-menu{
  display:flex;
}

.profile-name{
  font-weight:600;
  font-size:14px;
  opacity:.9;
}

.profile-menu a,
.profile-menu button{
  background:none;
  border:none;
  color:white;
  text-align:left;
  cursor:pointer;
  font-size:14px;
  padding:6px 0;
}

.profile-menu a:hover,
.profile-menu button:hover{
  opacity:.7;
}

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

.hero{
  text-align:center;
  padding:90px 20px;
  position:relative;
  z-index:1;
}

.hero h1{
  font-size:clamp(34px,6vw,64px);
  color:#f5c77a;
}

.timer{margin:18px 0}

.cta{
  display:inline-block;
  margin-top:15px;
  padding:14px 28px;
  border-radius:10px;
  background:linear-gradient(135deg,#4facfe,#00f2fe);
  color:black;
  text-decoration:none;
  transition:.3s;
}

.cta:hover{transform:translateY(-4px)}

/* ================= HOW ================= */

.how{
  text-align:center;
  padding:70px 20px;
  z-index:1;
  position:relative;
}

.how-steps{
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
  margin-top:25px;
}

.how-box{
  width:200px;
  padding:28px;
  border-radius:16px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(245,199,122,.4);
  transition:.3s;
}

.how-box i{
  font-size:26px;
  color:#f5c77a;
}

.num{
  display:block;
  font-size:26px;
  margin:10px 0;
  font-weight:bold;
}

.how-box:hover{transform:translateY(-6px)}

/* ================= CATEGORIES ================= */

.categories{
  text-align:center;
  padding:70px 20px;
  position:relative;
  z-index:1;
}

.cards{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:30px;
}

.card{
  width:200px;
  padding:30px;
  border-radius:16px;
  cursor:pointer;
  transition:.3s;
}

.card i{
  font-size:40px;
  margin-bottom:12px;
}

.card:hover{transform:translateY(-6px)}

.islamic{background:linear-gradient(135deg,#6a11cb,#2575fc)}
.general{background:linear-gradient(135deg,#11998e,#38ef7d)}
.sports{background:linear-gradient(135deg,#f7971e,#ffd200)}

/* ================= STATS ================= */

.stats{
  padding:70px 20px;
  position:relative;
  z-index:1;
}

.heat-title{
  text-align:center;
  color:#FFD700;
}

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

.stat-box{
  background:rgba(0,0,0,.5);
  padding:25px;
  border-radius:14px;
  text-align:center;
  transition:.3s;
}

.stat-box:hover{transform:translateY(-5px)}

footer{
  text-align:center;
  padding:30px;
  z-index:1;
  position:relative;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.menu-toggle{
  display:block;
}

nav{
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.nav-links{
  flex-direction:column;
  gap:18px;
}

#navmenu{
  position:absolute;
  top:70px;
  right:16px;
  left:16px;
  background:#0b1220;
  border-radius:14px;
  padding:18px;
  display:none;
  flex-direction:column;
  gap:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

#navmenu.active{
  display:flex;
}

/* mobile tap instead of hover */

.nav-profile:active .profile-menu{
  display:flex;
}

}
@media (hover:none){
  .nav-links a:active{
    opacity:.6;
  }
}