/* Cyber Website Main Style */

body{
margin:0;
font-family:Arial;
background:black;
color:#00ff9d;
text-align:center;
}

/* Header */

header{
background:#111;
padding:20px;
}
header{

background:#000;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;

box-shadow:
0 0 5px #00ff9d,
0 0 20px #00ff9d;

}

nav a{

color:#00ff9d;
margin:15px;
text-decoration:none;
font-weight:bold;
transition:0.3s;

}
.btn{
background:#00ff9d;
color:black;
padding:12px 25px;
text-decoration:none;
border-radius:5px;
display:inline-block;   /* important */
margin-top:20px;        /* 👉 ye gap dega */
}

nav a:hover{

text-shadow:
0 0 5px #00ff9d,
0 0 20px #00ff9d,
0 0 40px #00ff9d;

}

nav a{
color:#00ff9d;
margin:10px;
text-decoration:none;
}

/* Hero Section */


.hero{
position:relative;
display:flex;
justify-content:center;
align-items:center;
height:350px;
}

.hero-box{
background:#000;
padding:40px 60px;
border-radius:10px;
box-shadow:0 0 20px #00ff9d;
z-index:2;
text-align:center;
}

/* Cards Section */

.cards{
padding:40px;
}

.card{
display:block;
text-decoration:none;
color:#00ff9d;
background:#111;
padding:20px;
border-radius:10px;
transition:0.3s;
}

.card:hover{
transform:scale(1.05);
box-shadow:0 0 10px #00ff9d;
}

/* Footer */

footer{
background:#111;
padding:20px;
margin-top:40px;
}

/* Matrix Background */

#matrix{
position:absolute;
top:0;
left:0;
width:100%;
height:600px;
z-index:0;
background:black;
}

/* Loader Screen */

#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
display:flex;
justify-content:center;
align-items:center;
color:#00ff9d;
font-size:30px;
z-index:9999;
}