/* Center the roadmap and constrain its width */


.process-map {
	max-width: 400px;    /* adjust as needed */
	margin: 0 auto;
  }
  
  /* Stack each step vertically & center text */
  .process-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
  }
  
  /* Number circle */
  .step-number {
	width: 48px;
	height: 48px;
	background: #12737F; /* teal accent */
	color: #fff;
	font-weight: bold;
	font-size: 1.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
  }
  
  /* Remove left-padding on the body text */
  .step-body {
	padding-left: 0;
  }
  
  /* Minor spacing tweaks */
  .step-body h4 {
	margin-bottom: 0.25rem;
  }
  .step-body p {
	margin-bottom: 0;
  }
  

  @media (max-width: 992px) {
	.d-grid[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
  @media (max-width: 576px) {
	.d-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  }
  

  /* Bigger logo */
#logo img {
	height: 48px;        /* default is ~32px */
	transition: height 0.3s ease;
  }
  
  /* Slightly bigger on desktop */
  @media (min-width: 992px) {
	#logo img {
	  height: 56px;
	}
  }

  /*-----------------------------------------------------------------------------------
  Dark Scheme - Noorcode Night Sky
-----------------------------------------------------------------------------------*/
.dark {
  /* Core surfaces */
  --cnvs-contrast-bg: #06080D;              /* deepest background */
  --cnvs-contrast-bg-offset: #0B1320;       /* offset sections/cards */

  /* Contrast scale (0 -> darkest, 1000 -> lightest)
     We keep enough steps so Canvas components behave. */
  --cnvs-contrast-0: #000000;
  --cnvs-contrast-100: #06080D;
  --cnvs-contrast-200: #0B1320;
  --cnvs-contrast-300: #14233A;
  --cnvs-contrast-400: #1C2B46;            /* in-between (generated) */
  --cnvs-contrast-500: #2A3A52;
  --cnvs-contrast-600: #51637F;            /* in-between (generated) */
  --cnvs-contrast-700: #8FA3BF;
  --cnvs-contrast-800: #C7D2E2;            /* in-between (generated) */
  --cnvs-contrast-900: #E6ECF3;
  --cnvs-contrast-1000: #FFFFFF;

  /* Inverted contrast (for elements that flip) */
  --cnvs-invert-contrast-0: #FFFFFF;
  --cnvs-invert-contrast-100: #E6ECF3;
  --cnvs-invert-contrast-200: #C7D2E2;
  --cnvs-invert-contrast-300: #8FA3BF;
  --cnvs-invert-contrast-400: #51637F;
  --cnvs-invert-contrast-500: #2A3A52;
  --cnvs-invert-contrast-600: #1C2B46;
  --cnvs-invert-contrast-700: #14233A;
  --cnvs-invert-contrast-800: #0B1320;
  --cnvs-invert-contrast-900: #06080D;
  --cnvs-invert-contrast-1000: #000000;

  /* RGB helpers used by some components */
  --cnvs-contrast-rgb: 230, 236, 243;      /* based on #E6ECF3 */
  --cnvs-invert-contrast-rgb: 6, 8, 13;    /* based on #06080D */

  /* Text + headings */
  --cnvs-heading-color: var(--cnvs-contrast-900);
  --bs-link-color: var(--cnvs-contrast-900);

  /* Major layout areas */
  --cnvs-topbar-bg: var(--cnvs-contrast-200);
  --cnvs-header-bg: var(--cnvs-contrast-100);
  --cnvs-header-sticky-bg: var(--cnvs-contrast-100);
  --cnvs-side-header-bg: var(--cnvs-contrast-100);
  --cnvs-header-floating-bg: var(--cnvs-contrast-100);
  --cnvs-primary-menu-submenu-bg: var(--cnvs-contrast-200);

  --cnvs-section-bg: var(--cnvs-contrast-bg-offset);
  --cnvs-footer-bg: var(--cnvs-contrast-bg-offset);

  /* Default text color in dark mode */
  color: var(--cnvs-contrast-800);
}

body.dark {
  --cnvs-body-bg: var(--cnvs-contrast-bg);
}

/* Footer + copyrights tuned for this palette */
.dark#footer .footer-widgets-wrap,
.dark #footer .footer-widgets-wrap {
  color: var(--cnvs-contrast-800);
}

.dark#footer .footer-widgets-wrap a,
.dark #footer .footer-widgets-wrap a {
  color: rgba(230, 236, 243, 0.78); /* softer Star White */
}

.dark#footer .footer-widgets-wrap a:hover,
.dark #footer .footer-widgets-wrap a:hover {
  color: var(--cnvs-contrast-1000);
}

.dark #copyrights,
#copyrights.dark {
  color: rgba(230, 236, 243, 0.45);
  background-color: rgba(6, 8, 13, 0.55);
}
