:root{
  --primary:#0d171f;
  --second:#2e0166;
  --bgColor:#bd53d8;
  --textColor:#ffffff;
}

body{
  font-family:'Rajdhani', sans-serif;
  background: #0d171f;
  color: var(--textColor);
  margin: 0;
}

/* Preloader */
#preloader{position:fixed;inset:0;background:#0d1720;display:flex;align-items:center;justify-content:center;z-index:1000}
.spinner{width:50px;height:50px;border:5px solid rgba(255,255,255,.3);border-top:5px solid #fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Header */
.header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-evenly;align-items:center;padding:16px;background:rgba(9,5,53,.36);backdrop-filter:blur(5px);z-index:100}
.icon{font-family:'Orbitron',sans-serif;font-weight:800;font-size:28px;color:#cf2222}
.nav-list{list-style:none;display:flex;gap:20px}
.nav-list a{color:#fff;text-decoration:none}
.nav-list a:hover{color:var(--bgColor)}
.nav-list .active{color:var(--bgColor)}
.hamburger-btn{display:none;background:none;border:0;color:#fff}

/* Hero */
.about-hero{
  height:80vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:url('./assets/hero-bg2.png') center/cover no-repeat;
}
.about-hero .overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.6);
}
.about-hero .hero-content{
  position:relative;z-index:2;max-width:800px;padding:20px;
}
.bang-text{font-family:'Orbitron',sans-serif;font-size:60px;margin-bottom:15px}
.lead{font-size:20px;opacity:0.9}

/* Intro */
.intro{display:flex;justify-content:center;padding:60px 20px}
.intro-box{
  background:rgba(13,23,31,.85);
  border:5px solid rgba(232,187,247,.4);
  border-radius:20px;
  max-width:900px;
  padding:30px;
  text-align:center;
}
.intro-box h2{font-family:'Orbitron',sans-serif;margin-bottom:12px}

/* Cards */
.about-sections{padding:60px 20px}
.section-title{text-align:center;font-size:40px;margin-bottom:40px;font-family:'Orbitron',sans-serif}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;max-width:1100px;margin:auto}
.card{
  background:rgba(13,23,31,.85);
  border:4px solid rgba(232,187,247,.4);
  border-radius:16px;
  padding:24px;
  text-align:center;
  transition:transform 0.3s ease;
}
.card:hover{transform:translateY(-8px)}
.card h3{font-family:'Orbitron',sans-serif;margin-bottom:10px}

/* Footer */
.footer{text-align:center;padding:30px;opacity:0.85}

/* Responsive */
@media(max-width:768px){
  .bang-text{font-size:40px}
  .lead{font-size:18px}
  .intro-box{font-size:16px}
}
@media (max-width: 480px) {
   .nav-list{
    position: absolute;
    top: 55%;left: 0;
   }
}