.resume-box {
  background-color: var(--surface-color); /* Slightly lighter background for contrast */
  border: 1px solid var(--border-color); /* Subtle border for definition */
  border-radius: 12px; /* Rounded corners for a modern look */
  padding: 30px; /* Inner spacing */
  margin-bottom: 25px; /* Space between boxes */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Deep shadow */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, background-color 0.3s ease; /* Smooth transitions */
}


.resume-title {
  text-align: left; /* Align left for a cleaner look within the column */
  color: var(--heading-color); /* Bright white for emphasis */
  margin-bottom: 30px; /* Space below the title */
  font-weight: 700; /* Bold for impact */
  font-size: 1.8rem;
  border-bottom: 2px solid var(--accent-color); /* Accent line for title */
  padding-bottom: 10px;
}

.resume-box:hover {
  transform: translateY(-5px); /* Slightly lift the box for a smooth effect */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 188, 212, 0.3); /* Softer glowing effect */
}

/* Light Mode Overrides */
.light-mode .resume-box {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.light-mode .resume-box:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 151, 167, 0.3);
}

/* Individual Item Styling */
.resume-item {
    border-left: 3px solid var(--border-color); /* Subtle vertical timeline line */
    position: relative;
    padding-left: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
}

/* Timeline Dot */
.resume-item::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--background-color);
    border: 3px solid var(--accent-color); /* Accent dot */
    transition: background-color 0.3s ease;
}

.resume-item h4 {
  color: var(--accent-color); /* Accent color for highlighting roles/degrees */
  margin-bottom: 5px; 
  font-size: 1.2rem;
  font-weight: 700;
}

.resume-item h5 {
  font-size: 1rem;
  padding: 4px 10px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%); /* Subtle background for dates */
  color: var(--contrast-color);
  border-radius: 5px;
}
.resume-item p {
  margin-bottom: 10px;
  color: var(--font-secondary); /* Subtle light gray for locations */
  font-style: italic;
  font-size: 1rem !important; /* Overriding index.php inline style */
}

.resume-item ul {
  padding-left: 20px; /* Indented bullet points */
  list-style-type: '— '; /* Modern dash bullets */
}

.resume-item ul li {
  margin-bottom: 8px; /* Space between bullet points */
  color: var(--font-primary); 
  font-size: 0.95rem;
}

/* Responsive adjustments for mobile view */
@media (max-width: 768px) {
  .resume-box {
    padding: 20px;
    margin-bottom: 20px;
  }
  .resume-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  .resume-item h4 {
    font-size: 1.1rem;
  }
  .resume-item h5 {
    font-size: 0.9rem;
  }
}