/* ----------------- Base ----------------- */
:root{
  --accent:#ff4d6d;      /* Vibrant pink */
  --accent-dark:#a21caf; /* Purple accent */
  --muted:#d1d5db;
  --card:rgba(255,255,255,0.1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Poppins',sans-serif;
  color:#f9fafb;
  margin:0;
  background:linear-gradient(135deg,#1a1c40, #3b185f, #ff4d6d);
  background-size:400% 400%;
  animation:bgAnim 20s ease infinite;
  -webkit-font-smoothing:antialiased;
}
@keyframes bgAnim {
  0% {background-position:0% 50%}
  50% {background-position:100% 50%}
  100% {background-position:0% 50%}
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- NAV ---------- */
nav{
  position:fixed;
  top:0;left:0;right:0;
  background:rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  z-index:999;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}
.nav-container{max-width:1150px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--accent);font-size:1.15rem;display:flex;gap:.4rem;align-items:center}
.brand .br-left{opacity:.85}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{font-weight:600;color:#fff;padding:6px 0;position:relative}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .25s}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.hamburger{display:none}

/* ---------- HERO ---------- */
#hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:110px 20px 80px;
  background:linear-gradient(135deg,#ff4d6d 0%, #a21caf 100%);
  color:#fff;
  text-align:center;
}
.hero-inner{max-width:1100px;width:100%;display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap}
.hero-photo{
  width:300px;height:300px;border-radius:18px;overflow:hidden;
  border:6px solid rgba(255,255,255,.2);
  box-shadow:0 30px 60px rgba(0,0,0,0.35),0 6px 18px rgba(0,0,0,0.25);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  flex:0 0 300px;
  transition:transform .4s;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo:hover{transform:scale(1.05) rotateY(6deg)}
.hero-copy{flex:1 1 420px;min-width:320px;text-align:left}
.hero-copy h1{font-size:2.6rem;margin-bottom:10px;font-weight:700;line-height:1.02}
.hero-copy p.lead{font-size:1.05rem;color:rgba(255,255,255,0.9);margin-bottom:20px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.25);color:#fff}
.btn-solid{background:#fff;color:var(--accent);font-weight:700;box-shadow:0 0 12px rgba(255,77,109,0.6)}

/* ---------- SECTION TITLE ---------- */
section{padding:100px 20px;min-height:72vh}
.container{max-width:1150px;margin:0 auto}
.section-title{display:block;text-align:center;margin-bottom:26px}
.section-title h2{
  font-size:2.2rem;margin-bottom:6px;font-weight:700;
  background:linear-gradient(90deg,#ff4d6d,#facc15);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.section-sub{color:var(--muted);font-size:.98rem}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.about-card{
  background:rgba(255,255,255,0.08);
  padding:26px;border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter:blur(12px);
  transition:.4s;
}
.about-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 15px 40px rgba(0,0,0,0.35);}
.about-bullets{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pill{display:inline-block;padding:6px 12px;border-radius:999px;background:#f1f5f9;color:#0f172a;font-weight:600}

/* ---------- TIMELINE / EDUCATION ---------- */
.timeline{border-left:3px solid var(--accent);padding-left:20px;margin-top:14px}
.timeline-item{margin-bottom:22px}
.timeline-item h5{margin-bottom:6px;color:var(--accent);font-weight:700}
.muted{color:var(--muted)}

/* ---------- SKILLS ---------- */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:20px}
.skill-card{
  background:rgba(255,255,255,0.1);
  padding:18px;border-radius:12px;
  box-shadow:0 6px 22px rgba(0,0,0,0.25);
  text-align:center;
  backdrop-filter:blur(10px);
  transition:.4s;
}
.skill-card:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.skill-name{font-weight:700;margin-top:10px;color:#fff}

/* ---------- PROJECTS ---------- */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.project{
  background:rgba(255,255,255,0.1);
  border-radius:12px;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
  display:flex;flex-direction:column;
  backdrop-filter:blur(10px);
  transition:.4s;
}
.project:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 15px 40px rgba(0,0,0,0.4)}
.project .proj-banner{height:170px;background:#eef2ff;display:flex;align-items:center;justify-content:center}
.project .proj-body{padding:18px;flex:1 1 auto}
.project h5{color:#facc15;margin-bottom:8px}
.project p{color:var(--muted);font-size:.97rem}

/* ---------- CERTIFICATES ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
.cert-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;transition:.4s}
.cert-card img{width:100%;height:200px;object-fit:cover;transition:transform .45s ease}
.cert-card:hover img{transform:scale(1.08)}
.cert-title{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,0.56);padding:8px 12px;border-radius:8px;color:#fff;font-weight:700}

/* ---------- CONTACT ---------- */
.contact-card{
  max-width:780px;margin:0 auto;
  background:rgba(255,255,255,0.1);
  padding:28px;border-radius:12px;
  box-shadow:0 20px 48px rgba(0,0,0,0.25);
  backdrop-filter:blur(12px);
  transition:.4s;
}
.btn-primary {
  background: var(--accent);
  border: none;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.contact-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.socials{display:flex;gap:12px;justify-content:center;margin-top:12px}
.social-links a {
  display: inline-block;
  margin: 0 12px;
  font-size: 1.6rem;
  color: #fff;
  background: var(--accent);
  padding: 12px;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.social-links a:hover {
  background: var(--accent-dark);
  transform: scale(1.15) rotate(8deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* ---------- FOOTER ---------- */
footer{padding:28px 20px;background:transparent;text-align:center;color:var(--muted)}

/* ---------- MODAL LIGHTBOX ---------- */
.modal-img{max-width:90vw;max-height:80vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.3)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr}
  .hero-copy{text-align:center;min-width:unset}
  .hero-photo{margin:0 auto}
  nav .nav-links{display:none}
  .hamburger{display:block}
}
@media (max-width:520px){
  .hero-photo{width:220px;height:220px}
  .hero-copy h1{font-size:1.75rem}
}


/* ---------- EXTRA: BUTTON + MODAL ---------- */
.btn {
  margin-top: 15px;
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn:hover {
  background-color: var(--accent-dark);
  transform: translateY(-2px);
}

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 9999; /* higher than nav */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: auto;
  padding-top: 60px;
}
.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
  border-radius: 8px;
}
.certificate-image {
  width: 100%;
  height: auto;
  max-height: 600px;
  display: block;
  margin: 0 auto;
}
.close-btn {
  color: #080808;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}
.close-btn:hover,
.close-btn:focus {
  color: #151515;
  text-decoration: none;
  cursor: pointer;
}