:root{
  --bg:#040509;
  --panel:#0d1117;
  --muted:#b7cbe0;
  --accent:#28ffc6;
  --accent2:#6ee7ff;
  --glass: rgba(255,255,255,0.03);
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Arial;
  background:var(--bg);
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.container{width:min(1100px,94%);margin:0 auto;position:relative;z-index:2}

/* Canvas (matrix background) */
canvas#matrix{position:fixed;inset:0;z-index:-3;opacity:0.12}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  position:sticky;
  top:0;
  background:linear-gradient(180deg, rgba(4,6,8,0.85), rgba(4,6,8,0.5));
  border-bottom:1px solid rgba(255,255,255,0.02);
  z-index:30;
}
.brand{font-weight:900;color:#fff;font-size:18px;letter-spacing:0.6px}
.brand span{color:var(--accent2)}
.top-nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.top-nav a{
  color:var(--muted);
  text-decoration:none;
  padding:6px 8px;
  border-radius:6px;
  transition:all .25s;
  white-space: nowrap;
}
.top-nav a.active{
  color:var(--accent);
  border-bottom:2px solid var(--accent);
  font-weight:700;
}
.btn{
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  padding:8px 12px;
  border-radius:8px;
  color:#04111a;
  font-weight:700;
  text-decoration:none;
  border:none;
  cursor:pointer;
}

.resume-btn {
  display: inline-block;
  padding: 12px 28px;
  background-color: #000000; /* black interior */
  color: #ffffff; /* white text */
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid #ffffff; /* white border */
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  user-select: none;
}

.resume-btn:active {
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.8); /* white glow on click */
  transform: translateY(-2px);
}

.resume-btn:hover {
  cursor: pointer; /* pointer on hover */
}


.btn.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--muted);
}

/* Hamburger Menu */
.hamburger{
  display:none;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
}
.hamburger span{
  width:25px;
  height:3px;
  background-color:#fff;
  border-radius:3px;
}

/* Right panel */
.right-panel{
  position:fixed;
  right:22px;
  top:90px;
  width:320px;
  z-index:25;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.right-panel.hidden{display:none;}
.profile-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.02);
  display:flex;gap:10px;align-items:center;
}
.photo-wrap{width:80px;height:80px;border-radius:999px;overflow:hidden;border:2px solid rgba(255,255,255,0.03)}
.photo-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.info{flex:1}
.big-name{font-size:18px;margin:0;color:var(--accent2);text-align:center}
.role{font-size:12px;margin:4px 0;color:var(--muted);text-align:center}
.social-bar{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;justify-content:center}
.social-bar a{font-size:12px;color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.02)}

/* Slideshow */
.slideshow{background:var(--panel);border-radius:12px;padding:8px;border:1px solid rgba(255,255,255,0.02);overflow:hidden;position:relative;height:200px}
.slideshow .slide{opacity:0;transition:opacity .6s ease;position:absolute;inset:0;border-radius:8px;overflow:hidden;display:flex;align-items:flex-end}
.slideshow .slide.active{opacity:1;position:relative}
.slideshow img{width:100%;height:180px;object-fit:cover;display:block}
.cap{position:absolute;left:12px;bottom:10px;background:rgba(3,12,18,0.7);padding:6px 10px;border-radius:8px;color:var(--accent2);font-weight:700}
.controls{display:flex;justify-content:center;gap:10px;margin-top:8px}
.controls button{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 10px;border-radius:6px;cursor:pointer}

/* Pages / sections */
.page{
  min-height:calc(100vh - 120px);
  padding:40px 0;
  opacity:0; transform:translateX(30px);
  transition:opacity .6s ease, transform .6s ease;
  display:none;
}
.page.active{display:block;opacity:1;transform:translateX(0)}
.content{max-width:900px;margin:0 auto}

/* Hero center */
.hero-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 160px)}
.hero-photo{width:220px;height:220px;border-radius:999px;object-fit:cover;border:4px solid var(--accent2);box-shadow:0 6px 30px rgba(110,231,255,0.06)}
.hero-name{font-size:42px;color:var(--accent2);margin:18px 0 6px;text-align:center;font-weight:900}
.hero-sub{color:var(--muted);font-size:16px;text-align:center}

/* Two-col layouts */
.two-col{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
.side-note{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}

/* ---------- Skills Section ---------- */
.skill-grid-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.skill-box {
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid #0ff;
  border-radius: 12px;
  padding: 20px;
  transition: 0.3s ease-in-out;
}

/* 🔹 Smaller box style for OS & AI/ML */
.skill-box.small-box {
  max-width: 350px;
  margin: 0 auto;
}

.skill-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px #00ffe7;
}

.skill-box h3 {
  color: #0ff;
  margin-bottom: 15px;
  text-align: center;
  font-size: 1.3rem;
  border-bottom: 1px solid #0ff;
  padding-bottom: 8px;
}

.skill {
  margin: 12px 0;
}

.skill label {
  font-size: 0.9rem;
  margin-bottom: 5px;
  display: block;
}

.bar {
  background: #333;
  border-radius: 8px;
  overflow: hidden;
  height: 8px;
}

.fill {
  background: linear-gradient(90deg, #00ffe7, #00bfff);
  height: 100%;
  width: 0;
  transition: width 1.5s ease;
}

/* Projects */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.project-card{background:var(--panel);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;gap:8px}
.project-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;display:block}
.project-card:hover{transform:translateY(-6px);box-shadow:0 8px 30px rgba(0,200,180,0.06);border-color:var(--accent2)}
.project-card a.github-link{color:#fff;text-decoration:none;transition:color .3s}
.project-card a.github-link:hover{color:var(--accent2);text-decoration:underline}

/* empire */
.empire-wrap{display:flex;justify-content:center;margin-top:18px}
.empire-img{max-width:900px;width:100%;border-radius:12px;display:block;border:2px solid rgba(255,255,255,0.04)}

/* Contact form */
.contact form{display:flex;flex-direction:column;gap:8px;max-width:640px}
.contact input,.contact textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--muted)}
.hint{color:rgba(255,255,255,0.35);font-size:13px}
.site-footer{padding:30px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .right-panel{display:none}
  .two-col{grid-template-columns:1fr}
  .page{padding:28px 0}
}

@media (max-width:768px){
  .top-nav{
    position:absolute;
    top:60px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:15px 0;
    display:none;
    background:var(--bg);
    border-top:1px solid rgba(255,255,255,0.05);
    z-index:29;
  }
  .top-nav.active{display:flex;animation:slideDown .3s ease-in-out}
  .hamburger{display:flex}
  .top-nav a{white-space:normal;text-align:center}
  .top-nav .btn{width:90%;text-align:center}
  .project-card a.github-link{text-align:center;}
}

@media (max-width:700px){
  .hero-photo{width:150px;height:150px}
  .hero-name{font-size:32px}
}

/* Slide animation */
@keyframes slideDown{
  0%{transform:translateY(-20px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

/* ---------- Force small size for Operating Systems box only ---------- */
/* place this near the end of styles.css so it overrides previous rules */

.skill-grid-columns > #os-box,
#os-box {
  /* center the box inside its grid cell (if using grid) */
  justify-self: center;
  align-self: start;
}

/* Make the outer grid item act as a centering container */
#os-box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}

/* inner content gets the max-width (actual visible small box) */
#os-box .skill-inner {
  width: 100%;
  max-width: 360px;        /* <-- desired small width, change px if you want smaller */
  padding: 10px 12px;
  box-sizing: border-box;
}

//* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Certificates Section */
#certificates {
  background: black;
  padding: 60px 20px;
  text-align: center;
}

#certificates h2 {
  color: #ffffff;
  margin-bottom: 40px;
  font-size: 2.2rem;
  font-weight: bold;
  text-shadow: 0 0 12px rgba(0, 255, 128, 0.8), 0 0 20px rgba(0, 255, 128, 0.6);
}

.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: auto;
}

.certificate-card {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #00ff80;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 255, 128, 0.6);
  padding: 18px;
  overflow: visible; /* allow full content to show */
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 1s forwards;
  cursor: pointer;
  position: relative; /* needed for hover z-index */
  z-index: 1;
}

.certificate-card:hover {
  transform: translateY(-5px) scale(1.05); /* slight zoom */
  box-shadow: 0 0 25px #00ff80, 0 0 50px #00ff80, 0 0 70px #00ff80;
  z-index: 10; /* bring card above others */
}

.certificate-card img {
  width: 100%;
  height: auto;
  object-fit: contain; /* keep full image visible */
  border-radius: 8px;
  margin-bottom: 12px;
  max-height: 350px; /* prevents cutting */
}

.certificate-card h3 {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.4;
}

/* clickable links */
.certificate-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.certificate-card a:hover h3 {
  text-decoration: underline;
}

/* keyframes for fade-in */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* keyframes for glowing pulse */
@keyframes pulse {
  from {
    box-shadow: 0 0 15px #00ff80, 0 0 30px rgba(0, 255, 128, 0.7);
  }
  to {
    box-shadow: 0 0 25px #00ff80, 0 0 50px rgba(0, 255, 128, 1);
  }
}

/* staggered animation delays */
.certificate-card:nth-child(1) { animation-delay: 0.2s; }
.certificate-card:nth-child(2) { animation-delay: 0.4s; }
.certificate-card:nth-child(3) { animation-delay: 0.6s; }
.certificate-card:nth-child(4) { animation-delay: 0.8s; }
.certificate-card:nth-child(5) { animation-delay: 1s; }
.certificate-card:nth-child(6) { animation-delay: 1.2s; }
.certificate-card:nth-child(7) { animation-delay: 1.4s; }
.certificate-card:nth-child(8) { animation-delay: 1.6s; }
.certificate-card:nth-child(9) { animation-delay: 1.8s; }

/* Responsive Design */
@media (max-width: 768px) {
  #certificates h2 { font-size: 1.8rem; }
  .certificate-card img { max-height: 300px; }
  .certificate-card h3 { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  #certificates { padding: 40px 10px; }
  #certificates h2 { font-size: 1.5rem; }
  .certificate-card img { max-height: 250px; }
  .certificate-card h3 { font-size: 0.9rem; }
}