
/* ===== MATRIX LOADER ===== */
#loader{position:fixed;inset:0;background:#02040a;display:grid;place-items:center;z-index:9999;}
#matrix{position:absolute;inset:0;opacity:.5;}

.loader-ui{
  position:relative;width:300px;height:300px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle, rgba(255,43,43,.25), rgba(4,6,10,.95) 60%);
  border:2px solid rgba(255,43,43,.55);
  box-shadow:var(--dangerGlow), inset 0 0 30px rgba(255,43,43,.45);
  animation:pulseCore 2.2s ease-in-out infinite;
}
@keyframes pulseCore{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.loader-ui::before{
  content:"";position:absolute;inset:-18px;border-radius:50%;
  border:2px dashed rgba(0,234,255,.7);animation:ringSpin 8s linear infinite;
}
.loader-ui::after{
  content:"";position:absolute;inset:-34px;border-radius:50%;
  border:2px dotted rgba(255,43,43,.7);animation:ringSpinReverse 14s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes ringSpinReverse{to{transform:rotate(-360deg)}}

.loader-logo{width:120px;filter:drop-shadow(0 0 10px var(--red));margin-bottom: -30px; margin-top: -60px;}
.loader-ui h2{font-size:1.2rem;letter-spacing:2px;color:var(--red);text-shadow:var(--dangerGlow);margin-top: -20px;
margin-bottom: -30px;}
.loader-ui p{font-size:.9rem;color:white;
  word-spacing:2px ;
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
.progress-wrap{width:80%;height:6px;background:#0b1220;border-radius:999px;overflow:hidden;margin-top: -16px;}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--red),var(--cyan));box-shadow:var(--dangerGlow),var(--cyanGlow);}
#progressText{font-size:.7rem;color:#ffffff;margin-top: -30px; letter-spacing: 2px;}

/*===end matrix loader*/

/*====light theme===*/

body[data-theme="light"] .glass-box,
body[data-theme="light"] .feature-card,
body[data-theme="light"] .cta-cyber,
body[data-theme="light"] .glass-terminal{
  background:
  radial-gradient(circle at 20% 20%, rgba(21, 240, 236, 0.25), transparent 40%),
  radial-gradient(circle at 80% 80%, rgba(247, 250, 251, 0.25), transparent 40%),
  linear-gradient(180deg, #d0f3f5, #eaebee);
  border:1px solid rgb(154, 244, 237);
  color:#0a1220;
}


body[data-theme="light"] .btn-hack{
  color:rgb(255, 255, 255);
  border: 1px solid yellow;
  background-color: #02040a;
}
body[data-theme="light"] .btn-hack:hover{
  box-shadow:
    0 0 0 1px rgba(255, 230, 0, .9),     /* crisp edge */
    0 0 12px rgba(255, 230, 0, .7),     /* outer glow */
    0 0 28px rgba(255, 230, 0, .45);    /* soft spread */
  color: rgb(248, 248, 248);
}

body[data-theme="light"] .count{
  color: black;
  opacity: .7;
}

body[data-theme="light"] .cta-cyber h2{
  color: rgb(9, 131, 218);
}
body[data-theme="light"] .feature-card h3{
  color: rgb(9, 131, 218);
}
body[data-theme="light"] .section-title{
  color: rgb(0, 0, 0);
}

/* ===== HERO ===== */
.hero{
  min-height:calc(100vh - 70px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 16px 40px;
}
.hero h1 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    text-shadow:
        0 0 4px #2bdfff,    /* main red glow */
        0 0 10px #2bf1ff50, /* soft outer glow */
        0 0 15px #2bf4ff30; /* very faint outermost glow */
    color: rgb(0, 0, 0);         /* main text color red */
}
.animated-gradient-text{
  background: linear-gradient(90deg, #ff0000, #19dd07, #ff00dd, #ffee00, #00eaff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: textFlow 3s linear infinite;
}

@keyframes textFlow{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.hero p{margin:10px 0 18px;color:var(--dangerGlow);
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 20px;}

/* ===== CTA Glow Hover ===== */
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.btn{
  padding:10px 18px;
  border-radius:6px;
  text-decoration:none;
  letter-spacing:1px;
  font-weight:600;
  transition: box-shadow .2s ease; /* smooth glow */
}

.btn.primary{
  background:linear-gradient(135deg,var(--red),var(--cyan));
  color:#02040a;
  box-shadow:var(--dangerGlow),var(--cyanGlow);
}

.btn.ghost{
  border:1px solid rgba(0,234,255,.5);
  color:var(--cyan);
}

/* 🔥 Yellow outer glow on hover (edges focus) */
.btn.primary:hover,
.btn.ghost:hover{
  box-shadow:
    0 0 0 1px rgba(255, 230, 0, .9),     /* crisp edge */
    0 0 12px rgba(255, 230, 0, .7),     /* outer glow */
    0 0 28px rgba(255, 230, 0, .45);    /* soft spread */
}
/*end index body part hero */


/* ===== SEARCH ===== */
.nav-search {
  width: min(720px, 100%);
  margin: -20px auto 8px;  /* upar bhi aayega, niche thoda space rahega */
}

.nav-search input{
  width:100%;padding:12px 14px;border-radius:6px;
  background:#0b1220;border:1px solid rgba(0,234,255,.5);color:#eaffff;outline:none;
}
body[data-theme="light"] .nav-search input{
  background:#fff;border:1px solid rgba(0,119,255,.4);color:#0a1220;
}
.searchmenu{
  max-height:260px;overflow:auto;margin-top:8px;background:#050a14;
  border:1px solid rgba(246, 130, 130, 0.589);border-radius:8px;display:none;
}
body[data-theme="light"] .searchmenu{
  background:#fff;border:1px solid rgba(0,119,255,.3);
}
.searchmenu li a{display:block;padding:8px 12px;color:#cfefff;text-decoration:none;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
body[data-theme="light"] .searchmenu li a{color:#0a1220;}
.searchmenu li a:hover{background:linear-gradient(90deg, rgba(255,43,43,.25), rgba(0,234,255,.15));}



/* ===== MOBILE hero ===== */
@media(max-width:1024px){
  .hero{padding:70px 14px 40px;}
  .hero h1{font-size:clamp(1.4rem,4.5vw,2.2rem);}
}


@media(max-width:768px){
  .cta .btn{width:100%;max-width:260px;}
  .paragrafbox{grid-template-columns:1fr 1fr;gap:14px;}
}



@media(max-width:480px){
  .paragrafbox{grid-template-columns:1fr;}
}




/* ===== All Course Toolkit - Terminal Glass Look ===== */

.toolkit-wrap{
  width:100%;
  max-width:560px;
  margin:40px auto;
  padding:16px;
}

.glass-terminal{
  background:linear-gradient(180deg, rgba(34, 1, 1, 0.95), rgba(0, 3, 14, 0.95));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius:18px;
  box-shadow: 0 0 12px rgb(162, 183, 185);
  border:1px solid rgb(0, 0, 0);
  overflow:hidden;

}

/* Header bar (mac style dots) */
.terminal-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-bottom:1px solid rgb(0, 0, 0);
}

.terminal-header .dot{
  width:12px;height:12px;border-radius:50%;
  box-shadow:0 0 6px rgba(0,0,0,.6) inset;
}
.terminal-header .red{background:#ff5f56;}
.terminal-header .yellow{background:#ffbd2e;}
.terminal-header .green{background:#27c93f;}

.path{
  color:#9fb3ff;
  font-size:13px;
  letter-spacing:.2px;
}

/* Heading */
.toolkit-title{
  margin:12px 14px 0;
  color:#00eaff;
  font-weight:700;
  letter-spacing:.6px;
  text-shadow:0 0 10px rgba(0,234,255,.35);
}


/* Terminal body */
.terminal-body{
  padding: 18px;
  text-align: center;
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  font-size:15px;
  line-height:1.7;
  color:#cbd5f5; 
  
}

/* Command highlight */
.cmd{
  font-size: 16px;
  color:#20566a;
  text-shadow:0 0 8px rgba(0,234,255,.35);
}

/* Folder colors (neon cyber vibe) */
.dir{ font-weight:600;}
.recon{ color:#11a8f4; }      /* violet */
.scan{ color:#22c55e; }       /* green */
.exploit{ color:#ef4444; }    /* red */
.web{ color:#f59e0b; }        /* amber */
.wifi{ color:#f212c9; }       /* sky blue */


.dir .recon .scan .exploit .web .wifi{
  float: left;
}
.count{
  float:right;
  color:#bdbdbd;
  opacity:.9;
}

/* Status lines */
.loading{
  color:#facc15;
  text-shadow:0 0 8px rgba(250,204,21,.25);
}
.success{
  color:#22c55e;
  text-shadow:0 0 8px rgba(34,197,94,.35);
}

/* CTA Button */
.toolkit-cta{
  text-align:center;
  margin-top:16px;
}

.btn-hack{
  display:inline-block;
  padding:12px 22px;
  border-radius:10px;
  color:#000000;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.3px;
  background:linear-gradient(135deg,var(--red),var(--cyan));
}

.btn-hack:hover{
  box-shadow:
    0 0 0 1px rgba(255, 230, 0, .9),     /* crisp edge */
    0 0 12px rgba(255, 230, 0, .7),     /* outer glow */
    0 0 28px rgba(255, 230, 0, .45);    /* soft spread */
}

/* Mobile Responsive */
@media (max-width:480px){
  .toolkit-wrap{ padding:10px; }
  .terminal-body{ font-size:13px; 
  padding-right: 10px;}
  .toolkit-title{ font-size:16px; }
  
.loader-ui{
  position:relative;width:240px;height:240px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  
}
.loader-logo{width:80px;filter:drop-shadow(0 0 10px var(--red));
  margin-top: 2px;
}
.loader-ui h2{font-size:.9rem;letter-spacing:2px;color:var(--red);text-shadow:var(--dangerGlow);
margin-top: -10px;}
.loader-ui p{font-size:.7rem;}
.progress-wrap{width:70%;overflow:hidden;margin:8px auto 4px;}
#progressText{font-size:.7rem;}

}
  
/*===all course toolkit===*/




/* Main Heading */
h6 {
    font-family: 'Orbitron','Share Tech Mono',monospace;
    text-align: center;
    margin: 40px 0;
    font-size: 28px;
    color: #e50909;
}

/* Card Container */
.card-contain {
    font-family: 'Orbitron','Share Tech Mono',monospace ;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 10px;
}



/* ===== FEATURES SECTION ===== */
.features{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:64px 16px 32px;
}

.section-title{
  text-align:center;
  font-size:clamp(20px,4.5vw,28px);
  margin-bottom:24px;
  color:#eafcff;
  letter-spacing:1px;
  text-shadow:0 0 12px rgba(0,234,255,.6);
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.feature-card{
  position:relative;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,43,43,.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0,234,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(10,15,36,.95), rgba(2,4,10,.98));
  border:0.5px solid rgb(30, 36, 50);
  border-radius:16px;
  padding:22px 18px;
  text-align:center;
  transition:.25s ease;
  overflow:hidden;
  box-shadow: 0 0 12px rgb(162, 183, 185);
}

.feature-card i{
  font-size:26px;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(0,234,255,.8);
  margin-bottom:10px;
}

.feature-card h3{
  font-size:17px;
  margin:8px 0 6px;
  color:#eafcff;
  letter-spacing:.5px;
}

.feature-card p{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:15.5px;
  line-height:1.6;
  color:var(--muted);
}

.feature-card:hover{
  transform:translateY(-6px) scale(1.01);
  border-color:rgb(255, 251, 0);
   box-shadow:
    0 0 0 1px rgba(255, 230, 0, .9),     /* crisp edge */
    0 0 12px rgba(255, 230, 0, .7),     /* outer glow */
    0 0 28px rgba(255, 230, 0, .45);    /* soft spread */
}


/* ===== CTA CYBER ===== */
.cta-cyber{
  max-width:1100px;
  margin:56px auto 0;
  padding:36px 18px;
  border-radius:20px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,43,43,.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0,234,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(10,15,36,.95), rgba(2,4,10,.98));
    box-shadow:0 12px 20px rgb(108, 2, 2);
}

.cta-cyber h2{
  font-size:clamp(18px,4.5vw,26px);
  margin-bottom:6px;
  color:#eafcff;
  
}

.cta-cyber p{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:15px;
  color:var(--muted);
  margin-bottom:16px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px){
  .feature-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width: 560px){
  .feature-grid{
    grid-template-columns:1fr;
  }

  .features{
    padding-top:40px;
  }

  .feature-card{
    padding:18px 14px;
  }
}





