/* ==================== UPDATED style.css ==================== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Rajdhani', sans-serif; background:#0d0d1a; color:#e0e0e0; line-height:1.6; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
a { color:inherit; text-decoration:none; }

/* ────── LIGHT NAVBAR (new style) ────── */
header {
    background: rgba(255, 255, 255, 0.95);   /* Light background */
    color: #222 !important;                  /* Dark text */
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 15px 0;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);  /* subtle shadow */
    transition: all 0.3s;
}
header .container { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
}
.logo img { height:65px; }

.nav a {
    color: #1a1a1a !important;              /* Dark color for links */
    margin: 0 20px;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    transition: 0.3s;
}
.nav a:hover {
    color: #00eaff !important;              /* Cyan on hover – matches your brand */
}
.nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -6px;
    left: 50%;
    background: #00eaff;
    transition: 0.3s;
    transform: translateX(-50%);
}
.nav a:hover::after { width: 100%; }

/* When user scrolls – make it slightly more solid */
header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* Rest of your existing styles (unchanged) */
.hero { height:100vh; background:linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.85)), url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?q=80&w=2070') center/cover; display:flex; align-items:center; text-align:center; }
.hero h1 { font-family:'Orbitron', sans-serif; font-size:4.8rem; margin-bottom:20px; }
.highlight { color:#00eaff; }
.tagline { font-size:1.5rem; margin-bottom:40px; opacity:0.9; }
.btn { background:#00eaff; color:#000; padding:16px 40px; border-radius:50px; font-weight:700; font-size:1.1rem; transition:0.3s; }
.btn:hover { background:#00ffaa; transform:scale(1.05); }

.section { padding:120px 0; }
h2 { font-family:'Orbitron', sans-serif; font-size:3.2rem; text-align:center; color:#00eaff; margin-bottom:60px; }
.bg-dark { background:#0a0a14; }

.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:30px; }
.card { background:#161622; padding:35px 25px; border-radius:15px; text-align:center; border:1px solid #00eaff30; transition:0.4s; }
.card:hover { transform:translateY(-12px); box-shadow:0 15px 40px rgba(0,234,255,0.15); }
.card h3 { color:#00eaff; margin-bottom:15px; font-size:1.4rem; }

.gallery .project img { width:100%; border-radius:12px; transition:0.3s; }
.gallery .project img:hover { transform:scale(1.04); }

.contact-info p { font-size:1.3rem; margin:20px 0; }
.contact-info a { color:#00eaff; }

form { max-width:700px; margin:50px auto 0; display:grid; gap:18px; }
input, textarea { padding:16px; background:#111118; border:none; border-radius:10px; color:#fff; font-size:1rem; }
input:focus, textarea:focus { outline:2px solid #00eaff; }
.center { text-align:center; }
.max-800 { max-width:800px; margin:0 auto; }

footer { background:#000; padding:30px 0; text-align:center; font-size:0.95rem; }

@media (max-width:768px) {
    .hero h1 { font-size:3rem; }
    .nav { flex-direction:column; gap:12px; padding:10px 0; }
    header .container { flex-direction:column; }
}
.training-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    display: block;
    border-radius: 12px;
    padding: 8px;
    background: rgba(255,255,255,0.1);
    transition: transform 0.3s;
}

.card.training:hover .training-icon {
    transform: scale(1.15);
}