:root{
  --brand:#0d6efd;
  --soft:#eaf4ff;
  --card:#ffffffdd;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:#0b1220;
  background: linear-gradient(180deg, #f0f8ff 0%, #e6f2ff 50%, #f7fbff 100%);
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;

  /* ✅ Fix: make space for fixed header */
  padding-top:60px; 
}
.container{max-width:1100px;margin:0 auto;padding:20px;}

/* header */
.site-header{position:fixed; top:0; width: 100%; backdrop-filter: blur(6px);z-index:40;background: rgba(255,255,255,0.6);border-bottom:1px solid rgba(0,0,0,0.05)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px}
.brand{font-weight:700;color:var(--brand);}
.nav{display:flex;gap:18px}
.nav a{color:#08306b;text-decoration:none;padding:8px;border-radius:6px;transition:background .2s}
.nav a:hover{background:rgba(13,110,253,0.08)}
.nav-toggle{display:none;background:none;border:0;font-size:24px}


/* hero */
.hero{display:flex;gap:30px;align-items:center;padding:40px 0}
.hero-left{text-align:center;flex:0 0 230px}
.profile{width:180px;height:180px;border-radius:50%;object-fit:cover;border:4px solid white;box-shadow:0 6px 20px rgba(13,110,253,0.12);}
.linkedin{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px}
.linkedin-icon{width:30px;height:30px;border-radius:6px;}

/* hero right */
.hero-right h1{margin-top:0;font-size:1.4rem;color:#073763}
.hero-right p{color:var(--muted)}

/* featured is for skills */
.featured{padding:30px 0}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.work-item{background:var(--card);padding:18px;border-radius:12px;text-align:center;transition:transform .25s,box-shadow .25s}
.work-item img{width:100%;height:260px;object-fit:cover;border-radius:8px;margin-bottom:12px;transition:transform .4s}
.work-item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.08)}
.work-item:hover img{transform:scale(1.05)}

/* project-section is for my work */
.my-work{padding:30px 0}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.project-item{background:var(--card);padding:18px;border-radius:12px;text-align:center;transition:transform .25s,box-shadow .25s}
.project-item img{width:100%;height:260px;object-fit:cover;border-radius:8px;margin-bottom:12px;transition:transform .4s}
.project-item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.08)}
.project-item:hover img{transform:scale(1.05)}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.projects-grid img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Forces perfect square ratio like Skills */
    object-fit: cover;   /* Crops to fit without distortion */
    border-radius: 10px; /* Matches Skills style */
}


/* contact */
.contact{padding:30px 0}
form{background:var(--card);padding:20px;border-radius:10px;max-width:700px}
label{display:block;margin-top:12px;font-weight:600;color:#0b1220}
input[type="text"], input[type="email"], textarea{width:100%;padding:10px;margin-top:6px;border:1px solid #e6eef8;border-radius:8px;background:#fff}
button{margin-top:12px;background:var(--brand);color:white;padding:10px 16px;border:0;border-radius:8px;cursor:pointer}
.form-status{margin-top:10px;color:green;font-weight:600}

/* footer */
.site-footer{padding:20px 0;text-align:center;color:var(--muted)}

/* responsive */
@media(max-width:900px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .hero{flex-direction:column;align-items:center;text-align:center}
}
@media(max-width:600px){
  .work-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:block}

  /* ✅ Mobile fix: adjust padding if header is taller */
  body {
    padding-top:70px;
  } 
}