/* === GLOBAL === */
:root{
  --bg:#f8fafc;
  --text:#1e293b;
  --accent:#10b981;
}
*{box-sizing:border-box}
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin:0;
  background-color: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{font-weight:700;margin:0}
section{scroll-margin-top:80px;padding-left:0;padding-right:0}

/* NAVBAR */
.navbar { transition: background-color .25s ease, box-shadow .25s ease; }
.navbar.scrolled { background-color: #0b1220 !important; box-shadow: 0 6px 20px rgba(2,6,23,0.5); }
.navbar-brand{font-size:1.4rem; letter-spacing:1px}
.navbar-dark .nav-link{ color:#e2e8f0; transition: color .2s; padding:.5rem 0.75rem;}
.navbar-dark .nav-link:hover, .navbar-dark .nav-link.active{ color: var(--accent); font-weight:600; }

/* HERO */
.hero{
  background: linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff;
  padding-top:100px;
  padding-bottom:60px;
  text-align:center;
}
.hero-img{
  width:160px; height:160px; object-fit:cover; border:4px solid #fff; box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.hero .lead{opacity:.9}

/* ABOUT CARD */
.about-card{
  background: linear-gradient(135deg,#fef9e7,#fff7d6);
  border-radius:12px;
}
.about-card .card-title{font-size:1.6rem}
.about-card .card-text{line-height:1.6;color:#334155}

/* PROJECTS SLIDER */
.projects-slider {
  display:flex;
  gap:20px;
  overflow-x:auto;
  padding-bottom:10px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-top:6px;
}
.projects-slider::-webkit-scrollbar{ display:none; }

.project-card{
  min-width:280px;
  max-width:320px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
  flex-shrink:0;
}
.project-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(2,6,23,0.12) }
.project-img{ width:100%; height:180px; object-fit:cover; transition:transform .3s ease; display:block; }
.project-card:hover .project-img{ transform:scale(1.03) }
.project-body{ padding:14px 16px }
.project-body h4{ font-size:1.15rem; margin-bottom:8px }
.project-body p{ color:#475569; font-size:.95rem; margin:0 0 8px }

/* SKILLS */
.skill { margin-bottom:18px; }
.skill .progress {
  height:26px;
  background:#e6eef4;
  border-radius:20px;
  overflow:hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}
.progress-bar{
  height:26px;
  width:0;
  transition: width 1.4s cubic-bezier(.2,.9,.2,1);
  display:block;
  border-radius:20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Gradient colors */
.bg-gradient-success { background: linear-gradient(90deg,#10b981,#34d399); color:#fff; }
.bg-gradient-info    { background: linear-gradient(90deg,#0ea5e9,#38bdf8); color:#fff; }
.bg-gradient-warning { background: linear-gradient(90deg,#f59e0b,#fcd34d); color:#fff; }
.bg-gradient-primary { background: linear-gradient(90deg,#3b82f6,#60a5fa); color:#fff; }
.bg-gradient-danger  { background: linear-gradient(90deg,#ef4444,#f87171); color:#fff; }

/* EXPERIENCE TIMELINE */
.timeline li { border-left:3px solid var(--accent); padding-left:16px; position:relative; margin-bottom:26px; }
.timeline li::before{ content:""; width:12px; height:12px; background:var(--accent); border-radius:50%; position:absolute; left:-9px; top:6px; }

/* CONTACT */
#contact .card{ border-radius:12px; }
.contact-item{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; padding:10px 14px; border-radius:10px; background:#f1f5f9; transition:transform .2s, background .2s; }
.contact-item:hover{ transform:translateY(-4px); background: rgba(16,185,129,0.08); }
.contact-item .icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }

/* SOCIAL LINKS */
.social-link.modern{ display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:10px; background:#f1f5f9; color:var(--text); transition:transform .2s, background .2s; }
.social-link.modern:hover{ transform:translateY(-5px) scale(1.05); background:var(--accent); color:#fff; }

/* FOOTER */
footer{ background:#0f172a; color:#94a3b8; padding:14px 0; }

/* BACK TO TOP */
#backToTopBtn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  width:48px; height:48px; border-radius:50%;
  border:none; outline:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent); color: #fff; font-size:20px;
  box-shadow:0 8px 20px rgba(2,6,23,0.18);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s;
}
#backToTopBtn.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* NAVBAR LINK ACTIVE underline */
.navbar-dark .nav-link::after {
  content:"";
  display:block;
  height:2px; width:0; background:var(--accent); transition:width .25s;
  margin-top:6px;
}
.navbar-dark .nav-link:hover::after, .navbar-dark .nav-link.active::after { width:100%; }

/* SMALL SCREEN TWEAKS */
@media (max-width: 992px) {
  .projects-slider{ gap:14px }
  .project-card{ min-width:84%; max-width:84% }
}

@media (max-width: 768px) {
  .hero { padding-top:90px; padding-bottom:40px; }
  .hero-img{ width:120px; height:120px; }
  header .btn{ min-width:unset; width:100%; }
  .about-card{ padding:1.2rem; }
  .project-img{ height:160px }
  .skill .progress{ height:22px }
  .social-link.modern{ width:44px; height:44px }
}

@media (max-width: 576px) {
  .navbar-brand{ font-size:1.15rem }
  .project-card{ min-width:92%; max-width:92% }
  .project-img { height:150px; }
}