/* ========= assets/css/style.css ========= */

/* ---- Reset & base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
  line-height: 1.75;
  color: #0f1724;
  background: linear-gradient(180deg,#0f1724 0%, #071025 6%, #071725 50%, #071725 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom: 40px;
}

/* ---- layout container ---- */
.container {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Header ---- */
.site-header {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
  z-index: 999;
}
.header-flex {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 0;
  min-height: 120px:
}
.full-logo {
  text-align: center;     /* बीच में लाने के लिए */
  margin: 10px 0;         /* ऊपर-नीचे थोड़ा space */
}

.full-logo img {
  width: 100%;          /* पूरे area में फैले */
  height: 100%;        /* अपनी जरूरत के हिसाब से adjust कर सकते हो */
  object-fit: contain;    /* image stretch न हो, nicely crop होकर fit हो */
  display: block;       /* नीचे extra space हटाने के लिए */
}
/* navbar */
.navbar ul {
  list-style: none;
  display:flex;
  gap:14px;
  align-items:center;
}
.navbar a {
  color: #cbd5e1;
  text-decoration:none;
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
  transition: all .18s ease;
}
.navbar a:hover { background: rgba(255,255,255,0.03); color: #fff; transform: translateY(-1px); }
.navbar a.active { background: linear-gradient(90deg,#7c3aed,#06b6d4); color: #fff; box-shadow: 0 6px 18px rgba(124,58,237,0.12); }

/* ---- Hero ---- */
.hero {
  padding: 72px 0 46px;
  background-image: radial-gradient( at 10% 10%, rgba(124,58,237,0.08), transparent 8%),
                    radial-gradient( at 90% 70%, rgba(6,182,212,0.06), transparent 12%);
  text-align:center;
}
.hero-content h2 {
  font-size: 2.2rem;
  line-height:1.05;
  color: #e6eef8;
  margin-bottom:10px;
  text-shadow: 0 6px 28px rgba(2,6,23,0.6);
}
.hero-content p {
  color: #cbd5e1;
  max-width: 920px;
  margin: 10px auto 18px;
  font-size: 1.02rem;
}

/* hero buttons */
.hero-buttons { display:inline-flex; gap:12px; margin-top:12px; }
.btn {
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn.primary {
  background: linear-gradient(90deg,#06b6d4,#7c3aed);
  color: #fff;
  box-shadow: 0 10px 30px rgba(7,89,133,0.12);
}
.btn.secondary {
  background: rgba(255,255,255,0.06);
  color: #e6eef8;
  border: 1px solid rgba(255,255,255,0.04);
}
.btn:hover { transform: translateY(-4px); }

/* 👇 नया Gradient Learn Button */
.learn-btn {
  background: linear-gradient(90deg,#06b6d4,#7c3aed);
  color: #fff !important;
  font-weight: 600;
  transition: all 0.25s ease;
}
.learn-btn:hover {
  background: linear-gradient(90deg,#7c3aed,#06b6d4);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(124,58,237,0.25);
}

/* ---- Topics Section ---- */
.topics { padding: 36px 0; }
.section-title {
  color: #f8fafc;
  font-size: 1.35rem;
  margin-bottom: 8px;
}
.section-intro { color: #cbd5e1; margin-bottom:18px; max-width:850px; }

/* topic grid */
.topic-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}
.topic-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  padding:20px;
  border-radius:12px;
  box-shadow: 0 6px 26px rgba(2,6,23,0.45);
  min-height:160px;
  position: relative;
  overflow: hidden;
}
.topic-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45); /* overlay */
  z-index: 0;
}
.topic-card h3,
.topic-card p,
.topic-card .btn {
  position: relative;
  z-index: 1;
}
.topic-card h3 { color: #e6eef8; font-size:1.05rem; margin-bottom:8px; }
.topic-card p { color: #cbd5e1; margin-bottom:12px; font-size:0.95rem; }
.btn.small { padding:8px 12px; font-size:0.9rem; }

/* ---- Roadmap ---- */
.roadmap { padding: 28px 0; }
.roadmap-box {
  background: linear-gradient(180deg,#071725,#0b1630);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(124,58,237,0.06);
  color: #dbeafe;
  box-shadow: 0 8px 40px rgba(2,6,23,0.6);
}
.roadmap-box h3 { color:#fff; margin-top:12px; }
.roadmap-box ul { margin-left:18px; margin-top:8px; color:#cbd5e1; }

/* ---- Revenue ---- */
.revenue { padding: 28px 0; }
.revenue-list { list-style:none; display:grid; gap:10px; margin-top:12px; color:#cbd5e1; }
.revenue-list li { background: rgba(255,255,255,0.02); padding:10px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.02); }

/* ---- Projects ---- */
.projects { padding: 28px 0; }
.project-list {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-top:12px;
}
.project-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:10px;
  padding:12px;
  color:#cbd5e1;
  text-align:center;
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: 0 6px 20px rgba(2,6,23,0.45);
}

/* ---- FAQ ---- */
.faq { padding: 28px 0; }
.faq-item { background: rgba(255,255,255,0.02); padding:14px; border-radius:10px; margin-bottom:10px; color:#cbd5e1; border:1px solid rgba(255,255,255,0.02); }
.faq-item h3 { color:#fff; font-size:1rem; margin-bottom:6px; }

/* ---- Footer ---- */
.site-footer {
  margin-top:28px;
  padding: 26px 0;
  background: linear-gradient(180deg,#071725,#04101b);
  color: #9fb0c9;
  border-top: 1px solid rgba(255,255,255,0.02);
}
.footer-flex { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.site-footer nav a { color:#9fb0c9; margin-left:8px; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .header-flex { flex-direction:column; gap:10px; align-items:flex-start; padding-bottom:6px; }
  .hero-content h2 { font-size:1.8rem; }
  .topic-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .footer-flex { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 520px) {
  .hero { padding:40px 0 30px; }
  .hero-content p { font-size:0.95rem; }
  .navbar ul { flex-wrap:wrap; gap:8px; }
  .container { width:94%; }
}

/* ==== Topic Cards Background Images ==== */
.website-dev {
  background: url("../images/website.jpg") no-repeat center center/cover;
  color: #fff;
}
.app-dev {
  background: url("../images/app.jpg") no-repeat center center/cover;
  color: #fff;
}
.game-dev {
  background: url("../images/game.jpg") no-repeat center center/cover;
  color: #fff;
}
.more-learning {
  background: url("../images/more.jpg") no-repeat center center/cover;
  color: #fff;
/* === Banner Image under "Developed by Yash" === */
.full-logo {
  display: none; /* ऊपर वाला लोगो छुपाने के लिए */
}

.site-header {
  background: url("assets/images/logo.png") no-repeat center center/cover;
  min-height: 200px; /* Banner की height, ज़रूरत के हिसाब से बढ़ा सकते हो */
  margin-bottom: 20px; /* नीचे space देने के लिए */
}
}