:root{
  --bg:#0b0f0d;
  --panel:#0f1412;
  --panel-2:#0b1713;
  --text:#e6f6ef;
  --muted:#b3d6c9;
  --border:rgba(255,255,255,.08);
  --white: #fff;

  /* greens */
  --green-200:#a7f3d0;
  --green-300:#6ee7b7;
  --green-400:#34d399;
  --green-500:#10b981;
  --green-600:#059669;
  --green-700:#047857;
  --green-800:#065f46;

  --radius:20px;
  --shadow:0 12px 40px -16px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92%);margin-inline:auto}
.row{display:flex;align-items:center;gap:16px}
.row.between{justify-content:space-between}
.row.gap{gap:10px}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.section{padding:72px 0}
.title{font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight:700}
.text{color:var(--muted)}

/* Decorative backgrounds */
.bg-grid{
  position:fixed;inset:0;z-index:-3;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image: radial-gradient(circle at 50% 20%, #000 30%, transparent 70%);
}
.bg-gradients{
  position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(800px 400px at 80% 30%, rgba(5,150,105,.18), transparent 60%),
    radial-gradient(800px 400px at 50% 90%, rgba(4,120,87,.18), transparent 60%);
  filter:saturate(120%);
}
.bg-stars{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 20px 20px, rgba(255,255,255,.2), transparent 40%),
    radial-gradient(2px 2px at 80% 30%, rgba(255,255,255,.14), transparent 40%),
    radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.14), transparent 40%);
  background-repeat:repeat;
}
.bg-ornament{
  position:fixed;inset:auto -20% -20% auto;width:min(40vw,560px);z-index:-2;opacity:.7;
  filter: blur(1px) drop-shadow(0 10px 30px rgba(0,0,0,.4));
}

/* Header */
.skip{position:absolute left:-999px;top:auto;overflow:hidden}
.skip:focus{left:16px;top:16px;background:#000;color:#fff;padding:8px 12px;border-radius:8px}
.header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--border);
  background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.35));
  backdrop-filter: blur(10px);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-icon{font-size:20px;color:var(--green-400)}
.brand-name{letter-spacing:.3px}
.menu{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.menu a{opacity:.9}
.menu a:hover{color:var(--green-300)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:14px;border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:var(--shadow);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.24)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(180deg, var(--green-600), var(--green-700));border-color:transparent;color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-light{background:#fff;color:#111}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.2)}
.btn.sm{padding:8px 12px;border-radius:10px}

/* Nav toggle (mobile) */
.nav-toggle{display:none;position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after{content:"";position:absolute;left:10px;right:10px;height:2px;background:var(--white);transition:transform .25s ease,opacity .25s ease}
.nav-toggle span{top:19px}
.nav-toggle::before{top:12px}
.nav-toggle::after{top:26px}
.nav-toggle[aria-expanded="true"]::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(-7px) rotate(-45deg)}
.nav-toggle[aria-expanded="true"] span{opacity:0}
@media (max-width: 900px){
  .menu{position:fixed;inset:64px 16px auto 16px;flex-direction:column;padding:16px;border:1px solid var(--border);border-radius:16px;background:rgba(17,24,21,.9);backdrop-filter: blur(8px);transform:translateY(-10px);opacity:0;pointer-events:none;transition:.2s ease}
  .menu.show{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-toggle{display:inline-block}
}

/* Hero */
.hero{padding-top:96px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(16,185,129,.35);background:rgba(16,185,129,.08);color:#d2fff0;font-size:.9rem}
.pill .dot{width:8px;height:8px;border-radius:999px;background:var(--green-400);box-shadow:0 0 12px var(--green-400)}
.headline{font-family:"Space Grotesk", system-ui;font-size:clamp(2rem, 1.3rem + 2.2vw, 3.2rem);line-height:1.15;margin:10px 0 8px}
.accent{color:var(--green-300)}
.muted{color:var(--muted)}
.lead{color:var(--muted);font-size:1.05rem;max-width:55ch}
.card{position:relative;border-radius:22px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));overflow:hidden;box-shadow:var(--shadow)}
.portrait{aspect-ratio:4/3;background:
  radial-gradient(200px 120px at 30% 30%, rgba(16,185,129,.25), transparent 60%),
  linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
  url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 800 600\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"%23059\"/><stop offset=\"1\" stop-color=\"%23047\"/></linearGradient></defs><rect width=\"800\" height=\"600\" fill=\"url(%23g)\"/></svg>');
  background-size:cover;border-bottom:1px solid var(--border)}
.card-glow{position:absolute;inset:-40% -40% auto -40%;height:120%;background:radial-gradient(500px 200px at 50% 0%, rgba(16,185,129,.25), transparent 70%);pointer-events:none}

/* Glass panel */
.glass{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));backdrop-filter: blur(8px)}
.stat{background:rgba(255,255,255,.02);border:1px solid var(--border);padding:16px;border-radius:16px}
.label{font-size:.9rem;color:var(--muted)}
.value{font-weight:700}

/* Skills */
.skills-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px}
@media (max-width: 900px){ .skills-grid{grid-template-columns:1fr} }
.skill{border:1px solid var(--border);border-radius:16px;padding:20px;background:var(--panel)}
.skill h3{margin:0 0 8px 0}
.skill ul{margin:0 0 12px 16px;color:var(--muted)}
.progress{height:10px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg, var(--green-600), var(--green-400));width:var(--p);transform-origin:left;animation:grow 1.2s ease forwards}
@keyframes grow{from{width:0}to{width:var(--p)}}

/* Projects */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);cursor:pointer}
.chip.active,.chip:hover{border-color:rgba(255,255,255,.24)}
.projects-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;margin-top:16px}
@media (max-width:1100px){.projects-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:700px){.projects-grid{grid-template-columns:1fr}}
.project{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--panel-2);position:relative;transition:transform .25s ease, box-shadow .25s ease}
.project:hover{transform:translateY(-4px);box-shadow:0 20px 50px -30px rgba(16,185,129,.5)}
.project-body{padding:16px}
.thumb{aspect-ratio:16/9;border-bottom:1px solid var(--border);background-size:cover;background-position:center}
.thumb-1{background-image:linear-gradient(135deg, rgba(16,185,129,.2), rgba(4,120,87,.35)), url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"450\"><rect width=\"800\" height=\"450\" fill=\"%23111\"/><g fill=\"%2309a66b\" opacity=\"0.5\"> <circle cx=\"100\" cy=\"120\" r=\"50\"/> <circle cx=\"340\" cy=\"200\" r=\"80\"/> <circle cx=\"640\" cy=\"140\" r=\"60\"/></g></svg>');}
.thumb-2{background-image:linear-gradient(135deg, rgba(16,185,129,.2), rgba(4,120,87,.35)), url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"450\"><rect width=\"800\" height=\"450\" fill=\"%23111\"/><g stroke=\"%2309a66b\" stroke-width=\"8\" opacity=\"0.5\"><path d=\"M40 380Q160 280 280 360T520 300Q640 240 760 260\" fill=\"none\"/></g></svg>');}
.thumb-3{background-image:linear-gradient(135deg, rgba(16,185,129,.2), rgba(4,120,87,.35)), url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"450\"><rect width=\"800\" height=\"450\" fill=\"%23111\"/><g fill=\"none\" stroke=\"%2309a66b\" stroke-width=\"6\" opacity=\"0.5\"><rect x=\"100\" y=\"100\" width=\"220\" height=\"160\" rx=\"20\"/><rect x=\"360\" y=\"120\" width=\"320\" height=\"120\" rx=\"20\"/></g></svg>');}

/* Contact */
.contact{display:flex;flex-direction:column;gap:12px}
.footer{border-top:1px solid var(--border);padding:28px;text-align:center;color:var(--muted)}

/* Scroll reveal & tilt */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}
.tilt{transform-style:preserve-3d;transform:perspective(900px) rotateX(0) rotateY(0);transition:transform .2s ease}

/* Scroll-to-top */
.scroll-top{position:fixed;bottom:18px;right:18px;border-radius:999px;width:44px;height:44px;border:1px solid var(--border);background:rgba(16,185,129,.15);backdrop-filter: blur(8px);color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.2s ease}
.scroll-top.show{opacity:1;pointer-events:auto}

/* Utilities */
.hero-right .card{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

#particles-js{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-5;background:var(--bg);}
.portrait{width:100%;border-radius:20px;object-fit:cover;display:block}


/* Advanced Navbar Styling */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(11,15,13,0.7);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition: background .4s ease, box-shadow .4s ease;
}
.header.scrolled{
  background:rgba(11,15,13,0.95);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.6);
}
.menu a{
  position:relative;
  padding:6px 0;
  font-weight:600;
  letter-spacing:.3px;
}
.menu a::after{
  content:"";
  position:absolute;
  left:0;bottom:-3px;
  width:100%;height:2px;
  background:linear-gradient(90deg,var(--green-400),var(--green-600));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s ease;
}
.menu a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}
.menu a.active{
  color:var(--green-300);
}
.menu a.active::after{
  transform:scaleX(1);
  transform-origin:left;
}
.brand:hover .brand-icon{
  color:var(--green-300);
  text-shadow:0 0 12px rgba(16,185,129,.7);
}

/* Mobile menu animation */
@media (max-width: 900px){
  .menu{
    transform:translateY(-20px);
    opacity:0;
    pointer-events:none;
    transition:transform .35s ease, opacity .35s ease;
  }
  .menu.show{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
}


/* Islamic Navbar Final */
.header{background:rgba(0,0,0,0.6);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,0.08)}
.hover-link{position:relative;color:var(--text);transition:color .3s ease}
.hover-link::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:linear-gradient(90deg,var(--green-400),var(--green-600));transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.hover-link:hover{color:var(--green-300)}
.hover-link:hover::after{transform:scaleX(1);transform-origin:left}
.btn-hire{padding:10px 20px;border-radius:12px;font-weight:600;background:linear-gradient(135deg,var(--green-500),var(--green-700));color:#fff;box-shadow:0 4px 20px rgba(16,185,129,.35);transition:all .3s ease}
.btn-hire:hover{background:linear-gradient(135deg,var(--green-400),var(--green-600));box-shadow:0 6px 24px rgba(16,185,129,.5);transform:translateY(-2px)}


/* Typing effect style */
#typing{display:inline-block;min-height:1.2em;border-right:2px solid var(--green-400);padding-right:6px;white-space:nowrap;animation:blink 1s step-end infinite}
@keyframes blink{50%{border-color:transparent}}
/* Subtle link focus ring */
a:focus-visible{outline:2px solid var(--green-500);outline-offset:3px;border-radius:10px}

html{scroll-behavior:smooth}


/* Advanced profile image outline/glow */
.portrait-wrapper{
  position:relative;
  display:inline-block;
  border-radius:24px;
  overflow:hidden;
}
.portrait-wrapper::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  padding:3px;
  background:conic-gradient(from 0deg, var(--green-400), var(--green-600), var(--green-700), var(--green-500), var(--green-400));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:spinBorder 6s linear infinite;
}
@keyframes spinBorder{
  to{transform:rotate(360deg)}
}
.portrait{
  display:block;
  border-radius:20px;
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
}


/* Aurora Gradient + Pulse Glow border for profile image */
.portrait-wrapper{
  position:relative;
  display:inline-block;
  border-radius:24px;
  overflow:hidden;
  padding:4px;
  background:linear-gradient(120deg, var(--green-400), var(--green-600), var(--green-700), var(--green-500), var(--green-400));
  background-size:300% 300%;
  animation:auroraFlow 8s ease infinite;
  box-shadow:0 0 25px rgba(16,185,129,.35);
  transition:box-shadow .4s ease, transform .4s ease;
}
.portrait-wrapper:hover{
  box-shadow:0 0 35px rgba(16,185,129,.7), 0 0 60px rgba(16,185,129,.4);
  transform:scale(1.03);
}
@keyframes auroraFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.portrait{
  display:block;
  border-radius:20px;
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
}


/* Force mute button to left side */
#muteButton {
  position: fixed !important;
  top: 20px !important;
  left: 20px !important;
  right: auto !important;
}


/* Force audio toggle button to left side */
#audio-toggle {
  position: fixed !important;
  bottom: 20px !important;  /* niche laya */
  left: 20px !important;    /* left side */
  right: auto !important;
  top: auto !important;     /* top hata diya */
  z-index: 9999 !important;
}