:root {
  --deep: #0d3b66;
  --sky: #9fddff;
  --bg: #ffffff;
  --text: #1b263b;
}

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
img { max-width:100%; display:block; }

/* Body */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}

/* Navbar */
.navbar {
  position: fixed; inset: 0 0 auto 0;
  height: 64px;
  background: var(--deep);
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 1rem;
  z-index:1000;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.logo { font-weight:700; letter-spacing:.3px; color: var(--sky); }
.hamburger { display:flex; flex-direction:column; gap:6px; background:transparent; border:0; cursor:pointer; padding:.25rem; outline:none; }
.hamburger span { width:28px; height:3px; background:#fff; border-radius:2px; transition:.3s; }
.nav-links { list-style:none; position:absolute; right:1rem; top:64px; background: var(--deep); border-radius:10px; overflow:hidden; max-height:0; transition:max-height .35s ease; width:240px; }
.nav-links li { border-bottom:1px solid rgba(255,255,255,.18); }
.nav-links li:last-child { border-bottom:0; }
.nav-links a { display:block; padding:.95rem 1rem; text-decoration:none; color:#fff; font-weight:500; transition: background .25s, color .25s; }
.nav-links a:hover { background: var(--sky); color: var(--deep); }
.nav-links.active { max-height:500px; }
.hamburger.active span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* Hero */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 1.25rem; background: radial-gradient(1200px 600px at 80% -10%, rgba(159,221,255,.35), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(159,221,255,.22), transparent 55%), var(--bg); }
.hero-inner { margin-top:64px; max-width:900px; }
.hero-inner h1, .hero-inner p { margin-bottom:0.5rem; }
.slide-in{ opacity:0; transform:translateY(28px); animation: slideIn .9s ease-out forwards; }
.slide-in.delay { animation-delay:.2s; }
.slide-in.delay-2 { animation-delay:.4s; }
@keyframes slideIn { to { opacity:1; transform:translateY(0); } }
.hero h1{ font-size: clamp(2rem,4vw,3rem); line-height:1.15; color:var(--deep); }
.hero h1 span{ color: var(--deep); background: linear-gradient(transparent 60%, var(--sky) 60%); }
.hero p{ font-size: clamp(1rem,2.5vw,1.25rem); color:#334; }
.btn { display:inline-block; text-decoration:none; font-weight:600; background: var(--sky); color: var(--deep); padding: .8rem 1.2rem; border-radius:10px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; box-shadow:0 10px 22px rgba(13,59,102,.15); }
.btn:hover{ transform: translateY(-2px); background:#eafeff }

/* About */
.about { display:flex; flex-wrap:wrap; align-items:center; gap:2rem; padding:4rem 1.25rem; max-width:1000px; margin:auto; text-align:center; }
.about-img img { 
  width:250px; 
  height:250px; 
  border-radius:50%; 
  object-fit:cover; 
  object-position:50% 20%; 
  box-shadow:0 8px 25px rgba(0,0,0,0.3); 
  animation: zoomInOut 18s ease-in-out infinite; 
}
@keyframes zoomInOut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.about-text { flex:1; min-width:300px; text-align:left; }
.about-text h2 { font-size:2rem; color:var(--deep); margin-bottom:1rem; }
.about-text p { font-size:1.1rem; color:#444; line-height:1.6; margin-bottom:.8rem; }
.sdg-badge { background:var(--sky); padding:.2rem .5rem; border-radius:4px; font-weight:600; }

/* Vision */
.vision { padding:4rem 1.25rem; max-width:800px; margin:auto; text-align:center; }
.vision h2{ font-size:2rem; color:var(--deep); margin-bottom:1rem; }
.vision p{ font-size:1.1rem; color:#444; line-height:1.6; }

/* Skills */
.skills { padding:4rem 1.25rem; max-width:800px; margin:auto; text-align:center; }
.skills h2 { font-size:2rem; color:var(--deep); margin-bottom:1rem; }
.skill-bars { display:flex; flex-direction:column; gap:1rem; }
.skill { display:flex; flex-direction:column; gap:.25rem; }
.skill-title { display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--deep); font-size:1.1rem; }
.bar { width:100%; height:12px; background:#ddd; border-radius:8px; overflow:hidden; }
.fill { height:100%; background:var(--sky); border-radius:8px; transition: width 1s ease-in-out; }
.skill:hover .fill { width:100%; }

/* Projects */
.projects { padding:4rem 1.25rem; max-width:1000px; margin:auto; text-align:center; }
.projects h2 { font-size:2rem; color:var(--deep); margin-bottom:2rem; }
.project-cards { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.card { background:#f9f9f9; padding:1.5rem; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.1); flex:1 1 250px; text-align:left; transition: transform .3s ease, box-shadow .3s ease; }
.card:hover { transform: translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,.2); }
.card h3 { font-size:1.25rem; margin-bottom:.5rem; color:var(--deep); }
.card p { color:#444; line-height:1.4; }

/* Contact */
.contact { padding:4rem 1.25rem; max-width:600px; margin:auto; text-align:center; }
.contact h2 { font-size:2rem; color:var(--deep); margin-bottom:1rem; }
.contact form { display:flex; flex-direction:column; gap:1rem; }
.contact input, .contact textarea { padding:.75rem 1rem; border-radius:6px; border:1px solid #ccc; font-size:1rem; }
.contact button { padding:.75rem 1rem; border-radius:6px; border:none; font-weight:600; background:var(--sky); color:var(--deep); cursor:pointer; transition: background .25s ease; }
.contact button:hover { background:#eafeff; }