:root {
	--custom-dark: #003D4A;
	--custom-primary: #01CB81;
	--custom-secondary: #F0F0F0;
	--custom-light: #E1F1E7;
	--custom-menu: #AEC9BA;
  }

  /* --- Override Bootstrap Variables --- */
  body {
	background-color: var(--custom-secondary); /* Use secondary as main page background */
  }
  
  .bg-dark {
	background-color: var(--custom-dark) !important;
  }
  .bg-primary {
	background-color: var(--custom-primary) !important;
  }
  .bg-secondary {
	background-color: var(--custom-secondary) !important;
  }
  .bg-light {
	 background-color: var(--custom-light) !important;
  }
  .text-primary {
	 color: var(--custom-primary) !important;
  }
  .text-dark {
	 color: var(--custom-dark) !important;
  }
  .border-primary {
	  border-color: var(--custom-primary) !important;
  }
  .btn-primary {
	background-color: var(--custom-primary);
	border-color: var(--custom-primary);
	color: #000; /* Dark text on primary button */
  }
  .btn-primary:hover {
	background-color: #00a268; /* A slightly darker shade for hover */
	border-color: #00a268;
	color: #fff;
  }

  /* --- Section Specific Styling --- */

  /* 1. Header */
  .header-brand-logo {
	color: var(--custom-primary);
  }
  .header-brand-text {
	color: var(--custom-dark);
	font-weight: 700;
  }

  /* 2. Navbar */
  .navbar-custom {
	  background-color: var(--custom-menu);
	  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .navbar-custom .navbar-nav .nav-link {
	  color: var(--custom-dark);
	  font-weight: 500;
	  padding: 0.8rem 1rem;
	  border-radius: 4px;
  }
  .navbar-custom .navbar-nav .nav-link:hover,
  .navbar-custom .navbar-nav .nav-link.active {
	  color: var(--custom-dark);
	  background-color: rgba(255, 255, 255, 0.7);
  }
  .navbar-custom .dropdown-menu {
	  background-color: var(--custom-menu);
	  border: none;
  }
  .navbar-custom .dropdown-item {
	  color: var(--custom-dark);
  }
  .navbar-custom .dropdown-item:hover {
	  background-color: var(--custom-primary);
	  color: var(--custom-dark);
  }

  /* 4. Table */
  .table-bordered th {
	  background-color: var(--custom-light);
	  color: var(--custom-dark);
  }

  /* 5. Footer */
  .footer-link {
	color: var(--custom-primary) !important;
	text-decoration: none;
  }
  .footer-link:hover {
	text-decoration: underline;
  }