:root[data-bs-theme="light"] {
--bs-body-bg: #f6f8ff;
--bs-body-bg-rgb: 246, 248, 255;
--bs-body-color: #0b1220;              /* dark text on light */
--bs-body-color-rgb: 11, 18, 32;

--bs-tertiary-bg: #ffffff;
--bs-tertiary-bg-rgb: 255, 255, 255;

--bs-border-color: rgba(11, 18, 32, 0.14);
--bs-border-color-translucent: rgba(11, 18, 32, 0.12);

--bs-link-color: #0d6efd;
--bs-link-hover-color: #0a58ca;
}

/* -----------------------------
 Hero/banner assets & overlays
 (2 different banner images: light-ish vs dark)
------------------------------*/
:root {
/* Light (used by Bootstrap light + our light overrides will replace) */
--banner-image: url("../../../assets/001-001/images/1920/1080/veluwe-001-001.jpg");
--banner-overlay: linear-gradient(
  120deg,
  rgba(13, 110, 253, 0.22),
  rgba(108, 117, 125, 0.12)
);

--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: rgba(13, 110, 253, 0.18);
--card-overlay: linear-gradient(
  120deg,
  rgba(13, 110, 253, 0.14),
  rgba(32, 201, 151, 0.10)
);
}

/* Dark mode: different banner + overlay */
:root[data-bs-theme="dark"] {
--banner-image: url("../../../assets/001-001/images/1920/1080/veluwe-001-001-002.jpg");
--banner-overlay: linear-gradient(
  120deg,
  rgba(13, 110, 253, 0.34),
  rgba(0, 0, 0, 0.58)
);

--glass-bg: rgba(0, 0, 0, 0.38);
--glass-border: rgba(255, 255, 255, 0.14);
--card-overlay: linear-gradient(
  120deg,
  rgba(13, 110, 253, 0.18),
  rgba(255, 255, 255, 0.06)
);
}

/* light mode: punchier banner + overlay, still dark text */
:root[data-bs-theme="light"] {
--banner-image: url("../../../assets/001-001/images/1920/1080/veluwe-001-001.jpg");
--banner-overlay: linear-gradient(
  120deg,
  rgba(13, 110, 253, 0.18),
  rgba(255, 193, 7, 0.12)
);

--glass-bg: rgba(255, 255, 255, 0.78);
--glass-border: rgba(13, 110, 253, 0.18);
--card-overlay: linear-gradient(
  120deg,
  rgba(13, 110, 253, 0.12),
  rgba(255, 193, 7, 0.10)
);
}

.hero {
background-image: var(--banner-overlay), var(--banner-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 3.25rem 0 6.5rem;
border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.08);
}

.profile-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
position: relative;
overflow: hidden;
}
.profile-card::before {
content: "";
position: absolute;
inset: 0;
background: var(--card-overlay);
opacity: 0.9;
pointer-events: none;
}
.profile-card > .card-body {
position: relative;
z-index: 1;
}

.hero-card-wrap { transform: translateY(55px); }
.section-spacer { padding-top: 4.25rem; }

.subtle-ring {
box-shadow:
  0 18px 50px rgba(var(--bs-body-color-rgb), 0.12),
  0 0 0 1px rgba(var(--bs-body-color-rgb), 0.06);
}

.chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.625rem;
border: 1px solid rgba(var(--bs-body-color-rgb), 0.10);
border-radius: 999px;
background: rgba(var(--bs-body-bg-rgb), 0.6);
}

/* Hero buttons with automatic contrast */
.btn-hero {
border: 1px solid rgba(255, 255, 255, 0.35);
color: rgba(255, 255, 255, 0.95);
background: rgba(0, 0, 0, 0.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.btn-hero:hover { background: rgba(0, 0, 0, 0.26); }

:root[data-bs-theme="light"] .btn-hero,
:root[data-bs-theme="light"] .btn-hero {
border: 1px solid rgba(11, 18, 32, 0.20);
color: rgba(11, 18, 32, 0.95);
background: rgba(255, 255, 255, 0.40);
}
:root[data-bs-theme="light"] .btn-hero:hover,
:root[data-bs-theme="light"] .btn-hero:hover {
background: rgba(255, 255, 255, 0.55);
}

.profile-area {
  padding: 2rem;
  background:
  radial-gradient(900px circle at 10% 10%, rgba(13, 110, 253, 0.22), transparent 40%),
  radial-gradient(800px circle at 90% 20%, rgba(102, 16, 242, 0.20), transparent 42%),
  radial-gradient(900px circle at 40% 90%, rgba(32, 201, 151, 0.18), transparent 45%),
  linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
}


.profile-section {
  margin-bottom: 2rem;
}

.profile-section ul {
  margin: 0 0 0 2rem;
  padding: 0;
}
	
.profile-section ul li {
  margin: 0;
  padding: 0;
}

.profile-col-card-content {
  padding: 1rem;
}

.profile-col-card-content h1 {
  font-size: 1.1rem;
  margin: 0;
  padding: 24px 0 0 0;
  font-weight: 600;
  border-bottom: none;
}

.profile-col-card-content h2 {
   font-size: 1rem;
   margin: 0;
   padding: 0;
   font-weight: 400;
}

.profile-col-card-content h3 {
   font-size: 1rem;
   margin: 0;
   padding: 0;
   font-weight: 400;
}

.profile-col-card-content-skills {
   padding: 2rem 2rem 0 2rem;
}

.profile-col-card-content-skills h1 {
   font-size: 1.1rem;
   margin: 0;
   padding: 0;
   font-weight: 600;
}

.profile-col-card-content-skills h2 {
   font-size: 1rem;
   margin: 0 0 10px 0;
   padding: 0;
   font-weight: 400;
}

.profile-col-card-content-skills h2 {
   font-size: 1rem;
   margin: 0 0 2rem 0;
   padding: 0;
   font-weight: 400;
}

.profile-col-card-content-skills p:last-child {
  margin-bottom: 0 !important;
}

.profile-col-card-content-skills h3 {
   font-size: 1rem;
   margin: 0;
   padding: 0;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.45)
}

.mwd-about-content-01-01 .mwd-about-col-container {
	padding: 0 !important;
}

.mwd-about-content-01-01 .profile-col-card-content ul {
	position: relative;
	border-left: 2px solid #4e4e4e;
	padding: 0 0 10px 25px;
	margin-left: 5px;
}

.mwd-about-content-01-01 .profile-col-card-content ul:before,
.mwd-about-content-01-01 .profile-col-card-content ul:after {
	content: "";
	position: absolute;
}
.mwd-about-content-01-01 .profile-col-card-content ul:before {
	left: -7px;
	top: -8px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #58585a;
}

.mwd-about-content-01-01 .profile-col-card-content ul:after {
	left: -4px;
	bottom: 0;
	width: 6px;
	height: 6px;
	background: #58585a;
	border-radius: 50%;
}

.mwd-about-content-01-01 .profile-col-card-content ul li {
	position: relative;
	display: block;
}

.mwd-about-content-01-01 .profile-col-card-content ul li:before {
	content: "";
	position: absolute;
	left: -32px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background: #58585a;
	border-radius: 50%;
	border: 2px solid #f3f3f3;
}

.mwd-about-content-01-01 .profile-col-card-content ul li + li {
	margin-top: 20px;
}

.timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid var(--bs-border-color);
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}

.timeline-dot {
  position: absolute;
  left: -40px;
  top: 1.4rem;
  width: 0.9rem;
  height: 0.9rem;
  background-color: var(--bs-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bs-body-bg);
}

.timeline-content {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 1rem;
}

.timeline-content h5 {
  font-size: 1.2rem;
  margin: 0;
}

/* languages */

.lk-card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.lk-badge {
  font-weight: 600;
  letter-spacing: .2px;
}

.lk-progress {
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
}

.lk-progress .progress-bar {
  border-radius: 999px;
}