:root{

--bg:#0b1220;
--card:#112240;
--text:#ffffff;
--accent:#00d4ff;
--header:#081424;

}

.light-mode{

--bg:#f3f5f7;
--card:#ffffff;
--text:#222;
--accent:#0066cc;
--header:#ffffff;

}

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

body{

font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--text);

}

header{

position:fixed;
top:0;
width:100%;
z-index:1000;

background:var(--header);

box-shadow:0 2px 10px rgba(0,0,0,.25);

}

.navbar{

display:flex;
justify-content:space-between;
align-items:center;

max-width:1200px;

margin:auto;

padding:15px 25px;

}

.logo{

font-size:1.4rem;
font-weight:700;
color:var(--accent);

}

.nav-menu{

display:flex;
gap:20px;
align-items:center;

list-style:none;

}

.nav-menu a{

text-decoration:none;
color:var(--text);

}

.theme-btn,
.menu-toggle{

background:none;
border:none;
cursor:pointer;
font-size:1.3rem;
color:var(--text);

}

.menu-toggle{
display:none;
}

.hero{

height:100vh;

display:flex;
justify-content:center;
align-items:center;

text-align:center;
color:yellow;
padding:40px;
background:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.75)),
url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=1600&q=80');
background-size:cover;
background-position:center;
position:relative;

overflow:hidden;

}

.hero-content{

position:relative;
z-index:2;
max-width:800px;

}

.hero h1{

font-size:4rem;
margin-bottom:20px;

}

.hero p{

font-size:1.2rem;
margin-bottom:30px;

}

.btn{

display:inline-block;

padding:15px 30px;

background:var(--accent);
color:#fff;

text-decoration:none;

border-radius:40px;

transition:.3s;

}

.btn:hover{

transform:translateY(-4px);

}

.particles{

position:absolute;
inset:0;

opacity:.15;

background:
radial-gradient(circle,
var(--accent) 1px,
transparent 1px);

background-size:40px 40px;

animation:particlesMove 25s linear infinite;

}

@keyframes particlesMove{

from{
transform:translateY(0);
}

to{
transform:translateY(-500px);
}

}

section{

padding:100px 8%;

}

.section-title{

text-align:center;

font-size:2.5rem;

margin-bottom:50px;

color:var(--accent);

}

.cards{

display:grid;

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

gap:25px;

}

.card{

background:var(--card);

padding:25px;

border-radius:15px;

transition:.3s;

}

.card:hover{

transform:translateY(-8px);

}

.accordion-container{

max-width:900px;
margin:auto;

}

.collapsible{

width:100%;

padding:18px;

border:none;

cursor:pointer;

font-size:1.1rem;

text-align:left;

margin-bottom:10px;

border-radius:10px;

background:var(--card);

color:var(--text);

}

.content{

max-height:0;
overflow:hidden;

transition:max-height .4s ease;

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

border-radius:0 0 10px 10px;

}

.content div{

padding:20px;

}

.contact{

text-align:center;

font-size:1.1rem;

}

.contact p{

margin:10px 0;

}

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade-up.visible{

opacity:1;

transform:translateY(0);

}

footer{

text-align:center;

padding:25px;

background:var(--header);

}

@media(max-width:768px){

.menu-toggle{
display:block;
}

.nav-menu{

position:absolute;

top:100%;
left:0;

width:100%;

background:var(--header);

flex-direction:column;

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}

.nav-menu.active{

max-height:500px;

}

.hero h1{

font-size:2.4rem;

}

.hero p{

font-size:1rem;

}

}