html,body,h1,h2,h3,h4,h5,h6 {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

body {
  background: #f8f9fb;
  min-height: 100vh;
}


.resume-container {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.header-section {
  
  color: rgb(0, 0, 0);
  padding: 4rem 3rem;
  text-align: center;
}

.header-section h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  letter-spacing: -1px;
}

.header-section h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
  opacity: 0.9;
}

.contact-info {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(0, 0, 0);
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}

.content-section {
  padding: 3rem;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 2rem;
  position: relative;
  padding-left: 1rem;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  
  border-radius: 2px;
}

.job-card {
  background: rgb(253, 253, 253);
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.job-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  
}

.job-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.job-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 0.5rem 0;
}

.company-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #667eea;
  margin: 0 0 1rem 0;
}

.job-dates {
  font-size: 0.95rem;
  color: #7f8c8d;
  margin: 0 0 1.5rem 0;
  font-weight: 500;
}

.job-description {
  color: #34495e;
  line-height: 1.7;
  margin: 0;
}

.job-description ul {
  margin: 0;
  padding-left: 1.5rem;
}

.job-description li {
  margin-bottom: 0.5rem;
}

.skill-bar {
  background: #ecf0f1;
  border-radius: 25px;
  height: 8px;
  margin: 1rem 0;
  overflow: hidden;
}

.skill-fill {
  height: 100%;
  
  border-radius: 25px;
  transition: width 1s ease;
}

.skill-name {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.skill-percentage {
  font-size: 0.9rem;
  color: #7f8c8d;
  font-weight: 500;
}

.personal-section {
  
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.personal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.personal-content {
  color: #34495e;
  line-height: 1.7;
}

.project-card {
  background: white;
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.project-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 0.5rem 0;
}

@media (max-width: 768px) {
  .header-section {
    padding: 2rem 1.5rem;
  }

  .header-section h1 {
    font-size: 2.5rem;
  }

  .contact-info {
    gap: 1rem;
  }

  .content-section {
    padding: 2rem 1.5rem;
  }

  .job-card {
    padding: 1.5rem;
  }
}

/* ---- Blog styles (added) ---- */
.navbar { display:flex; gap:1rem; justify-content:center; padding:1rem; }
.navbar a { color:#2c3e50; text-decoration:none; font-weight:600; }
.navbar a:hover { text-decoration:underline; }

.blog-container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
.blog-article { background: white; border-radius: 14px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.blog-article h1 { margin-top: 0; }
.blog-meta { color:#7f8c8d; margin-bottom:1.5rem; font-weight:600; }

.blog-grid { 
  max-width: 1200px; margin: 0 auto; padding: 2rem;
  display: grid; gap: 1.25rem; 
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
}
.blog-tile { 
  background: white; border-radius: 16px; padding: 1.25rem; 
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; gap:.5rem;
}
.blog-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.12); }
.blog-tile .tag { font-size:.75rem; font-weight:700; opacity:.7; text-transform:uppercase; letter-spacing:.04em; }
.blog-tile h3 { margin:.25rem 0; }
.blog-tile .date { color:#7f8c8d; font-size:.9rem; }
.blog-tile a { text-decoration:none; color:inherit; }
.blog-tile .arrow { margin-top:auto; font-weight:700; }


/* ---- Data table styles ---- */
table.data-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.98rem; }
.data-table th, .data-table td { border: 1px solid #e5e7eb; padding: 0.65rem 0.8rem; text-align: left; vertical-align: top; }
.data-table th { background: #f3f4f6; font-weight: 600; }
.data-table caption { text-align: left; font-weight: 700; margin-bottom: .5rem; color:#374151; }

/* ---- Links ---- */
.blog-article a { color: #2563eb; text-decoration: underline; }
.blog-article a:hover { text-decoration: none; }

/* ---- Blog container keeps neutral card look ---- */
.blog-article { background: #ffffff; }