/* ===== Reset & Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #111;
  line-height: 1.6;
}

/* ===== Header (full width, fixed) ===== */
header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: #4b0082;
  color: white;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
}

.logo {
  font-size: 20px;
  margin: 0;
}

/* ===== Nav ===== */
.nav {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.2s;
}

.nav a:hover { color: #d8b4fe; }

.nav a.active {
  color: #ffcc00;
  border-bottom: 2px solid #ffcc00;
}

/* Dropdown */
.dropdown { position: relative; }
.dropdown > a { cursor: pointer; }

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #4b0082;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.dropdown-menu li { padding: 5px 20px; }
.dropdown-menu a {
  color: white;
  text-decoration: none;
  display: block;
}
.dropdown-menu a:hover { background: rgba(255,255,255,0.1); }
.dropdown:hover .dropdown-menu { display: block; }

/* ===== Centralized Column ===== */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 20px 40px; /* extra top so content clears fixed header */
}

/* ===== Sections ===== */
section {
  margin: 60px 0;
  text-align: center;
}

section h2 {
  margin-bottom: 15px;
  color: #4b0082;
}

section p {
  max-width: 700px;
  margin: 0 auto 14px;
}

/* ===== Intro ===== */
.intro-section {
  background: #f5f5f5;
  padding: 80px 20px;
}

.intro-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  text-align: left;
}

.intro-image img {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #4b0082;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.intro-text { flex: 1; }
.intro-text h1 {
  font-size: 32px;
  margin-bottom: 15px;
  color: #4b0082;
}
.intro-text p {
  font-size: 18px;
  margin-bottom: 12px;
}

/* ===== Education ===== */
.education {
  margin-top: 30px;
  padding: 20px;
  background: white;
  border-left: 5px solid #4b0082;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.education h2 { margin-top: 0; }

/* ===== Horizontal Timeline ===== */
.timeline-horizontal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin: 60px auto 20px;
  max-width: 1000px;
  padding: 0 20px;
}

/* The line */
.timeline-horizontal::before {
  content: "";
  position: absolute;
  top: 40px; /* sits behind the dots */
  left: 20px;
  right: 20px;
  height: 3px;
  background: #9CA3AF;
  opacity: 0.7;
  z-index: 1;
}

/* Each item */
.timeline-item {
  text-align: center;
  position: relative;
  flex: 1;
  padding: 0 10px;
}

/* Year above */
.timeline-item time {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  color: #9CA3AF;
}

/* Dot on the line */
.timeline-item .dot {
  width: 16px;
  height: 16px;
  background: #9CA3AF;
  border-radius: 50%;
  margin: 0 auto 12px;
  position: relative;
  z-index: 2;
}

/* Title & text */
.timeline-item h4 {
  margin: 8px 0 6px;
  font-size: 1rem;
  color: var(--text);
}
.timeline-item p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 auto;
  max-width: 260px;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .timeline-horizontal {
    flex-direction: column;
    align-items: flex-start;
  }
  .timeline-horizontal::before {
    display: none; /* hide line on mobile */
  }
  .timeline-item {
    text-align: left;
    margin-bottom: 30px;
  }
  .timeline-item .dot {
    margin: 0 0 8px;
  }
}

#education h3 {
  margin-top: 60px;  /* pushes heading + its timeline down */
}


/* Mobile spacing tweak */
@media (max-width: 640px) {
  .timeline-vertical { padding-left: 24px; }
  .timeline-vertical::before { left: 10px; }
  .ti-item .ti-dot { left: 4px; }
}


/* ===== Resume ===== */
#resume {
  background: #f5f5f5;
  padding: 60px 20px;
}
#resume h2 { text-align: center; margin-bottom: 20px; }

.resume-embed {
  max-width: 900px;
  margin: 30px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background: white;
}
.resume-embed iframe {
  width: 100%;
  height: 80vh;
  border: none;
}

/* ===== Projects ===== */
.projects {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}
.project-card {
  background: white;
  padding: 20px;
  width: 250px;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.project-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* ===== Contact ===== */
.contact {
  background: #f8f8ff;
  padding: 40px 20px;
  border-radius: 8px;
}
.contact a {
  color: #4b0082;
  font-weight: bold;
  text-decoration: none;
}
.contact a:hover { text-decoration: underline; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  margin: 15px auto;
  padding: 12px 25px;
  background: #4b0082;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s, transform 0.1s;
}
.btn:hover {
  background: #6a0dad;
  transform: translateY(-1px);
}

/* ===== Modals ===== */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background: white;
  padding: 20px;
  max-width: 800px;
  width: 90%;
  border-radius: 8px;
  position: relative;
}
.scrollable { max-height: 80vh; overflow-y: auto; }
.close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* ===== Carousel ===== */
.modal-carousel {
  position: relative;
  width: 80%;
  margin: 20px auto;
  overflow: hidden;
}
.modal-carousel .carousel-images {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}
.modal-carousel img {
  width: 100%;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: contain;
}
.modal-carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
}
.modal-carousel .prev { left: 10px; }
.modal-carousel .next { right: 10px; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .intro-container { flex-direction: column; text-align: center; }
  .intro-image img { width: 200px; height: 200px; }
  .header-container { flex-wrap: wrap; justify-content: center; }
  .nav { flex-wrap: wrap; gap: 15px; }
}

/* Ensure anchored sections aren't hidden under fixed header */
section { scroll-margin-top: 120px; }  /* match your header height (~100–120px) */

section { scroll-margin-top: 120px; }

/* === SIMPLE FUTURISTIC THEME COLORS (no layout change) === */
:root {
  --bg: #0B0F19;        /* deep black-blue background */
  --surface: #111827;   /* card & section background */
  --text: #F9FAFB;      /* bright white text */
  --muted: #9CA3AF;     /* grey for subtitles */
  --accent: #2563EB;    /* electric blue */
  --accent-hover: #3B82F6;
  --border: #1F2937;    /* subtle dark grey border */
}

/* Apply background + text */
body {
  background-color: var(--bg);
  color: var(--text);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
}

/* Paragraphs, subtitles, muted text */
p, .subtitle, .muted, small {
  color: var(--muted);
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Cards or panels (keep your card layout) */
.card {
  background-color: #1a1a2e;
  color: var(--text);
  border: 1px solid var(--border);
}


/* Buttons */
button, .btn, input[type="submit"] {
  background-color: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background-color: var(--accent-hover);
  color: #fff;
}

/* Inputs & textareas */
input, textarea {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

/* Navbar/footer (if you use them) */
header, nav, footer {
  background-color: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

/* === OVERRIDE PURPLE → FUTURISTIC BLUE/BLACK/GREY === */

/* Headings */
h1, h2, h3, h4, h5, h6,
.section-title {
  color: #F9FAFB !important;   /* pure white */
}

/* Body text */
body, p, li, span, .section-subtitle, .muted, small {
  color: #D1D5DB !important;   /* soft grey-white for readability */
}

/* Cards / containers */
.card, .panel, .container, section {
  background-color: #111827 !important; /* dark grey surface */
  border: 1px solid #1F2937 !important;  /* subtle grey border */
  color: #F9FAFB !important;
}

/* Links */
a, .link {
  color: #2563EB !important;   /* electric blue */
}
a:hover, .link:hover {
  color: #3B82F6 !important;
}

/* Buttons */
button, .btn, input[type="submit"] {
  background-color: #2563EB !important;
  color: #fff !important;
  border: none !important;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background-color: #ffffff !important;
  color: #3B82F6 !important;   /* <-- add this line */
}

/* Inputs / textareas */
input, textarea {
  background-color: #111827 !important;
  color: #F9FAFB !important;
  border: 1px solid #1F2937 !important;
}
input:focus, textarea:focus {
  outline: none !important;
  border-color: #2563EB !important;
  box-shadow: 0 0 0 2px #2563EB !important;
}

/* Nav + Footer */
header, nav, footer {
  background-color: #0B0F19 !important;
  border-bottom: 1px solid #1F2937 !important;
  color: #F9FAFB !important;
}

/* Active nav link */
.nav a.active {
  background: linear-gradient(90deg, #2563EB, #3B82F6) !important;
  color: #fff !important;
  border: none !important;
}

/* === FIX PROJECT CARDS: dark surface + readable text === */
.project-card, .card, .projects .card, .projects .project-card {
  background-color: #2d3c5c !important;   /* dark surface */
  color: #F9FAFB !important;               /* white text */
  border: 1px solid #1F2937 !important;    /* subtle border */
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
}

/* Ensure inner text is readable even if old styles linger */
.project-card h3, .card h3,
.project-card h4, .card h4,
.project-card p,  .card p,
.project-card li, .card li,
.project-card .meta, .card .meta,
.project-card .subtitle, .card .subtitle {
  color: #E5E7EB !important;               /* light grey for body */
}
.project-card h3, .card h3,
.project-card h4, .card h4 { color: #F9FAFB !important; }  /* headings brighter */

/* Media area stays visible on dark */
.project-card .media, .card .media {
  background-color: #0F172A !important;
  border-bottom: 1px solid #1F2937 !important;
}

/* Buttons inside cards */
.project-card .btn, .card .btn {
  background-color: #2563EB !important;
  color: #fff !important;
  border: none !important;
}
.project-card .btn:hover, .card .btn:hover {
  background-color: #3B82F6 !important;
}

/* If your cards were forced white somewhere */
.project-card[style*="background"], .card[style*="background"] {
  background-color: #111827 !important;
  color: #F9FAFB !important;
}

/* === NAV ACTIVE HIGHLIGHT: clean blue underline (no glow) === */
.nav a { 
  background: transparent !important;
  color: #E5E7EB !important;
  border: 1px solid transparent !important;
  position: relative;
}
.nav a:hover { color: #FFFFFF !important; }

/* Active: thin electric-blue underline + slight tint */
.nav a.active {
  color: #FFFFFF !important;
}
.nav a.active::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -2px;
  height: 2px;
  background: #2563EB; /* electric blue */
  border-radius: 2px;
}

/* If you previously had a gradient pill, neutralize it */
.nav a.active,
.nav a.active:hover {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* === FIX DROPDOWN MENU TO MATCH THEME === */
.dropdown-menu {
  background: #111827 !important;   /* dark grey surface */
  border: 1px solid #1F2937 !important; /* subtle border */
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.45) !important;
  padding: 8px 0 !important;
}

/* Dropdown items */
.dropdown-menu li {
  padding: 6px 16px !important;
}
.dropdown-menu a {
  display: block;
  color: #E5E7EB !important;       /* light grey text */
  text-decoration: none !important;
  background: transparent !important;
}
.dropdown-menu a:hover {
  background: #1F2937 !important;  /* slightly lighter hover */
  color: #FFFFFF !important;
}

/* Optional: active/selected link inside dropdown */
.dropdown-menu a.active {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  position: relative;
}
.dropdown-menu a.active::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 2px;
  height: 2px;
  background: #2563EB;  /* electric blue underline */
  border-radius: 2px;
}

/* === widen main content area by ~20% === */
section, .container, .content-wrapper {
  max-width: 1080px !important;  /* was 1100px → 20% wider */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === BORDER CLEANUP (no layout changes) === */

/* Use a subtle dark divider color everywhere (kills white borders) */
:root { --border: #1F2937; } /* keep if already set */

/* Default all border colors to subtle dark */
*, *::before, *::after {
  border-color: var(--border) !important;
}

/* Remove borders from big wrappers so the page doesn't look boxed-in */
section, .container, .content, .content-wrapper, .grid, .grid-3, .row, .hero, .intro,
.pills, .tabs, .media, .timeline {
  border: none !important;
  box-shadow: none !important;
}

/* Keep borders only where they add structure */
.card, .project-card, .panel, .dropdown-menu, input, textarea, header, footer, nav {
  border: 1px solid var(--border) !important;
}

/* Make cards look clean without harsh outlines */
.card, .project-card, .panel {
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
  background-color: #111827 !important; /* consistent with theme */
  color: #E5E7EB !important;
}

/* Inputs stay clean but visible */
input, textarea, select {
  background-color: #111827 !important;
  color: #F3F4F6 !important;
}

/* Kill accidental borders/outlines on media */
img, video {
  border: none !important;
  outline: none !important;
}

/* Keep accessible focus rings (not white outlines) */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid #2563EB !important;  /* electric blue */
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Horizontal rules match the theme */
hr {
  border: none !important;
  height: 1px !important;
  background: var(--border) !important;
  opacity: 0.7 !important;
}

/* === NAV: no boxes, only underline on active === */
header nav a,
.nav a {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Active link = blue underline only (no box) */
header nav a.active,
.nav a.active {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  color: #FFFFFF !important;
}
header nav a.active::after,
.nav a.active::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -3px;
  height: 2px;
  background: #2563EB; /* electric blue */
  border-radius: 2px;
}

/* Remove white borderline engulfing all nav items
header nav ul,
.nav ul {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* (Keyboard) focus: use same underline, not a box
header nav a:focus-visible,
.nav a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
header nav a:focus-visible::after,
.nav a:focus-visible::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -3px;
  height: 2px;
  background: #2563EB;
  border-radius: 2px;
}
*/

/* === Modal contrast + compact spacing === */
.modal-content {
  background: var(--surface) !important;   /* dark card */
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  padding: 16px 18px 18px !important;      /* tighter */
}
.modal-content h3,
.modal-content h4 { 
  color: var(--text) !important; 
  margin: 6px 0 8px !important;
}
.modal-content p { 
  color: var(--muted) !important; 
  margin: 6px 0 10px !important;
}
.modal-content a { 
  color: var(--accent) !important; 
  text-decoration: underline; 
}

/* Lists inside modals: clean bullets, compact lines */
.modal-content ul.summary,
.modal-content ul.bullets {
  list-style: disc inside;
  margin: 6px 0 10px !important;           /* less vertical space */
  padding: 0 !important;
}
.modal-content ul.summary li,
.modal-content ul.bullets li {
  margin: 4px 0 !important;                /* compact items */
  line-height: 1.4 !important;
}

/* Keep content flushed near the top; reduce gap before carousel */
.modal-content .modal-carousel { 
  margin-top: 12px !important; 
}

/* Optional: ensure overlay is dark enough */
.modal { background: rgba(0,0,0,0.75) !important; }

.modal-content ul.summary,
.modal-content ul.bullets {
  list-style: none;   /* 🔹 remove bullets */
  margin: 6px 0 10px !important;
  padding: 0 !important;
}

.project-card {
  text-align: center;
}

.project-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* keep content at the top */
  align-items: center;         /* center text horizontally */
  text-align: center;
}

.project-card h3 { margin: 0 0 8px !important; } /* remove any big top margin */
.project-card p  { margin: 0 !important; }       /* tighten */

#projects .subhead {
  margin: 32px 0 12px;
  font-size: 1.125rem; /* ~18px */
  font-weight: 600;
  opacity: 0.95;
}

#projects .project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* responsive */
@media (max-width: 900px) {
  #projects .project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #projects .project-grid { grid-template-columns: 1fr; }
}

/* Personal -> Fitness & Recovery (modal5) */
#modal5 .modal-content { max-width: 960px; margin: 0 auto; }
#modal5 .fr-carousel { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#modal5 .fr-track {
  overflow: hidden; width: 100%; display: flex; transition: transform .35s ease;
}
#modal5 .fr-track img {
  min-width: 100%;
  height: auto;
  max-height: 65vh;        /* scales images */
  object-fit: contain;
  border-radius: 10px;
}
#modal5 .fr-nav {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  font-size: 22px; line-height: 1; cursor: pointer;
}
#modal5 .fr-nav:hover { background: rgba(255,255,255,.12); }
#modal5 .fr-caption { display: block; margin-top: 8px; opacity: .8; }

/* Get To Know Me — Card Grid */
.gtnm-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.card {
  background: #111111;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  border-color: rgba(124,58,237,.45);
}

.card .media {
  position: relative;
  aspect-ratio: 16/9; /* keeps all media same height */
  background: #000;
  overflow: hidden;
}
.card .media video,
.card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card .content {
  padding: 12px 14px 16px;
  color: #fff;
}
.card h3 {
  margin: 0 0 6px 0;
  font-size: 1.05rem;
}
.card p {
  margin: 0;
  opacity: .9;
  font-size: .95rem;
}

/* Responsive */
@media (max-width: 1100px) {
  .gtnm-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gtnm-cards { grid-template-columns: 1fr; }
}

/* === FINAL OVERRIDE: Get To Know Me cards match other cards === */
#get-to-know-me .card,
.section-get-to-know-me .card,
.gtnm-cards .card {
  background-color: #313b5a !important;   /* same surface */
  border: 1px solid #1F2937 !important;    /* same border */
  color: #E5E7EB !important;               /* readable text */
}
#get-to-know-me .card .media {
  background-color: #0F172A !important;    /* same media well */
  border-bottom: 1px solid #1F2937 !important;
}
#get-to-know-me .card h3,
#get-to-know-me .card p { color: #E5E7EB !important; }

/* Fix video sizing inside Get To Know Me cards */
.gtnm-cards .card .media video {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show whole video without cutting/zoom */
  border-radius: 0;      /* optional: keeps corners clean */
}

 
/* Force Capstone project card text to white 
#capstone-project + .projects .project-card h3,
#capstone-project + .projects .project-card p,
#capstone-project + .projects .project-card span,
#capstone-project + .projects .project-card li {
  color: #FFFFFF !important;
}

/* --- CAPSTONE: force white text only for this section/tile/modal --- */

/* The "Capstone" section heading 
h3#capstone-project.subhead {
  color: #FFFFFF !important;
}

/* The Capstone tile (the clickable card) 
#capstone-project + .projects .project-card h3,
#capstone-project + .projects .project-card p,
#capstone-project + .projects .project-card span,
#capstone-project + .projects .project-card li {
  color: #FFFFFF !important;
}

/* The Capstone modal content (overrides the grey modal paragraph rule) */
#modal4 .modal-content,
#modal4 .modal-content h3,
#modal4 .modal-content h4,
#modal4 .modal-content p,
#modal4 .modal-content li,
#modal4 .modal-content a,
#modal4 .modal-content span {
  color: #cec7c7 !important;
}


/* Left-align text inside project card modals */
.modal-content,
.modal-content p,
.modal-content li,
.modal-content span {
  text-align: left !important;
}

/* Keep project titles centered inside modals */
.modal-content h3,
.modal-content h4 {
  text-align: center !important;
}

/* Remove hover effect for the Capstone modal button */
#modal4 .btn:hover {
  background-color: #3B82F6 !important; /* or whatever its normal bg is */
  color: #fff !important;               /* keep text white */
  transform: none !important;           /* stop scaling/moving */
}