/* Minimal modern portfolio styles with fluid animations */
:root{
  --bg:#0c1224;
  --card:#141421;
  --muted:#94a3b8;
  --idk: #e6eef8;
  --accent:#6ee7b7;
  --code-font: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Segoe UI Mono', monospace;
  --code-inline-size: 2rem;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  --radius:14px;
  --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}

html,body{
  height:100%
}

body{
  margin:0;
  font-family:var(--ff);
  background:#0f0f1d; /* solid background requested */
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  max-width:1250px;
  margin:0 auto;
  padding:12px}

.site-header{
  position:fixed;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  width:calc(50% - 40px);
  max-width:none;
  padding:9px 18px;
  border-radius:60px;
  backdrop-filter:blur(8px);
  background:rgba(19, 19, 36, 0.55);
  border:1px solid rgba(255,255,255,0.03);
  z-index:60;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between}

.logo{
  font-weight:800;
  color:var(--accent);
  text-decoration:none;
  font-size:0.95rem;
  font-family:var(--code-font)}

.nav{
  display:flex;
  gap:12px}

.nav a{
  color:var(--idk);
  text-decoration:none;
  padding:6px 8px;
  border-radius:8px;
  transition:all .18s;
  font-size:0.95rem;
  font-family:var(--code-font)
}

.nav a:hover{
  color:#fff;
  background:var(--glass-2);
  transform:translateY(-2px)}

.menu-toggle{
  display:none;
  background:none;
  border:0;
  color:var(--muted);
  font-size:1.2rem
}

.hero{
  padding:72px 0
}

main{
  padding-top:110px
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: var(--delay, 0s);
  
}

.projectsclass {
  font-size: 3.5rem;
  opacity: 0;
  animation: fadeInUp 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation-delay: var(--delay, 0s);
}

.aboutme {
  font-size: 3.5rem;
  margin-bottom: 40px;
  text-align: center;
}

/* Tech Stack Section */
.tech-stack {
  margin-top: 60px;
  text-align: center;
}

.tech-stack h1 {
  font-size: 3.5rem;
  margin-bottom: 40px;
}

.tech-stack h2 {
  margin-bottom: 40px;
  font-size: 2rem;
  color: var(--idk);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tech-icon {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.tech-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tech-icon:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.tech-icon:hover::before {
  opacity: 1;
}

.tech-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.tech-icon:hover img {
  transform: scale(1.1);
}

.tech-name {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}

/* removed .subnav styles (in-page sub-navigation was removed) */
.hero-grid{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:center}
.hero-text h1{font-size:4rem;margin:0 0 12px}
.accent{
  /* animated gradient text */
  color: transparent;
  background: linear-gradient(90deg, var(--accent), #06b6d3);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: accentShift 2s linear infinite;
}

@keyframes accentShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/* small code-style inline utility */
.code-inline{font-family:var(--code-font);font-size:var(--code-inline-size);color:var(--idk);display:block;margin:0 0 6px}
.lead{color:var(--idk);font-size:1.15rem;line-height:1.5}
.cta-row{margin-top:30px;;display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.btn.primary{background:linear-gradient(90deg,#10b981,#06b6d4);color:#021018;box-shadow:0 6px 24px rgba(3,7,18,0.6);}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--idk)}
.btn.outline{border:1px dashed rgba(255,255,255,0.06);background:transparent;color:var(--muted)}
.skills{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.chip{background:var(--glass);padding:6px 10px;border-radius:999px;color:var(--muted);font-weight:600}

.hero-card{background:rgba(255,255,255,0.02);padding:20px;border-radius:var(--radius);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.03)}
.card-inner{display:flex;flex-direction:column;gap:14px;align-items:center}
.avatar{width:120px;height:120px;border-radius:20px;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 20px 40px rgba(2,6,14,0.6);transform:translateY(-8px)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* larger, simpler profile image used in hero */
.avatar-large{width:300px;height:300px;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(2,6,14,0.7);transform:translateY(-8px);margin:0 auto 12px;display:block}
.avatar-large img{width:100%;height:100%;object-fit:cover;display:block}

/* badges centered below avatar */
.badge{background:rgba(255,255,255,0.03);padding:6px 10px;border-radius:999px;color:var(--idk);font-weight:700;font-family:var(--code-font);font-size:0.9rem;border:1px solid rgba(255,255,255,0.02)}
.stat{display:flex;flex-direction:column;align-items:center}
.num{font-size:1.8rem;font-weight:800;color:var(--accent);transition:transform .6s cubic-bezier(.2,.9,.3,1)}
.label{font-size:0.85rem;color:var(--muted)}
.mini-links{display:flex;gap:8px}
.mini-links a{color:var(--muted);font-size:0.9rem;text-decoration:none}

.about{padding:60px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}

.about-images {
  display: flex;
  gap: 24px;
  margin-top: 40px;
}

.about-image {
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(2,6,14,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-image:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(2,6,14,0.6);
}

.about-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.about-image:hover img {
  transform: scale(1.05);
}

/* Media query for mobile responsiveness */
@media (max-width: 768px) {
  .about-images {
    flex-direction: column;
    gap: 16px;
  }
  
  .about-image img {
    height: 240px;
  }
}
.aboutsize{
  font-size:1.15rem;
  line-height:1.5
}

.projects{padding:60px;text-align: center}
.projects-grid{display:flex;flex-direction:column;gap:20px;margin-top:18px}
.project{display:flex;align-items:center;gap:20px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,0.02);transition:transform .28s ease, box-shadow .28s ease}
.project:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(3,7,18,0.6)}
.project-thumb{flex:0 0 420px;height:220px;border-radius:14px;overflow:hidden;background:var(--card);display:flex;align-items:center;justify-content:center}
.project-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.project-body{flex:1;display:flex;flex-direction:column;gap:12px}
.project h3{margin:0;font-size:1.4rem}
.project p{margin:0;color:var(--muted);font-size:0.98rem}
.project-actions{margin-top:auto;display:flex;gap:10px}
.project .btn.ghost{padding:8px 12px}

/* Modal for project details / screenshots */
.modal-overlay{position:fixed;inset:0;background:rgba(2,6,14,0.7);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(6px)}
.modal-content{width:min(1100px,95%);background:linear-gradient(180deg, rgba(8,10,18,0.98), rgba(12,14,22,0.98));padding:18px;border-radius:14px;box-shadow:0 30px 80px rgba(2,6,14,0.8);position:relative}
.modal-close{position:absolute;top:12px;right:12px;background:transparent;border:0;color:var(--idk);font-size:1.2rem;padding:8px;border-radius:8px}
.modal-body{display:flex;gap:18px;align-items:flex-start}
.modal-carousel{flex:1;background:var(--card);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;height:420px}
.modal-carousel img{max-width:100%;max-height:100%;object-fit:contain}
.modal-info{width:360px;flex:0 0 360px;display:flex;flex-direction:column;gap:12px;padding:8px}
.carousel-controls{display:flex;gap:8px;align-items:center}
.carousel-controls button{background:rgba(255,255,255,0.03);border:0;color:var(--idk);padding:8px 10px;border-radius:8px}
.more-row{margin-top:18px}

.contact{padding:60px 0}
.contact-form{display:grid;gap:10px;max-width:640px}
.contact-form input, .contact-form textarea{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.form-row{display:flex;gap:12px;align-items:center}
.form-msg{color:var(--accent);font-weight:600}
.contact-links{margin-top:18px;display:flex;gap:16px}

.site-footer{padding:18px 0;border-top:1px solid rgba(255,255,255,0.02);color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.foot-links a{color:var(--muted);text-decoration:none;margin-left:12px}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .projects-grid{gap:16px}
}
@media (max-width:600px){
  .nav{display:none}
  .menu-toggle{display:block}
  .projects-grid{gap:12px}
  .about-grid{grid-template-columns:1fr}
  .avatar{width:96px;height:96px}
  .avatar-large{width:160px;height:160px}
}

/* Subtle entrance animations */
.hero-text, .hero-card{opacity:0;transform:translateY(12px);animation:fadeUp .9s forwards}
.hero-text{animation-delay:.15s}
.hero-card{animation-delay:.25s}

@keyframes fadeUp{to{opacity:1;transform:none}}

/* Decorative floating background shapes */
/* removed decorative background shapes to keep solid background */