/* Portfolio CSS extracted from index.html */

:root {
  --primary: #6c63ff;
  --secondary: #4a44c6;
  --accent: #ff6584;
  --dark: #2a2d3e;
  --light: #f8f9fa;
  --gray: #6c757d;
  --d-text: #ffffff;
  --d-muted: rgba(255, 255, 255, 0.8);
  --d-card: rgba(255, 255, 255, 0.05);
  --link-gradient-1: #ff4b91;
  --link-gradient-2: #ff9eaa;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.highlight-link {
  background: linear-gradient(
    120deg,
    var(--link-gradient-1),
    var(--link-gradient-2)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 4px;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

.highlight-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    120deg,
    var(--link-gradient-1),
    var(--link-gradient-2)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.highlight-link:hover {
  text-shadow: 0 0 12px rgba(255, 75, 145, 0.3);
}

.highlight-link:hover::after {
  transform: scaleX(1);
}

body {
  background-color: #1a1a2e;
  color: var(--d-text);
  line-height: 1.6;
}

/* account for fixed header so content isn't hidden */
body {
  padding-top: 80px;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header & Navigation */
header {
  /* stronger, semi-opaque dark header so it separates from the hero */
  background: linear-gradient(
    180deg,
    rgba(6, 8, 18, 0.92),
    rgba(8, 10, 20, 0.88)
  );
  box-shadow: 0 16px 50px rgba(2, 6, 20, 0.75);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1100;
  border-bottom: 1px solid rgba(124, 92, 255, 0.06); /* subtle purple tint */
  backdrop-filter: blur(6px);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0; /* slightly tighter to lift content below */
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  margin-left: 30px;
}

.nav-links a {
  text-decoration: none;
  color: var(--dark);
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--primary);
}

.mobile-menu {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobile nav active state (toggled by JS) */
.nav-links.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 64px;
  right: 16px;
  background: linear-gradient(
    180deg,
    rgba(6, 8, 18, 0.98),
    rgba(8, 10, 20, 0.95)
  );
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(2, 6, 20, 0.6);
  z-index: 1200;
}

.nav-links.active li {
  margin: 10px 0;
}

/* Hero Section */
.hero {
  padding: 150px 0 100px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about-text {
  padding: 15px;
}

.hero-text {
  flex: 1;
  padding-right: 40px;
}

.hero-image {
  flex: 1;
  text-align: center;
}

.profile-img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: profile-pop 2s cubic-bezier(0.23, 1, 0.32, 1) 1;
  transition: transform 0.4s;
}

.profile-img:hover {
  transform: scale(1.05) rotate(-2deg) translateY(-8px);
  box-shadow: 0 20px 40px rgba(108, 99, 255, 0.15);
}

@keyframes profile-pop {
  0% {
    transform: scale(0.7) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.1) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  color: var(--dark);
}

.hero p {
  font-size: 1.2rem;
  color: var(--gray);
  margin-bottom: 30px;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: var(--primary);
  color: white;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--secondary);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  margin-left: 15px;
}

.btn-outline:hover {
  background-color: var(--primary);
  color: white;
}

/* Sections */
section {
  padding: 100px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 2.5rem;
  color: var(--d-text);
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 4px;
  background-color: var(--primary);
  border-radius: 2px;
}

.section-title p {
  color: var(--d-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* About Section */
.about-content {
  display: flex;
  align-items: center;
  gap: 50px;
}

.about-text {
  flex: 1;
}

@media (max-width: 768px) {
  .about-content {
    flex-direction: column;
    gap: 30px;
  }

  .about-text {
    width: 100%;
    text-align: center;
  }
}

.about-text h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #e6e9f7;
}

.about-text p {
  margin-bottom: 20px;
  color: var(--gray);
}

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.stat {
  flex: 1;
  min-width: 150px;
  text-align: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  color: var(--d-text);
}

.stat i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 10px;
}

.stat h4 {
  font-size: 1.5rem;
  color: var(--d-text);
  margin-bottom: 5px;
}

.stat p {
  font-size: 0.9rem;
  color: var(--gray);
}

/* Skills Section */
.skills-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.skill-category {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  padding: 30px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  animation: fadeInUp 0.6s forwards;
}

.skill-category:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.skill-category h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--d-text);
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 10px;
}

.skill-category h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
  transition: width 0.3s ease;
}

.skill-category:hover h3::after {
  width: 100%;
}

.skill-category h3 i {
  margin-right: 10px;
  color: var(--primary);
  transition: transform 0.3s ease;
}

.skill-category:hover h3 i {
  transform: scale(1.2) rotate(360deg);
}

.skill-item {
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
  animation-delay: calc(var(--item-index, 0) * 0.1s);
}

.skill-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--d-text);
  font-weight: 500;
}

.skill-info span {
  text-shadow: 0 0 10px rgba(108, 99, 255, 0.3);
}

.skill-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 4px;
  transform: translateX(-100%);
  animation: slideRight 1s forwards;
  animation-delay: calc(var(--item-index, 0) * 0.2s);
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Experience Section */
.timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  display: block; /* use block so child items can be aligned left/right */
}
/* clearfix for floated timeline items */
.timeline::after {
  content: "";
  display: table;
  clear: both;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: calc(100% - 80px);
  background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: calc(50% - 20px); /* narrower gap so cards sit closer to center */
  clear: both;
  margin: 18px 0;
  padding: 0;
}

/* Even items on the left */
.timeline-item:nth-child(even) {
  float: left;
  padding-left: 8px;
}

/* Odd items on the right */
.timeline-item:nth-child(odd) {
  float: right;
  padding-right: 8px;
}

/* Position the date badge toward the central line: for left items place it on the right edge of the card, for right items place it on the left edge */
.timeline-item:nth-child(even) .timeline-date {
  left: auto;
  right: -10px;
}

.timeline-item:nth-child(odd) .timeline-date {
  right: auto;
  left: -10px;
}

/* Make specific items (2 - Graphic Designer, 4 - UNICEF Award) sit closer to the center
   and force their date badge to the left side (inner edge). These rules apply on larger screens
   and will be overridden by mobile media queries. */
.timeline-item:nth-child(2),
.timeline-item:nth-child(4) {
  width: calc(
    50% - 6px
  ); /* slightly wider so right/left edge moves toward center */
}

.timeline-item:nth-child(2) .timeline-date,
.timeline-item:nth-child(4) .timeline-date {
  left: -10px !important;
  right: auto !important;
}

.timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline-dot {
  position: absolute;
  right: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  border: 4px solid var(--d-card);
  box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.2);
  transition: all 0.3s ease;
}

.timeline-item:nth-child(even) .timeline-dot {
  left: -13px;
  right: auto;
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(108, 99, 255, 0.3);
}

.timeline-content {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  padding: 35px 25px 25px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: calc(100% - 40px);
  max-width: 520px; /* limit content width so cards are visually equal */
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.timeline-header {
  margin-bottom: 20px;
}

.timeline-content h3 {
  color: var(--d-text);
  font-size: 1.5rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.timeline-content h4 {
  color: var(--primary);
  font-size: 1.1rem;
  margin-bottom: 15px;
  font-weight: 500;
}

.timeline-content p {
  color: var(--d-muted);
  margin-bottom: 15px;
  line-height: 1.6;
}

.timeline-date {
  position: absolute;
  top: -10px;
  left: -15px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transform: translateY(-50%);
  box-shadow: 0 5px 15px rgba(108, 99, 255, 0.2);
  z-index: 2;
  white-space: nowrap;
}

.timeline-stats {
  display: flex;
  gap: 15px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.stat-item i {
  color: var(--primary);
  font-size: 1.2rem;
}

.stat-item .count {
  color: var(--d-text);
  font-weight: 600;
  font-size: 1.1rem;
}

.stat-item span {
  color: var(--d-muted);
  font-size: 0.9rem;
}

@media (max-width: 992px) {
  .timeline {
    padding: 30px 15px;
  }

  .timeline::before {
    left: 30px;
  }

  .timeline-item {
    width: 100%;
    float: none; /* remove floats on tablet/mobile */
    padding-left: 60px;
    padding-right: 15px;
    margin: 50px 0;
  }

  .timeline-item:nth-child(even) {
    padding-left: 60px;
    padding-right: 15px;
  }

  .timeline-dot {
    left: 17px;
    right: auto;
  }

  .timeline-item:nth-child(even) .timeline-dot {
    left: 17px;
  }

  .timeline-date {
    top: -25px;
    left: 60px !important;
    right: auto !important;
    transform: none;
  }

  .timeline-stats {
    flex-wrap: wrap;
    gap: 10px;
  }

  .stat-item {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }

  /* Make experience cards uniform on tablet & mobile */
  .timeline-item {
    width: 100%;
    float: none; /* ensure single-column flow */
    padding-left: 0;
    padding-right: 0;
    margin: 20px 0;
    display: flex;
    justify-content: center; /* center the card */
  }

  .timeline-content {
    width: calc(100% - 30px);
    max-width: none;
    box-sizing: border-box;
    height: 320px; /* fixed, uniform height for responsive */
    min-height: 320px;
    padding: 18px;
    display: flex;
    flex-direction: column;
  }

  /* Let the paragraph area grow and scroll if too long */
  .timeline-content p {
    flex: 1 1 auto;
    overflow: auto;
    margin-bottom: 10px;
  }
}

@media (max-width: 576px) {
  .timeline-item {
    margin: 45px 0;
    padding-left: 45px;
  }

  .timeline-content {
    height: auto;
    min-height: 320px;
    max-height: none;
    width: 100%;
    padding: 20px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .timeline-date {
    font-size: 0.85rem;
    padding: 6px 12px;
    left: 45px !important;
    top: -15px;
  }
  .timeline-item .infographic {
    display: none;
  }

  .timeline-header {
    margin-bottom: 15px;
  }

  .timeline-content h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    line-height: 1.3;
  }

  .timeline-content h4 {
    font-size: 0.95rem;
    margin-bottom: 8px;
    line-height: 1.3;
  }

  .timeline-content p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 12px;
    overflow: visible;
    word-wrap: break-word;
  }

  .timeline-stats {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .stat-item {
    width: 100%;
    padding: 8px;
    margin-bottom: 5px;
  }

  .stat-item .count {
    font-size: 0.95rem;
  }

  .stat-item span {
    font-size: 0.85rem;
  }

  .timeline::before {
    left: 22px;
  }

  .timeline-dot {
    left: 10px;
    width: 24px;
    height: 24px;
  }
}
/* Portfolio Section */
.portfolio-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-btn {
  padding: 8px 20px;
  background-color: white;
  border: 1px solid #e9ecef;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn.active,
.filter-btn:hover {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  align-items: stretch;
}

.portfolio-item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  aspect-ratio: 4/3;
  height: auto;
  display: flex;
  flex-direction: column;
}

.portfolio-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
  display: block;
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(108, 99, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  text-align: center;
  transition: opacity 0.5s;
  padding: 20px;
  text-align: center;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-item:hover .portfolio-img {
  transform: scale(1.1);
}

.portfolio-overlay h3 {
  color: white;
  margin-bottom: 10px;
}

.portfolio-overlay p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15px;
}

/* Contact Section */
.contact-container {
  display: flex;
  gap: 50px;
}

.contact-info {
  flex: 1;
}

.contact-form {
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
  padding: 22px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(2, 6, 20, 0.45);
}

.contact-item {
  display: flex;
  align-items: center; /* align icon vertically with text */
  gap: 18px;
  padding: 18px 12px; /* added padding for breathing room */
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.01); /* subtle surface to separate items */
  border-radius: 10px;
}

.contact-icon {
  width: 56px;
  height: 56px;
  background-color: var(--primary);
  border-radius: 10px; /* square with rounded corners for a modern look */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem; /* consistent icon size */
}

.contact-details h3 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.contact-details p {
  color: var(--gray);
}

.form-group {
  margin-bottom: 16px;
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-control:focus {
  border-color: var(--primary);
  outline: none;
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

/* Tablet & Mobile: prevent contact info (email/URLs) from overflowing cards */
@media (max-width: 992px) {
  .contact-container {
    flex-direction: column;
    gap: 20px;
  }

  .contact-item {
    align-items: flex-start;
    gap: 12px;
  }

  .contact-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  .contact-details {
    flex: 1 1 auto;
    min-width: 0; /* allow children to break/wrap */
  }

  .contact-details h3 {
    font-size: 1rem;
    margin-bottom: 6px;
  }

  .contact-details p {
    white-space: normal; /* allow wrapping */
    overflow-wrap: anywhere; /* break long URLs/emails */
    word-break: break-word;
    margin-bottom: 6px;
  }
}

@media (max-width: 576px) {
  .contact-details p {
    font-size: 0.95rem;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* Footer */
footer {
  background-color: var(--dark);
  color: white;
  padding: 70px 0 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
}

.footer-col {
  flex: 1;
  padding: 8px 12px; /* breathing room inside each footer column */
}

.footer-col h3 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-col h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: var(--primary);
}

.footer-col p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  gap: 14px;
  margin-top: 12px; /* add spacing below the paragraph */
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  transition: all 0.3s;
}

/* prevent icons from shrinking inside flex containers */
.contact-icon,
.social-links a {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
}

.social-links a:hover {
  background-color: var(--primary);
  transform: translateY(-5px);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--primary);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* Demo Message */
.demo-message {
  background-color: var(--accent);
  color: white;
  padding: 15px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1001;
}

/* Responsive Design */
@media (max-width: 576px) {
  .timeline-item {
    padding-left: 40px;
    margin: 40px 0;
  }

  /* Mobile optimization for stats */
  .about-stats {
    flex-direction: column;
    gap: 15px;
  }

  .stat {
    min-width: 100%;
    padding: 15px;
  }

  .stat i {
    font-size: 1.75rem;
  }

  .stat h4 {
    font-size: 1.25rem;
  }

  /* Skills section mobile optimization */
  .skills-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .skill-category {
    padding: 20px;
  }

  .skill-category h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }

  .timeline::before {
    left: 15px;
  }

  .timeline-dot {
    left: 2px !important;
    width: 24px;
    height: 24px;
  }

  .timeline-date {
    left: 50px !important;
    font-size: 0.85rem;
    padding: 5px 10px;
  }

  .timeline-content {
    padding: 15px;
    margin-top: 30px;
  }

  .timeline-content h3 {
    font-size: 1.2rem;
  }

  .timeline-content h4 {
    font-size: 0.95rem;
  }

  .timeline-content p {
    font-size: 0.9rem;
  }

  .badge {
    padding: 8px;
  }

  .badge i {
    font-size: 1rem;
  }

  .badge .stat {
    font-size: 0.85rem;
  }
}

@media (max-width: 992px) {
  /* Experience section mobile adjustments */
  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 50px;
    padding-right: 10px;
  }

  .timeline-item:nth-child(even) {
    padding-left: 50px;
    padding-right: 10px;
  }

  .timeline-dot {
    left: 7px !important;
    right: auto !important;
  }

  .timeline-date {
    left: 70px !important;
    right: auto !important;
    top: -30px;
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .timeline-content {
    width: 100%;
    margin-left: 0;
    margin-top: 35px;
    padding: 20px;
  }

  .timeline-content::before {
    display: none;
  }

  .infographic {
    position: relative;
    top: 0;
    right: 0;
    margin-top: 15px;
    justify-content: flex-start;
  }

  .badge {
    padding: 10px;
    min-width: auto;
  }

  .badge .stat {
    font-size: 0.9rem;
  }

  .hero-content {
    flex-direction: column-reverse;
    text-align: center;
  }

  .profile-img {
    width: 220px;
    height: 220px;
  }
  .hero-text {
    padding-right: 0;
    margin-top: 40px;
  }
  .about-content {
    flex-direction: column;
  }
  .contact-container {
    flex-direction: column;
  }
  .footer-content {
    flex-direction: column;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
  /* ensure mobile nav overlays full width when opened */
  .nav-links.active {
    left: 16px;
    right: 16px;
    top: 64px;
  }
  .timeline::before {
    left: 20px;
  }
  .timeline-item {
    flex-direction: column;
  }
  .timeline-date {
    text-align: left;
    padding-left: 50px;
    margin-bottom: 10px;
  }
  .timeline-content::before {
    left: -10px !important;
  }
  .hero h1 {
    font-size: 2.5rem;
  }

  /* keep contact and social icons legible on tablet/mobile */
  .contact-icon {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
  }
  .social-links a {
    width: 44px;
    height: 44px;
  }
}

/* Portfolio grid adjustments for tablet/mobile */
@media (max-width: 992px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .portfolio-item {
    height: 220px;
  }

  .timeline::before {
    left: 30px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 60px;
    padding-right: 15px;
    margin: 50px 0;
  }

  .timeline-item:nth-child(even) {
    padding-left: 60px;
    padding-right: 15px;
  }

  .timeline-content {
    padding: 25px 20px;
    margin-top: 15px;
  }

  .timeline-date {
    left: 0 !important;
    top: -25px;
  }

  .timeline-stats {
    flex-wrap: wrap;
  }

  .stat-item {
    flex: 1;
    min-width: 140px;
  }
}
@media (max-width: 480px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-item {
    height: 320px;
  }
  .profile-img {
    width: 180px;
    height: 180px;
  }

  /* ensure social icons and contact icons don't shrink on small screens */
  .contact-icon {
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
  }
  .social-links a {
    width: 42px;
    height: 42px;
  }
}

/* Infographic badges inside Experience timeline */
.infographic {
  position: absolute;
  top: -20px;
  right: -125px;
  display: flex;
  align-items: center;
}

.badge {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  padding: 5px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.12);
}

.badge i {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.badge .stat {
  font-weight: 700;
  font-size: 1rem;
}

.badge .stat .count {
  display: inline-block;
  min-width: 28px;
  text-align: right;
}

/* Adjust for smaller screens */
@media (max-width: 992px) {
  .btn-outline {
    margin-top: 10px;
    padding: 12px 30px;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .badge {
    padding: 10px;
    min-width: 64px;
  }
  .badge i {
    font-size: 1rem;
  }
  .badge .stat {
    font-size: 0.95rem;
  }
}

/* ---------------------------
   Dark theme + gradient
   Professional designer CV
   Appended overrides keep layout & responsiveness
   --------------------------- */

:root {
  --d-primary: #7c5cff; /* violet */
  --d-secondary: #5a48c8; /* deeper violet */
  --d-accent: #ff7a9b; /* warm pink accent */
  --d-bg-1: #020114; /* very deep near-black with subtle indigo */
  --d-bg-2: #071226; /* deep midnight navy */
  --d-surface: rgba(255, 255, 255, 0.03);
  --d-card: rgba(255, 255, 255, 0.04);
  --d-text: #e8f0ff;
  --d-muted: #9fb3d6;
}

/* Robust responsive fixes for timeline cards (tablet & mobile)
   Prevent flex-shrink causing very narrow cards and ensure proper wrapping. */
@media (max-width: 992px) {
  /* ensure each timeline item centers its card but doesn't let it shrink */
  .timeline-item {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  /* Force content box to a consistent width and prevent shrinking */
  .timeline-content {
    flex: 0 0 calc(100% - 40px) !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    width: 230px;
  }

  /* Ensure paragraphs wrap and are scrollable if very long */
  .timeline-content p {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    margin-bottom: 10px;
  }
}

@media (max-width: 576px) {
  /* same rules for smaller phones (stronger specificity) */
  .timeline-item {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }
  .timeline-content {
    flex: 0 0 calc(100% - 40px) !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* Page background: subtle diagonal gradient with faint texture-like tone */
body {
  /* layered background: subtle vignette over a deep diagonal gradient */
  background: radial-gradient(
      1200px 600px at 10% 10%,
      rgba(0, 0, 0, 0.14),
      transparent 20%
    ),
    linear-gradient(135deg, var(--d-bg-1) 0%, var(--d-bg-2) 100%);
  color: var(--d-text);
}

/* Make header translucent so background shows through */
header {
  background: linear-gradient(
    180deg,
    rgba(6, 8, 12, 0.74),
    rgba(6, 8, 12, 0.55)
  );
  box-shadow: 0 8px 36px rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(6px);
}

.logo {
  color: var(--d-primary);
}

.nav-links a {
  color: var(--d-text);
}
.nav-links a:hover {
  color: var(--d-primary);
}

/* Navigation background for desktop: deeper navy gradient with light-blue accent */
header nav {
  background: linear-gradient(
    30deg,
    #000000 0%,
    #2f4789 55%,
    rgb(4 57 88) 100%
  );
  padding: 20px 30px;
  border-radius: 20px;
}

/* Mobile menu background tweak */
.nav-links.active {
  background: linear-gradient(
    180deg,
    rgba(6, 8, 15, 0.95),
    rgba(10, 14, 25, 0.95)
  );
}

/* Ensure mobile nav uses the darker navy so it feels cohesive */
.nav-links.active {
  background: linear-gradient(180deg, #071026, #03061a);
}

/* Highlight 'Experience' nav item specifically to make it more attractive */
.nav-links li a[href="#experience"] {
  position: relative;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--lt-blue-2);
  box-shadow: 0 6px 22px rgba(63, 184, 255, 0.07);
}
.nav-links li a[href="#experience"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, var(--lt-blue), var(--lt-blue-2));
  border-radius: 2px;
}

/* Change 'About' nav link color to a subtle tint and About section heading */
.nav-links li a[href="#about"] {
  color: var(--d-muted);
  opacity: 0.95;
}

#about .section-title h2 {
  color: var(--lt-blue-2);
}

/* Hero: soften light areas to match dark theme */
.hero {
  background: transparent; /* let body gradient show */
}

.hero-text h1,
.section-title h2 {
  color: #ffffff;
}

.hero p,
.section-title p {
  color: var(--d-muted);
}

/* Cards & panels */
.stat,
skill-category,
contact-form,
portfolio-item,
about-text,
contact-info,
footer-col {
  background-color: var(--d-card);
  color: var(--d-text);
  box-shadow: 0 12px 40px rgba(2, 6, 23, 0.6);
}

.stat i {
  color: var(--d-primary);
}

.stat p,
.about-text p,
.footer-col p {
  color: var(--d-muted);
}

/* Buttons */
.btn {
  background: linear-gradient(90deg, var(--d-primary), var(--d-secondary));
  color: white;
  box-shadow: 0 12px 30px rgba(92, 64, 200, 0.14);
}
.btn-outline {
  background: transparent;
  border: 2px solid rgba(124, 92, 255, 0.12);
  color: var(--d-primary);
}
.btn-outline:hover {
  background: linear-gradient(90deg, var(--d-primary), var(--d-secondary));
  color: white;
}

/* Portfolio overlay uses strong, readable gradient */
.portfolio-overlay {
  background: linear-gradient(
    180deg,
    rgba(124, 92, 255, 0.95),
    rgba(90, 72, 200, 0.95)
  );
}

.portfolio-overlay h3 {
  color: #fff;
}
.portfolio-overlay p {
  color: rgba(255, 255, 255, 0.85);
}

/* Profile image adjustments for dark theme */
.profile-img {
  border: 4px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 18px 50px rgba(4, 8, 18, 0.7);
}

/* Forms */
.form-control {
  background: rgba(255, 255, 255, 0.02);
  color: var(--d-text);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.form-control::placeholder {
  color: rgba(232, 240, 255, 0.45);
}

/* Timeline vertical line color */
.timeline::before {
  background: linear-gradient(180deg, var(--d-primary), var(--d-secondary));
}

/* Footer */
footer {
  background: linear-gradient(180deg, #030615, #071021);
  color: var(--d-text);
}
.footer-links a {
  color: rgba(232, 240, 255, 0.75);
}
.footer-links a:hover {
  color: var(--d-primary);
}

/* Demo message style matching designer tone */
.demo-message {
  background: linear-gradient(90deg, var(--d-accent), var(--d-primary));
  color: white;
  box-shadow: 0 -8px 40px rgba(2, 6, 23, 0.6);
}

/* Badge contrast tweak */
.badge {
  background: linear-gradient(135deg, var(--d-primary), var(--d-secondary));
  color: white;
}

/* Accessibility tweaks: increase contrast for headings */
.stat h4,
.timeline-content h3,
.hero h1,
.section-title h2 {
  color: #ffffff;
}

/* Tablet view (max-width: 992px) */
@media (max-width: 992px) {
  .timeline-item .stat,
  .timeline-item .skill-category,
  .timeline-item .about-stats,
  .timeline-item .skills-container {
    display: none;
  }
}

/* Mobile view */
@media (max-width: 768px) {
  .nav-links.active {
    background: rgba(6, 8, 15, 0.98);
  }

  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }

  .portfolio-item {
    background-color: rgba(255, 255, 255, 0.02);
    aspect-ratio: 4/3;
    width: 100%;
  }

  /* Hide infographics in experience section */
  .timeline-item .stat,
  .timeline-item .skill-category,
  .timeline-item .about-stats,
  .timeline-item .skills-container {
    display: none;
  }

  /* Timeline mobile adjustments */
  .timeline::before {
    left: 30px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 60px;
    padding-right: 0;
    justify-content: flex-start;
  }

  .timeline-item:nth-child(even) {
    padding-left: 60px;
    justify-content: flex-start;
  }

  .timeline-dot {
    left: 17px;
    right: auto;
  }

  .timeline-item:nth-child(even) .timeline-dot {
    left: 17px;
  }
}

/* ---------------------------
   Animated gradient overlay + section animations
   Adds subtle light-blue motion and entry animations
   --------------------------- */

/* light-blue accent for highlights */
:root {
  --lt-blue: #6fd6ff; /* light cyan-blue */
  --lt-blue-2: #3fb8ff;
}

/* animated soft gradient that moves very slowly */
.animated-gradient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    120deg,
    rgba(63, 184, 255, 0.06) 0%,
    rgba(124, 92, 255, 0.04) 35%,
    rgba(63, 184, 255, 0.06) 70%
  );
  mix-blend-mode: overlay;
  animation: gradient-shift 18s linear infinite;
}

@keyframes gradient-shift {
  0% {
    transform: translateX(-10%);
  }
  50% {
    transform: translateX(10%);
  }
  100% {
    transform: translateX(-10%);
  }
}

/* subtle section reveal (fade + slide up) */
.section-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.section-anim.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* small element micro-interactions */
.btn,
.filter-btn,
.social-links a {
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.btn:hover,
.filter-btn:hover,
.social-links a:hover {
  transform: translateY(-4px);
}

/* accent borders / glows */
.nav-links a.active,
.filter-btn.active {
  box-shadow: 0 8px 28px rgba(63, 184, 255, 0.08),
    0 2px 10px rgba(124, 92, 255, 0.06);
  border-color: rgba(63, 184, 255, 0.18);
}

/* Use a thin light-blue underline for section titles */
.section-title h2::after {
  background: linear-gradient(90deg, var(--lt-blue), var(--lt-blue-2));
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-gradient {
    animation: none;
  }
  .section-anim {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .btn,
  .filter-btn,
  .social-links a {
    transition: none;
  }
}

/* ensure overlay sits behind content but above body background */
main,
header,
section,
footer {
  position: relative;
  z-index: 1;
}