/* ==========================
   WANDILECODES STYLE.CSS
   PART 1
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#050816;
    color:white;
    overflow-x:hidden;
}

/* Scrollbar */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#09111d;
}

::-webkit-scrollbar-thumb{
    background:#00cfff;
    border-radius:20px;
}

/* Background */

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at 20% 20%,rgba(0,255,255,.15),transparent 30%),
    radial-gradient(circle at 80% 80%,rgba(0,132,255,.18),transparent 30%),
    linear-gradient(#050816,#081424,#050816);
    z-index:-5;
}

/* Animated Grid */

body::after{
    content:"";
    position:fixed;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:50px 50px;
    animation:gridMove 15s linear infinite;
    z-index:-4;
}

@keyframes gridMove{

0%{
transform:translateY(0);
}

100%{
transform:translateY(50px);
}

}

/* Header */

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 50px;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(3,12,25,.85);

backdrop-filter:blur(12px);

z-index:1000;

box-shadow:0 0 15px rgba(0,255,255,.2);

}

.logo{

font-size:30px;

font-weight:bold;

letter-spacing:2px;

color:#00d9ff;

text-shadow:0 0 15px cyan;

}

nav{

display:flex;

gap:25px;

}

nav a{

text-decoration:none;

color:white;

font-weight:bold;

transition:.3s;

}

nav a:hover{

color:#00d9ff;

text-shadow:0 0 10px cyan;

}

/* Hero */

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

text-align:center;

padding:30px;

}

.hero h1{

font-size:90px;

color:#00d9ff;

text-shadow:

0 0 15px cyan,

0 0 40px cyan,

0 0 70px cyan;

animation:glow 2s infinite alternate;

}

@keyframes glow{

from{

text-shadow:

0 0 10px cyan;

}

to{

text-shadow:

0 0 25px cyan,

0 0 50px #00d9ff,

0 0 80px #0088ff;

}

}

.hero p{

margin-top:25px;

font-size:26px;

color:#ddd;

max-width:850px;

line-height:1.8;

}

.hero .buttons{

margin-top:45px;

display:flex;

gap:20px;

flex-wrap:wrap;

justify-content:center;

}

/* Buttons */

.btn{

padding:18px 40px;

border:none;

border-radius:50px;

font-size:18px;

cursor:pointer;

font-weight:bold;

transition:.4s;

background:#00d9ff;

color:#000;

}

.btn:hover{

transform:translateY(-5px) scale(1.05);

box-shadow:

0 0 15px cyan,

0 0 35px cyan;

}

.btn-outline{

background:transparent;

border:2px solid #00d9ff;

color:white;

}

.btn-outline:hover{

background:#00d9ff;

color:black;

}

/* Sections */

section{

padding:120px 10%;

}

.section-title{

font-size:45px;

margin-bottom:20px;

color:#00d9ff;

text-align:center;

}

.section-text{

font-size:18px;

line-height:1.9;

max-width:900px;

margin:auto;

text-align:center;

color:#ddd;

}

/* Cards */

.card-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:50px;

}

.card{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

padding:30px;

border-radius:20px;

transition:.4s;

backdrop-filter:blur(12px);

}

.card:hover{

transform:translateY(-10px);

box-shadow:

0 0 20px rgba(0,255,255,.35);

}

.card h3{

color:#00d9ff;

margin-bottom:15px;

}

.card p{

line-height:1.8;

color:#ddd;

}

/* Floating Animation */

.float{

animation:float 6s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* Fade In */

.fade{

opacity:0;

transform:translateY(40px);

animation:fadeIn 1s forwards;

}

@keyframes fadeIn{

to{

opacity:1;

transform:translateY(0);

}

}

/* Footer */

footer{

padding:40px;

text-align:center;

background:#040b16;

color:#aaa;

margin-top:100px;

border-top:1px solid rgba(255,255,255,.08);

}