/* Theme variables */
:root{
  --bg-start: #07040a;
  --bg-mid:  #20062a;
  --bg-end:  #2b003f;
  --muted:   #cfc7d6;
  --accent:  #9b4dff;
  --accent-2:#ff5ca8;
  --success: #06b33b;
  --glass:   rgba(255,255,255,0.04);
  --text:    #ffffff;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(600px 320px at 10% 12%, rgba(155,77,255,0.08), transparent 12%),
    radial-gradient(500px 260px at 92% 78%, rgba(255,92,168,0.06), transparent 12%),
    linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 45%, var(--bg-end) 100%);
  min-height:100vh;
  overflow-x:hidden;
}

/* Navbar */
.custom-navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1030;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding:0.6rem 1rem;
  transition: transform .28s ease, opacity .28s ease;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.custom-navbar.hidden{
  opacity:0;
  pointer-events:none;
  transform: translateY(-12px) scale(0.995);
}
.custom-navbar .navbar-brand{
  font-weight:700;
  letter-spacing:1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration:none;
}
.custom-navbar .nav-link{
  color: rgba(255,255,255,0.85);
  margin: 0 .4rem;
  transition: color .15s ease, transform .15s ease;
}
.custom-navbar .nav-link:hover{ color: var(--accent); transform: translateY(-2px); }
.custom-navbar .nav-link.active::after{
  content:"";
  display:block;
  width:30px;
  height:3px;
  margin:6px auto 0;
  border-radius:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* Animated nav indicator and niceties */
.nav-inner{ position:relative; display:flex; align-items:center; }
.nav-inner{ position:relative; display:flex; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nav-inner .navbar-nav{ display:flex; gap:0.6rem; white-space:nowrap; flex-wrap:nowrap; }
.custom-navbar .nav-link{
  position:relative;
  padding:0.45rem 0.65rem;
  transition: color .18s ease, transform .18s ease;
}
.nav-indicator{
  position:absolute;
  left:0;
  bottom:6px;
  height:3px;
  width:0;
  border-radius:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: translateX(0);
  transition: transform .32s cubic-bezier(.2,.9,.2,1), width .32s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
  will-change: transform, width;
  opacity:1;
  pointer-events:none;
}

/* subtle pop for active link */
.custom-navbar .nav-link.active{ color: var(--accent); }

@media (max-width: 768px){
  .nav-indicator{ display:none; }
}

/* hide horizontal scrollbar but keep scrolling capability */
.nav-inner::-webkit-scrollbar{ height:6px; }
.nav-inner::-webkit-scrollbar-track{ background: transparent; }
.nav-inner::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.06); border-radius:6px; }
.nav-inner{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }

/* Hero */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:72px; /* room for fixed navbar */
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.32));
}
.hero::before,
.hero::after{
  content:'';
  position:absolute;
  width:600px;
  height:600px;
  pointer-events:none;
  opacity:0.06;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12) 2px, transparent 3px),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.12) 2px, transparent 3px);
  background-size:40px 40px, 28px 28px;
}
.hero-title{
  font-size: clamp(2rem, 6vw, 4.4rem);
  font-weight:700;
  margin:0;
  color:var(--text);
  line-height:1.02;
}
.cursor{ display:inline-block; margin-left:8px; color: var(--accent); animation: blink 0.7s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

/* Decorative visual */
.hero-visual{
  width:260px;
  height:260px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(155,77,255,0.16), transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(255,92,168,0.10), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 40px 80px rgba(43,0,63,0.45);
  border:6px solid rgba(255,255,255,0.03);
}

/* subtle float + rotate animation for home visual */
@keyframes hero-float-rotate {
  0%{ transform: translateY(0) rotate(0deg); }
  40%{ transform: translateY(-10px) rotate(6deg); }
  70%{ transform: translateY(-6px) rotate(-4deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}
.hero-visual{ animation: hero-float-rotate 6s ease-in-out infinite; }

/* Buttons */
.btn-resume{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff;
  border-radius:8px;
  padding:0.65rem 1.25rem;
  font-weight:600;
  border: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-resume:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(155,77,255,0.12); }

/* Education (timeline) */
.education-section{
  padding: 80px 18px 120px;
  position:relative;
  z-index:2;
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-end) 100%);
  border-top: 1px solid rgba(255,255,255,0.03);
  margin-top: 48px;
}
.section-title{
  text-align:center;
  font-weight:700;
  margin-bottom:28px;
  color: var(--text);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
}

/* Automatically add a centered dotted underline below each section title.
   This avoids requiring a separate <div class="underline"></div> in markup.
   Existing .underline elements remain supported for backwards compatibility. */
.section-title{
  position: relative;
  padding-bottom: 12px; /* space for underline */
}
.section-title::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 84px;
  height: 0;
  border-bottom: 3px dotted rgba(255,255,255,0.14);
  display: block;
  pointer-events: none;
}

/* vertical road */
.skill-card:hover .skill-circle {
  transform: scale(1.06);
  box-shadow: 0 0 50px rgba(155, 77, 255, 0.35);
}
.skill-card:hover .skill-value {
  /* keep percent color stable on hover */
  color: #fff;
}
.education-road{
  position:relative;
  max-width:1100px;
  margin: 0 auto;
  padding: 24px 0;
}
.education-road::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:4px;
  transform:translateX(-50%);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius:2px;
  box-shadow: 0 8px 28px rgba(155,77,255,0.08);
}

/* items */
.edu-item{ position:relative; width:100%; display:flex; align-items:flex-start; margin:38px 0; }
.edu-dot{
  width:18px; height:18px; border-radius:50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border:4px solid rgba(255,255,255,0.06);
  position:absolute; left:50%; transform:translate(-50%, -2px);
  box-shadow: 0 8px 28px rgba(155,77,255,0.12);
}
.edu-card{
  width:46%;
  padding:18px 24px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:#fff;
  box-shadow: 0 20px 50px rgba(2,2,2,0.45);
  border:1px solid rgba(255,255,255,0.03);
}
.edu-item:nth-child(odd) .edu-card{ margin-right:auto; margin-left:0; text-align:right; }
.edu-item:nth-child(even) .edu-card{ margin-left:auto; margin-right:0; text-align:left; }
.edu-card h3{ margin:0 0 6px; font-size:1.05rem; font-weight:700; }
.edu-meta{ display:block; font-size:0.88rem; color: rgba(255,255,255,0.7); margin-bottom:8px; }
.edu-detail{ margin:0; color: rgba(255,255,255,0.78); line-height:1.45; font-size:0.95rem; }

/* year button */
.edu-actions{ margin-top:12px; }
.edu-year{
  appearance:none; border:0; cursor:pointer; display:inline-block;
  padding:8px 14px; border-radius:999px; color:#fff; font-weight:600;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(155,77,255,0.12), inset 0 -2px 6px rgba(0,0,0,0.12);
  transition: transform .18s ease, box-shadow .18s ease;
  border:1px solid rgba(255,255,255,0.04);
}
.edu-year:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(155,77,255,0.16); }

/* reveal animation */
.fade-in-up{ opacity:0; transform: translateY(18px) scale(0.995); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.9,.2,1); }
.fade-in-up.in-view{ opacity:1; transform: translateY(0) scale(1); }

/* Skills — responsive flex layout + percentage ring with running color (no images) */
.skills-section{
  padding:56px 18px 96px;
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-end) 100%);
  border-top: 1px solid rgba(255,255,255,0.03);
  position:relative;
}
.skills-grid{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  max-width:1100px;
  margin:28px auto 0;
  padding:0 12px;
  justify-content:space-between;
}

/* card: left ring + right ribbon/desc */
.skill-card{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1 1 calc(50% - 20px);
  min-width:260px;
  padding:16px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 12px 30px rgba(0,0,0,0.14);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* inner wrapper */
.skill-panel{ display:flex; align-items:center; gap:16px; width:100%; }

/* LEFT: responsive percentage ring */
.skill-left{ flex:0 0 32%; display:flex; justify-content:center; align-items:center; }
/* (old .skill-circle removed — replaced by new glowing variant below) */
.skill-circle {
  position: relative;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* default progress value (0-100) */
  --p: 0;

  /* Progress ring controlled by --p (0 to 100) */
  /* single-color filled arc using skill-accent, remainder muted */
  background: conic-gradient(
    from -90deg,
    var(--skill-accent, var(--accent)) 0deg calc(var(--p) * 1%),
    rgba(255, 255, 255, 0.08) calc(var(--p) * 1%) 100%
  );

  /* Inner gap + glow uses the per-card accent for color */
  padding: 8px;
  /* use a pre-computed RGBA value if available (set by JS) for a consistent glow */
  box-shadow: 0 0 28px var(--skill-accent-rgba, rgba(155,77,255,0.15));
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

/* Hollow inner ring (transparent center) */
.skill-circle::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.2) 100%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 0;
}

/* percent text */
.skill-value {
  position: relative;
  z-index: 2;
  font-weight: 700;
  color: #fff; /* always white */
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  /* remove colored glow so the number remains neutral */
  text-shadow: none;
  transition: color 0.3s ease;
}

/* active state when animation runs — stronger glow and slight scale */
.skill-card.active .skill-circle{
  transform: scale(1.04);
  box-shadow: 0 0 54px var(--skill-accent-rgba, rgba(155,77,255,0.28));
}
.skill-card.active .skill-value{
  transform: scale(1.04);
}

/* ribbon polish */
.skill-ribbon{ text-transform:uppercase; letter-spacing:0.6px; }
.skill-ribbon .ribbon-text{ font-weight:800; }

/* RIGHT: ribbon and description */
.skill-right{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.skill-ribbon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* single solid ribbon color per-card (use --skill-accent) */
  background: var(--skill-accent, var(--accent));
  color:#fff;
  padding:12px 26px;
  border-radius:8px;
  position:relative;
  font-weight:800;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  max-width:100%;
  min-height:48px; /* make ribbon taller and centered like reference */
}
.skill-ribbon::after{
  content:'';
  position:absolute;
  right:-18px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  /* keep the triangular tail same solid color as ribbon */
  background: var(--skill-accent, var(--accent));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  border-radius:3px;
}
.ribbon-text{ display:inline-block; white-space:nowrap; }
.skill-desc{ color: rgba(255,255,255,0.92); font-weight:600; font-size:0.95rem; opacity:0.95; }

/* interactions */
.skill-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0,0,0,0.18); }

/* responsive adjustments */
@media (max-width: 900px){
  .skill-card{ flex:1 1 calc(50% - 16px); }
  .skill-left{ flex:0 0 34%; }
  .skill-circle{ max-width:140px; }
}
@media (max-width: 575.98px){
  .skills-grid{ gap:14px; }
  .skill-card{ flex:1 1 100%; padding:12px; }
  .skill-panel{ gap:12px; }
  .skill-left{ flex:0 0 36%; }
  .skill-circle{ max-width:110px; padding:6px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), black 0); mask: radial-gradient(farthest-side, transparent calc(100% - 14px), black 0); }
  .skill-ribbon{ padding:10px 14px; }
  .skill-ribbon::after{ display:none; }
  .skill-right{ align-items:center; text-align:center; }
}

/* Contact */
.contact-section{
  padding: 64px 18px 96px;
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-end) 100%);
  border-top: 1px solid rgba(255,255,255,0.03);
}
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px; max-width:1100px; margin: 0 auto;
}
.contact-card{
  padding:22px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border:1px solid rgba(255,255,255,0.03); color:#fff;
}
.btn-email{
  padding:10px 14px; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; text-decoration:none; font-weight:600; border:1px solid rgba(255,255,255,0.04);
}
.btn-copy{ padding:8px 12px; border-radius:8px; background: rgba(255,255,255,0.04); color:#fff; border:1px solid rgba(255,255,255,0.03); cursor:pointer; }

/* Contact form specific styles */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; max-width:1100px; margin: 0 auto; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
  outline: none;
  box-shadow: none;
  transition: box-shadow .12s ease, transform .12s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color: rgba(255,255,255,0.55); }
.contact-form input:focus, .contact-form textarea:focus{
  box-shadow: 0 8px 28px rgba(155,77,255,0.08);
  border-color: rgba(155,77,255,0.28);
  transform: translateY(-2px);
}
.contact-card h3{ margin-top:0; }
.contact-feedback-show{ opacity:1 !important; }

@media (max-width: 992px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* ========================
   Contact - visual polish
   Non-functional styles only. Enhances the look (glass, depth, gradients)
   without changing structure or behavior.
   ======================== */
.contact-section{
  position: relative;
  overflow: hidden;
}
.contact-section::before{
  content: '';
  position: absolute;
  inset: -12% -8%;
  background: radial-gradient(600px 360px at 10% 10%, rgba(155,77,255,0.06), transparent 12%),
              radial-gradient(420px 260px at 92% 82%, rgba(255,92,168,0.04), transparent 12%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

.contact-grid{ position: relative; z-index: 2; gap:32px; }

.contact-card{
  padding: 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 28px 60px rgba(6,6,12,0.55);
  backdrop-filter: blur(8px) saturate(120%);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease;
}
.contact-card .card-inner{ position: relative; z-index:1; }
.contact-card:hover{ transform: translateY(-8px); box-shadow: 0 40px 110px rgba(6,6,12,0.66); }

.contact-title{
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact-lead{ color: rgba(255,255,255,0.92); font-weight:600; margin-bottom:10px; }

.social-buttons{ display:flex; gap:10px; align-items:center; margin-top:10px; }
.social-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); color:#fff; text-decoration:none; font-weight:700; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.social-btn:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(155,77,255,0.06); }
.social-icon{ width:18px; height:18px; display:inline-block; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.28)); }

.contact-input, .contact-subject, .contact-textarea{
  background: linear-gradient(180deg, rgba(0,0,0,0.14), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.06);
  padding: 12px 14px;
  border-radius: 10px;
  transition: box-shadow .18s ease, transform .12s ease, border-color .12s ease;
}
.contact-input::placeholder, .contact-textarea::placeholder{ color: rgba(255,255,255,0.48); }
.contact-input:focus, .contact-textarea:focus, .contact-subject:focus{
  outline: none;
  border-color: rgba(155,77,255,0.9);
  box-shadow: 0 12px 40px rgba(155,77,255,0.10);
  transform: translateY(-2px);
}

.contact-actions{ align-items:center; gap:12px; }
.send-btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff; font-weight:800; border: none; cursor:pointer;
  box-shadow: 0 14px 40px rgba(155,77,255,0.14); transition: transform .16s ease, box-shadow .18s ease, filter .12s ease;
}
.send-btn:hover{ transform: translateY(-3px); box-shadow: 0 22px 58px rgba(155,77,255,0.18); }
.send-btn:active{ transform: translateY(-1px); }

.btn-copy, .btn-vcard{ padding:10px 14px; border-radius:10px; background: rgba(255,255,255,0.03); color:#fff; border:1px solid rgba(255,255,255,0.04); font-weight:700; }
.btn-copy:hover, .btn-vcard:hover{ transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.3); }

/* subtle entrance for contact cards when revealed */
.contact-card.in-view{ transform: translateY(0); opacity:1; }

@media (max-width: 880px){
  .contact-grid{ gap:20px; }
  .contact-card{ padding:18px; }
  .contact-title{ font-size:1.15rem; }
}

/* semantic contact classes used in markup */
.contact-title{ margin-top:0; }
.contact-lead{ color: rgba(255,255,255,0.9); margin-bottom:6px; }
.contact-block{ margin-top:12px; margin-bottom:8px; }
.contact-info-row{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.contact-email-text{ font-weight:700; color:#fff; }
.mailto-quick{ margin-left:auto; }
.contact-meta{ margin-top:16px; }
.contact-meta-row{ margin-top:8px; }
.contact-note{ margin-top:18px; color: rgba(255,255,255,0.78); font-size:0.95rem; }
.contact-phone{ margin:0 0 6px; }

/* Contact stacking + icon styles (keeps form above transient overlays) */
.contact-section{ position:relative; z-index:2400; }
.contact-card{ position:relative; z-index:2405; }
.contact-card input, .contact-card textarea, .contact-card button, .contact-card a{ pointer-events:auto; position:relative; z-index:2450; }

/* Icon / social button styling used in contact area */
.icon{ width:18px; height:18px; display:inline-block; vertical-align:middle; margin-right:8px; stroke:currentColor; fill:none; }
.social-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); color:#fff; text-decoration:none; font-weight:700; }
.social-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.36); }
.btn-email{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; color:#fff; text-decoration:none; background: linear-gradient(90deg, rgba(155,77,255,0.98), rgba(255,92,168,0.9)); border: none; }


.contact-form-row{ display:flex; gap:8px; flex-wrap:wrap; }
.contact-input{ flex:1 1 220px; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:#fff; }
.contact-subject{ width:100%; margin-top:12px; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:#fff; }
.contact-textarea{ width:100%; margin-top:12px; padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:#fff; resize:vertical; }
.contact-actions{ display:flex; gap:10px; align-items:center; margin-top:12px; }
.contact-feedback{ margin-left:auto; color:#fff; font-weight:600; opacity:0; transition:opacity .18s; }

@media (max-width: 575.98px) {
  .contact-input{ flex:1 1 100%; }
}

/* Certifications / My Certificates */
.certifications-section{
  padding:60px 18px;
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-end) 100%);
  color:var(--text);
}
.certifications-section h2{
  text-align:center; font-size:clamp(1.2rem,2.8vw,1.6rem); margin:0 auto 10px; font-weight:800; letter-spacing:0.4px;
}
.underline{
  width:84px;
  height:0;
  margin:8px auto 22px;
  border-bottom:3px dotted rgba(255,255,255,0.14);
}

.certifications-section .underline{
  /* legacy/specific rule kept for clarity — inherits same appearance */
  width:84px; height:0; margin:8px auto 22px; border-bottom:3px dotted rgba(255,255,255,0.14);
}
.filter-buttons{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:18px; }
.filter-btn{ appearance:none; border:1px solid rgba(255,255,255,0.06); background: transparent; color:rgba(255,255,255,0.95); padding:10px 14px; border-radius:999px; font-weight:700; cursor:pointer; transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .15s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.filter-btn:hover{ transform: translateY(-3px); background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff; box-shadow: 0 12px 30px rgba(155,77,255,0.12); }
.filter-btn.active{ background:#06b33b; color:#fff; border-color: rgba(6,179,59,0.95); box-shadow: 0 14px 40px rgba(6,179,59,0.12); }

.certificates-gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; max-width:1200px; margin:0 auto; padding:0 12px; align-items:start; grid-auto-rows: 1fr; }
.certificate-item{ background: linear-gradient(180deg, rgba(43,0,63,0.92), rgba(38,3,42,0.95)); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,0.04); box-shadow: 0 18px 44px rgba(0,0,0,0.5); height:100%; }
.certificate-thumb{ padding:12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.02); flex:1 1 auto; }
.certificate-item img{ display:block; width:100%; height:100%; object-fit:contain; transition: transform .28s ease, filter .18s ease; filter: saturate(0.98) contrast(0.98); max-height:100%; border-radius:8px; }
.certificate-item .caption{ padding:14px 16px; font-weight:700; color:rgba(255,255,255,0.95); font-size:0.98rem; background:transparent; height:auto; }

/* stronger overlay to make eye icon clearly visible */
.certificate-overlay{ background: rgba(0,0,0,0.32); }
.certificate-item:hover img{ transform: scale(1.04); filter: saturate(1.08) contrast(1.02); }
.certificate-item .caption{ padding:10px; font-weight:600; color:rgba(255,255,255,0.9); font-size:0.95rem; }

/* hide class used by JS when filtering */
.certificate-item.hidden{ display:none !important; }

@media (max-width: 600px){
  .certificates-gallery{ gap:12px; }
  .certificate-item img{ height:120px; }
  .filter-btn{ padding:8px 10px; font-size:0.92rem; }
}

/* Certificate hover overlay + lightbox */
.certificate-item{ position:relative; cursor:zoom-in; }
.certificate-item .certificate-overlay{ border-radius:12px; }
.certificate-item:hover img{ transform: scale(1.02); }
.certificate-item:hover img{ transform: scale(1.03); }
.certificate-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.18); opacity:0; transition: opacity .18s ease; }
.certificate-item:hover .certificate-overlay,
.certificate-item:focus-within .certificate-overlay{ opacity:1; }
.eye-btn{ appearance:none; border:0; background: rgba(255,255,255,0.06); color:#fff; width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: background .15s ease, transform .15s ease; }
.eye-btn:hover{ background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.eye-btn svg{ width:22px; height:22px; fill:none; stroke: #fff; stroke-width:1.6; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition: opacity .22s ease; z-index:2000; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-content{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); padding:12px; border-radius:10px; max-width:92%; max-height:86%; box-shadow:0 30px 70px rgba(0,0,0,0.6); display:flex; flex-direction:column; gap:8px; }
.lightbox-content{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); padding:12px; border-radius:10px; max-width:92%; max-height:88vh; box-shadow:0 30px 70px rgba(0,0,0,0.6); display:flex; flex-direction:column; gap:8px; overflow:auto; }
.lightbox-content img{ max-width:100%; max-height:60vh; object-fit:contain; border-radius:6px; display:block; }
.lightbox-caption{ color:rgba(255,255,255,0.9); font-weight:600; font-size:0.98rem; }
.lightbox-caption .lb-title{ font-size:1.05rem; font-weight:800; margin-bottom:6px; }
.lightbox-caption .lb-desc{ font-size:0.95rem; font-weight:500; color:rgba(255,255,255,0.92); line-height:1.5; }

/* lightbox background variants - JS will toggle these classes when opening */
.lightbox-content.variant-learned{ background: linear-gradient(180deg, rgba(155,77,255,0.12), rgba(43,0,63,0.95)); }
.lightbox-content.variant-aws{ background: linear-gradient(180deg, rgba(0,120,255,0.10), rgba(3,37,76,0.95)); }
.lightbox-content.variant-default{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); }
.lightbox-close{ appearance:none; border:0; background:transparent; color:#fff; font-size:26px; line-height:1; padding:6px 8px; cursor:pointer; align-self:flex-end; }

@media (max-width: 600px){
  .certificate-item img{ height:140px; }
  .lightbox-content img{ max-height:48vh; }
}

/* Achievements */
.achievements-section{
  padding:56px 18px 84px;
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-end) 100%);
  border-top: 1px solid rgba(255,255,255,0.03);
}
.achievement-card{
  display:flex;
  flex-direction:column;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(43,0,63,0.92), rgba(38,3,42,0.95));
  box-shadow: 0 20px 50px rgba(10,6,20,0.5);
  border: 1px solid rgba(255,255,255,0.04);
}
.achievement-thumb{ width:100%; height:auto; /* allow full image to display */
  padding:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.02); }
.achievement-thumb img{ width:100%; height:auto; object-fit:contain; display:block; transition: transform .28s ease; max-height:520px; }
.achievement-card:hover .achievement-thumb img{ transform: scale(1.01); }
.achievement-content{ padding:18px; color: #fff; }
.achievement-content h3{ margin:0 0 8px; font-size:1.15rem; font-weight:800; color:#fff; }
.achievement-meta{ font-size:0.92rem; color: rgba(255,255,255,0.78); margin-bottom:12px; }
.achievement-content p{ margin:0 0 12px; color: rgba(255,255,255,0.9); line-height:1.6; }
.achievement-cta{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; background: linear-gradient(90deg, rgba(155,77,255,0.98), rgba(255,92,168,0.98)); color:#fff; text-decoration:none; border-radius:8px; font-weight:700; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }


@media (max-width:760px){
  .achievement-item{ flex-direction:column; align-items:stretch; }
  .achievement-thumb{ width:100%; height:auto; padding:8px; }
  .achievement-thumb img{ max-height:340px; }
}

/* Achievements remain stacked (image above content) across viewports for the requested design */


/* Desktop: present achievement as two-column card (image left, content right) */
@media (min-width: 992px){
  .achievement-card{ flex-direction:row; gap:0; align-items:stretch; }
  .achievement-thumb{ flex:0 0 46%; padding:20px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.02); }
  .achievement-thumb img{ width:100%; height:auto; object-fit:contain; max-height:520px; border-radius:8px; }
  .achievement-content{ flex:1 1 auto; padding:28px 28px; display:flex; flex-direction:column; justify-content:center; }
  /* Slightly increase card height to match image when possible */
  .achievement-card{ min-height:220px; }
}

  /* Projects */
  .projects-section{
    padding:56px 18px 84px;
    background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-end) 100%);
    border-top: 1px solid rgba(255,255,255,0.03);
  }
  .projects-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:20px;
    max-width:1200px;
    margin:0 auto;
    padding:0 12px;
  }
  .project-card{
    display:flex;
    flex-direction:column;
    background: linear-gradient(180deg, rgba(43,0,63,0.92), rgba(38,3,42,0.95));
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.04);
    box-shadow: 0 18px 44px rgba(0,0,0,0.5);
  }
  .project-media{ position:relative; display:block; overflow:hidden; }
  .project-media img{ display:block; width:100%; height:220px; object-fit:cover; transition: transform .28s ease; }
  .project-media a{ display:block; }
  .project-media .project-linkedin{
    position:absolute; right:10px; top:10px; z-index:5; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.28); border-radius:8px; text-decoration:none; border:1px solid rgba(255,255,255,0.04);
  }
  .project-media .project-linkedin svg{ width:18px; height:18px; display:block; }
  .project-body{ padding:16px; display:flex; flex-direction:column; gap:12px; }
  .project-title{ margin:0; font-size:1.05rem; font-weight:800; }
  .project-desc{ margin:0; color: rgba(255,255,255,0.9); line-height:1.5; }
  .project-actions{ margin-top:auto; }
  .project-card:hover .project-media img{ transform: scale(1.04); }

  @media (max-width: 600px){
    .project-media img{ height:160px; }
  }


/* Scroll-to-top button */
.scroll-top{
  position:fixed;
  right:18px;
  bottom:22px;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff;
  border: none;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 6px 18px rgba(155,77,255,0.06);
  cursor:pointer;
  transform: translateY(6px);
  opacity: 0;
  visibility: hidden;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease, box-shadow .18s ease;
  z-index: 1400;
}
.scroll-top:focus{ outline: 3px solid rgba(155,77,255,0.16); outline-offset:4px; }
.scroll-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.scroll-top:hover{ transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,0.42); }

@media (max-width: 520px){
  .scroll-top{ right:12px; bottom:16px; width:46px; height:46px; }
}

/* Responsive: tablet */
@media (max-width: 992px){
  .skills-grid{ grid-template-columns: repeat(2, 1fr); gap:20px; }
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Mobile specific overrides */
@media (max-width: 575.98px) {
  /* hero */
  .hero{ min-height:64vh; padding-top:64px; padding-bottom:28px; }
  .hero-content{ padding:28px 14px; }
  .hero-title{ font-size:1.6rem; text-align:center; }
  .intro{ text-align:center; letter-spacing:4px; }

  /* hide heavy decor */
  .decor, .hero::before, .hero::after { display:none !important; }

  /* navbar keep visible on mobile */
  .custom-navbar.hidden{ opacity:1 !important; pointer-events:auto !important; transform:none !important; }

  /* education: move road left and stack */
  .education-road{ padding-left:20px; padding-right:12px; }
  .education-road::before{ left:16px; width:3px; top:12px; bottom:12px; transform:none; }
  .edu-dot{ left:16px; transform:none; width:14px; height:14px; border-width:3px; }
  .edu-item{ display:flex; justify-content:flex-start; margin:18px 0; padding-left:10px; }
  .edu-card{ width: calc(100% - 56px); margin:0; padding:14px; border-radius:10px; text-align:left; box-shadow: 0 10px 24px rgba(0,0,0,0.36); font-size:0.96rem; }
  .edu-item:nth-child(odd) .edu-card, .edu-item:nth-child(even) .edu-card{ margin-left:0; margin-right:0; text-align:left; }

  /* year button full width */
  .edu-year{ display:block; width:100%; padding:10px 12px; font-size:0.98rem; border-radius:999px; }

  /* skills stack */
  .skills-grid{ grid-template-columns: 1fr; gap:16px; }
  .skill-circle{ max-width:92px; }

  /* contact */
  .contact-section{ padding:40px 14px 72px; }
  .contact-card{ width:100%; }
  .btn-resume{ display:block; width:100%; max-width:420px; margin:0.75rem auto 0; }

  /* reduce heavy shadows on mobile for performance */
  .edu-card, .hero-visual, .skill-card, .contact-card { box-shadow: 0 10px 24px rgba(0,0,0,0.35) !important; }
}
.footer{
  padding:24px 18px;
  text-align:center;
  font-size:0. ninerem;
  color: rgba(255,255,255,0.6);
  border-top:1px solid rgba(255,255,255,0.03);
  background: rgb(12, 12, 12);
}