:root {
  --accent: #38BDF8;
  --primary-dark: #0A2342;
  --section-bg: #f1f5f9;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #f9f9f9;
  padding-top: 80px;
}
html { scroll-behavior: smooth; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  background: var(--primary-dark);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus {
  left: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

/* ---------- HERO ---------- */
.hero {
  background: linear-gradient(to right, #fff5f5, #ffe8e8);
  padding-top: 120px;
  padding-bottom: 80px;
}
.hero::before { content: none !important; }
.hero > .container { position: relative; z-index: 1; }
.hero img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
  transition: transform 0.3s ease;
}
.hero img:hover { transform: scale(1.03); }

/* ---------- GLOBAL ---------- */
.profile-img {
  width: 180px; height: 180px; object-fit: cover; border-radius: 50%;
  margin-bottom: 20px; border: 4px solid #fff; box-shadow: 0 5px 20px rgba(0,0,0,.1);
}

.section-title {
  font-weight: 700; margin-bottom: 40px; font-size: 2rem; position: relative;
  display: inline-block; color: var(--primary-dark);
}
.section-title::after {
  content: ''; display: block; width: 60px; height: 4px; background-color: var(--accent);
  margin-top: 10px; border-radius: 2px;
}

section { padding: 60px 0; }
section { scroll-margin-top: 90px; }

.project-card {
  background: #fff; border: 1px solid #dee2e6; border-radius: 10px; padding: 20px;
  margin-bottom: 20px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.project-card:hover {
  transform: translateY(-4px); box-shadow: 0 6px 24px rgba(0,0,0,.08); border-color: var(--accent);
}

.tech-table { width: 100%; margin-top: 20px; }
.tech-table th, .tech-table td { padding: 8px 12px; border: 1px solid #dee2e6; text-align: left; }

footer { background-color: var(--primary-dark); color: #fff; padding: 30px 0; text-align: center; }

.navbar { padding-top: 14px; padding-bottom: 14px; }
.navbar-brand { font-weight: 600; }
.navbar-brand img { transition: transform .2s ease; height: 72px; }
.navbar-brand img:hover { transform: scale(1.05); }

.nav-link {
  margin-left: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--accent) !important;
  background-color: rgba(56,189,248,.12);
  outline: none;
}
.nav-link.active {
  color: var(--accent) !important;
  font-weight: 700;
  background-color: rgba(56,189,248,.16);
}
.navbar-nav .nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(56,189,248,.35);
}

.btn-outline-light, .btn-primary { border-radius: 30px; padding: 10px 24px; font-weight: 600; }
.btn-outline-light:hover { background-color: var(--accent); border-color: var(--accent); color: #fff; }

.container    { max-width: 960px; }
.container-lg { max-width: 1140px; }
.bg-light     { background-color: var(--section-bg) !important; }

/* ---------- EDUCATION ---------- */
.education-stepper { display: flex; justify-content: flex-start; gap: 60px; flex-wrap: wrap; }
.education-stepper .step { max-width: 180px; }
.edu-logo {
  width: 80px; height: 80px; object-fit: contain; border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
}
.edu-title { font-weight: 600; color: var(--primary-dark); text-align: center; }
.edu-subtitle { font-size: .875rem; color: #555; margin-top: 4px; text-align: center; }

.hero .hero-illustration { margin-left: 100px; }
#about p { font-size: 1.05rem; line-height: 1.7; }
img.rounded-circle { border: 5px solid #fff; box-shadow: 0 6px 20px rgba(0,0,0,.15); margin-top: -10px; }

/* ---------- ABILITIES (logos) ---------- */
.ability-logo { transition: transform .3s ease; cursor: pointer; position: relative; }
.ability-logo:hover { transform: scale(1.2); }
.ability-logo[title]::after {
  content: attr(title); position: absolute; background: rgba(0,0,0,.75); color: #fff; font-size: 12px;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap; top: -35px; left: 50%;
  transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .2s ease-in-out;
}
.ability-logo:hover::after { opacity: 1; }

/* =========================================================
   EXPERIENCE — Simple, reliable two-column resume list
   ========================================================= */
.xp-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.xp-item {
  display: grid;
  grid-template-columns: 84px 1fr;   /* fixed logo column + flexible content */
  column-gap: 20px;
  align-items: center;               /* vertically centers the card with the logo */
}

.xp-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 10px 30px rgba(2,6,23,.04), 0 2px 6px rgba(2,6,23,.06);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.xp-logo img {
  width: 66%;
  height: 66%;
  object-fit: contain;
  filter: saturate(.95) contrast(1.05);
}

.xp-card {
  background: #fff;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(2,6,23,.04), 0 2px 6px rgba(2,6,23,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.xp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(2,6,23,.08), 0 4px 10px rgba(2,6,23,.08);
  border-color: rgba(56,189,248,.35);
}
.xp-card h5 { margin-bottom: 4px; font-weight: 600; }
.xp-dates { margin: 0 0 8px; color: #6b7280; font-size: 0.95rem; }
.xp-points {
  margin: 0;
  padding-left: 18px;
  color: #0f172a;
  line-height: 1.6;
}
.xp-points li { margin-bottom: 6px; }
.xp-points li:last-child { margin-bottom: 0; }

/* Mobile: stack nicely */
@media (max-width: 575.98px) {
  .xp-item { grid-template-columns: 56px 1fr; }
  .xp-logo { width: 56px; height: 56px; }
}

/* ---------- CONTACT ICON CARDS ---------- */
.contact-icons{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  align-items:stretch;
}

.ci-btn{
  flex:1 1 260px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(2,6,23,.04), 0 2px 6px rgba(2,6,23,.06);
  text-decoration:none;
  color:#0f172a; /* slate-900 */
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.ci-btn:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 18px 40px rgba(2,6,23,.08), 0 4px 10px rgba(2,6,23,.08);
}

.ci-btn img{
  width:36px; height:36px; display:block;
  filter:saturate(.98) contrast(1.05);
}

.ci-text span{
  display:block;
  font-weight:600;
  line-height:1.2;
}
.ci-text small{
  display:block;
  color:#6b7280; /* slate-500 */
  margin-top:2px;
  font-size:.95rem;
}

.ci-btn:hover .ci-text span{
  color:var(--accent);
}

.contact-form-card{
  margin-top:32px;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:16px;
  padding:20px 24px;
  box-shadow:0 10px 30px rgba(2,6,23,.04), 0 2px 6px rgba(2,6,23,.06);
}
.contact-form-card .form-label{
  font-weight:600;
  color:#0f172a;
}

/* Small screens: tighten spacing a bit */
@media (max-width: 575.98px){
  section { padding: 42px 0; }
  .hero { padding-top: 90px; padding-bottom: 60px; }
  .hero .hero-illustration { margin-left: 0; max-height: 360px; }
  .contact-icons{ gap:16px; }
  .ci-btn{ flex:1 1 100%; }
  .ability-logo{ width:42px !important; height:52px !important; }
}

@media (max-width: 767.98px) {
  .navbar { padding-top: 10px; padding-bottom: 10px; }
  .navbar-brand img { height: 60px; }
  .nav-link { margin-left: 0; padding: 11px 10px; }
}