*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:#000;color:#fff;font-weight:700;text-transform:uppercase;overflow-x:hidden}
a{color:inherit;text-decoration:none;white-space:nowrap}

/* HEADER */
header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;position:sticky;top:0;z-index:50;background:rgba(0,0,0,0.35);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;margin-left:4px;transition:all 0.25s ease;cursor:pointer}
.brand:hover{transform:scale(1.05)}
.logo-img{width:58px;height:58px;border-radius:50%;object-fit:cover}
.site-title{font-size:1.4rem;font-weight:900}

/* NAV */
.main-nav{display:flex;align-items:center;gap:10px;position:relative;flex-shrink:0}

/* ALL COURSES button */
.all-course{
  display:inline-block;
  padding:8px 14px;
  border-radius:8px;
  background:linear-gradient(90deg,#de2b2b,#b71c1c);
  color:#fff;
  font-weight:900;
  font-size:0.9rem;
  transition:all 0.25s ease;
  white-space:nowrap;
  cursor:pointer;
}
.all-course:hover{
  transform:scale(1.05);
  box-shadow:0 0 10px rgba(222,43,43,0.4);
}

.nav-links{display:flex;align-items:center;gap:10px}
.nav-links a{display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);padding:8px 14px;font-size:0.9rem;font-weight:900;transition:all 0.25s ease;cursor:pointer}
.nav-links a:has(.nav-icon){padding:4px}
.nav-links a:hover{background:rgba(255,255,255,0.08);transform:scale(1.05)}
.nav-icon{width:36px;height:36px;object-fit:contain}
.hamburger{display:none;background:none;border:none;font-size:1.6rem;color:#fff;cursor:pointer;padding:4px}
.dropdown{display:none;position:absolute;right:0;top:56px;background:rgba(0,0,0,0.9);padding:8px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.6);min-width:180px}
.dropdown a{display:flex;align-items:center;gap:6px;padding:10px 12px;color:#fff;margin:4px 0;border-radius:6px}
.dropdown a:hover{background:rgba(255,255,255,0.03)}

/* HERO + wallpaper */
.hero-bg{position:relative;min-height:100vh;width:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:calc(20vh - 80px);overflow:hidden}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:var(--bg-image,url('learn-trading-online-for-beginners-in-hindi.webp'));background-size:cover;background-position:center center;transform:scale(var(--bg-scale,1));transition:transform .25s linear,background-image .25s linear;filter:brightness(0.35);z-index:0}
.hero-content{position:relative;z-index:2;text-align:center;padding:10px;max-width:980px}
.hero-content h1{font-size:1.3rem;line-height:1.35;margin-bottom:32px;text-transform:uppercase}

/* NEW HERO ALL COURSES BUTTON */
.hero-all-courses-btn{
  display:inline-block;
  padding:14px 32px;
  border-radius:12px;
  background:linear-gradient(90deg,#de2b2b,#b71c1c);
  color:#fff;
  font-weight:900;
  font-size:1.1rem;
  transition:all 0.25s ease;
  cursor:pointer;
  margin-bottom:36px;
  box-shadow:0 4px 15px rgba(222,43,43,0.3);
}
.hero-all-courses-btn:hover{
  transform:scale(1.05);
  box-shadow:0 6px 20px rgba(222,43,43,0.5);
}
.hero-all-courses-btn:active{
  transform:scale(0.98);
}

.hero-subtext{font-size:0.95rem;line-height:1.5;margin-bottom:28px;font-weight:700;color:rgba(255,255,255,0.95)}
.hero-cta-title{font-size:1.05rem;margin-bottom:24px;font-weight:900;color:#fff}
.primary-btn{display:inline-block;padding:12px 22px;border-radius:12px;background:linear-gradient(90deg,#de2b2b,#b71c1c);color:#fff;font-weight:900;text-transform:uppercase;border:none;cursor:pointer;transition:all 0.25s ease}
.primary-btn:hover{transform:scale(1.05);box-shadow:0 0 10px rgba(222,43,43,0.4)}

/* CTA Buttons section */
.actions{padding:20px 16px 40px;text-align:center}
.action-buttons{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.cta{padding:16px 22px;border-radius:12px;background:linear-gradient(90deg,#de2b2b,#b71c1c);color:#fff;font-weight:900;min-width:240px;text-align:center;transition:all 0.25s ease;cursor:pointer}
.cta:hover{transform:scale(1.05);box-shadow:0 0 10px rgba(222,43,43,0.4)}
.cta.mid{transform:translateY(-2px)}
.cta.mid:hover{transform:translateY(-2px) scale(1.05)}

/* Footer */
footer{text-align:center;padding:16px;color:rgba(255,255,255,0.8);font-weight:700}

/* Responsive */
@media(max-width:900px){
  header{padding:10px 12px}
  .brand{margin-left:0}
  .logo-img{width:52px;height:52px}
  .nav-links{display:none}
  .hamburger{display:block}

  /* Keep ALL COURSES inline next to hamburger */
  .main-nav{display:flex;align-items:center;gap:8px}
  .all-course{
    padding:8px 12px;
    font-size:0.85rem;
    border-radius:20px;
    background:linear-gradient(90deg,#ff3b3b,#b71c1c);
    box-shadow:0 0 10px rgba(222,43,43,0.3);
  }
  .all-course:hover{transform:scale(1.05)}
  .all-course:active{transform:scale(0.98)}

  .hero-all-courses-btn{
    padding:12px 28px;
    font-size:1rem;
    margin-bottom:28px;
  }

  .cta{width:92%}
  .cta:hover{transform:scale(1.05);box-shadow:0 0 10px rgba(222,43,43,0.4)}
  .cta:active{transform:scale(0.98)}
  .cta.mid:hover{transform:translateY(-2px) scale(1.05)}
  .cta.mid:active{transform:translateY(-2px) scale(0.98)}
  .hero-bg{padding-top:calc(15vh - 70px)}
}

@media(max-width:480px){
  .site-title{font-size:1.1rem}
  .all-course{
    padding:8px 10px;
    font-size:0.8rem;
  }
  .hero-all-courses-btn{
    padding:10px 24px;
    font-size:0.95rem;
    margin-bottom:24px;
  }
  .hero-bg{padding-top:calc(12vh - 60px)}
}