:root {
  --bg: #0a0a0a;
  --surface: #111111;
  --text: #f5f5f5;
  --muted: #bdbdbd;
  --primary: #E50914; /* Netflix red */
  --icon: #d4af37; /* Gold for all icons */
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
  --content: 1120px;
}

html, body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
body { background-color: var(--bg) !important; color: var(--text) !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", Inter, sans-serif;
  letter-spacing: -0.01em;
}

.btn.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: none; /* keep plain, no glow */
  transition: background-color .18s ease, transform .18s ease;
}
.btn.btn-primary:hover { transform: translateY(-2px); }

.btn.btn-outline-danger {
  border-radius: 10px;
}

.card {
  border-radius: var(--radius);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover { transform: translateY(-3px); }

/* Subtle reveal animation */
.reveal { opacity: 0; transform: translateY(8px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .24s ease, transform .24s ease; }

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

/* Accessibility and reduced motion */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Optional: make navbar resume link look like a button */
.nav-resume-btn { padding: 6px 12px; border-radius: 10px; }

/* Remove background images and enforce flat monochrome surfaces */
.header { background-image: none !important; background: #000000 !important; }
.navbar, .navbar.bg-dark, .bg-dark { background-color: #0b0b0b !important; }
.bg-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #ffffff !important; }

/* Replace any theme pink/gold accents */
.text-danger { color: var(--primary) !important; }
.bg-danger, .badge-danger { background-color: var(--primary) !important; }
.btn-danger { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.brand-subtitle, .text-warning { color: var(--muted) !important; }
.navbar-light .navbar-nav .nav-link { color: #d1d5db !important; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus { color: #ffffff !important; }
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link { color: var(--primary) !important; }
.section.bg-white { background-color: #0f0f0f !important; }
.footer { background-color: #0f0f0f !important; }

.card { background-color: #0f0f0f; border: 1px solid #1f2937; }
.contact .contact-info-card, .contact .contact-form-card {
  background: #0f0f0f !important;
  color: var(--text) !important;
  border: 1px solid #1f2937 !important;
}
.contact .contact-title { color: #ffffff !important; }
.contact .text-muted { color: var(--muted) !important; }
.contact i, .contact .icon-md { color: var(--icon) !important; }
.contact #map { background: #0f0f0f !important; background-image: none !important; }

/* Portfolio filters: keep gold labels, active pill in red */
.filters a.active { background-color: var(--primary) !important; border-color: var(--primary) !important; color: #ffffff !important; }
.filters a:not(.active) { color: #d1d5db !important; }



.btn.btn-outline-danger { border-color: var(--primary); color: var(--primary); }
.btn.btn-outline-danger:hover { background: var(--primary); color: #ffffff; }

/* Icons: make all icon glyphs gold */
i[class^="ti-"], i[class*=" ti-"], .icon-md, .icon-lg { color: var(--icon) !important; }

/* Social icons */
.social-icon { color: var(--icon); background: #171717; }
.social-icon:hover { background: var(--icon); color: #000; }


/* Skills grid */
.skills-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.skill-card { background: #0f0f0f; border: 1px solid #1f2937; border-radius: 10px; padding: 12px; }
.skill-title { font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.skill-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-badge { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #151515; border: 1px solid #262626; color: #d3d3d3; }

/* Brand logo row for skills */
.brand-logos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand-logos img { width: 24px; height: 24px; filter: none; }
.brand-logos img.logo-mono { 
  /* tint black monochrome SVGs to gold for contrast on dark bg */
  filter: brightness(0) saturate(100%) invert(73%) sepia(59%) saturate(535%) hue-rotate(9deg) brightness(98%) contrast(91%);
}


/* Text fallback for missing/broken logos */
.logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 10px;
  line-height: 1;
  color: var(--primary);
  background: #151515;
  border: 1px solid var(--primary);
  border-radius: 4px;
  text-transform: none;
  padding: 2px;
}

/* Readable text label when a logo asset is unavailable */
.logo-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

/* Badge card titles in the Certificates/Badges section */
#service .card-title { color: var(--primary) !important; }

/* Move hero content slightly up */
.header .header-content { top: 30% !important; }

/* Section underline (was pink) -> use primary red */
.line { background-color: var(--primary) !important; }

/* Make category titles in Skills a bit brighter */
.skills-grid .skill-title { color: #f0f0f0; }

/* Utility classes extracted from inline styles */
.mt-12 { margin-top: 12px; }
.gap-12 { gap: 12px; }
.flex-wrap { flex-wrap: wrap; }
.flex { display: flex; }
.ml-8 { margin-left: 8px; }
.mb-10 { margin-bottom: 10px; }
.mt-6 { margin-top: 6px; }
.gap-8 { gap: 8px; }

/* Right-side fixed badge (Journey button) - overrides moved to below */

/* Hide navbar avatar photo */
.navbar .brand .brand-img {
  display: none;
}

/* Journey badge on the right side */
.btn-component-right {
  left: auto !important;
  right: -200px !important;
  border-radius: 3px 0 0 3px;
}
.btn-component-right.affix {
  left: auto !important;
  right: -100px !important;
}
.btn-component-right:hover {
  left: auto !important;
  right: 0 !important;
}
.btn-component-right i {
  margin-right: 15px;
}