/* Change to a different green */
/* Darker text */
/* Lighter background */
/* Define SCSS variables for common color properties */
/* Define SCSS variables for common color properties */
:root {
  --ss-main-height: 38px;
}

.navbar-brand {
  --bs-navbar-brand-color: $light-background-text-color;
}
.navbar-brand:hover, .navbar-brand:focus {
  --bs-navbar-brand-hover-color: lighten($light-background-text-color, 10%);
}
.navbar-brand img {
  max-width: 70vw;
}
@media (min-width: 576px) {
  .navbar-brand img {
    max-width: 40vw;
  }
}
@media (min-width: 768px) {
  .navbar-brand img {
    max-width: 30vw;
  }
}
@media (min-width: 992px) {
  .navbar-brand img {
    max-width: 20vw;
  }
}
@media (min-width: 1200px) {
  .navbar-brand img {
    max-width: 15vw;
  }
}

.mailer .navbar-brand img {
  max-width: 50vw;
}

.nav-link {
  --bs-nav-link-color: $light-background-text-color;
}
.nav-link.show, .nav-link.active {
  --bs-navbar-active-color: lighten($light-background-text-color, 10%);
}
.nav-link:hover, .nav-link:focus {
  --bs-nav-link-hover-color: lighten($light-background-text-color, 10%);
}

.dropdown-item {
  --bs-dropdown-link-color: $light-background-text-color;
}

.host_community_logo {
  max-height: 5vh;
}

.navigation {
  --bs-navbar-padding-x: 0.5rem;
  --bs-navbar-padding-y: 0.5rem;
}

.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-check + .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible + .btn {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked:focus-visible + .btn {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: #42b983;
  --bs-btn-border-color: #42b983;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(94.35, 195.5, 149.6);
  --bs-btn-hover-border-color: rgb(84.9, 192, 143.4);
  --bs-btn-focus-shadow-rgb: 56, 157, 111;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(103.8, 199, 155.8);
  --bs-btn-active-border-color: rgb(84.9, 192, 143.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #42b983;
  --bs-btn-disabled-border-color: #42b983;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2e815c;
  --bs-btn-border-color: #2e815c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(39.1, 109.65, 78.2);
  --bs-btn-hover-border-color: rgb(36.8, 103.2, 73.6);
  --bs-btn-focus-shadow-rgb: 77, 148, 116;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(36.8, 103.2, 73.6);
  --bs-btn-active-border-color: rgb(34.5, 96.75, 69);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2e815c;
  --bs-btn-disabled-border-color: #2e815c;
}

.btn-success {
  --bs-btn-color: #000;
  --bs-btn-bg: #5debab;
  --bs-btn-border-color: #5debab;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(117.3, 238, 183.6);
  --bs-btn-hover-border-color: rgb(109.2, 237, 179.4);
  --bs-btn-focus-shadow-rgb: 79, 200, 145;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(125.4, 239, 187.8);
  --bs-btn-active-border-color: rgb(109.2, 237, 179.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #5debab;
  --bs-btn-disabled-border-color: #5debab;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #347c46;
  --bs-btn-border-color: #347c46;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(44.2, 105.4, 59.5);
  --bs-btn-hover-border-color: rgb(41.6, 99.2, 56);
  --bs-btn-focus-shadow-rgb: 82, 144, 98;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(41.6, 99.2, 56);
  --bs-btn-active-border-color: rgb(39, 93, 52.5);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #347c46;
  --bs-btn-disabled-border-color: #347c46;
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #C9B947;
  --bs-btn-border-color: #C9B947;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(209.1, 195.5, 98.6);
  --bs-btn-hover-border-color: rgb(206.4, 192, 89.4);
  --bs-btn-focus-shadow-rgb: 171, 157, 60;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(211.8, 199, 107.8);
  --bs-btn-active-border-color: rgb(206.4, 192, 89.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #C9B947;
  --bs-btn-disabled-border-color: #C9B947;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #BF4A47;
  --bs-btn-border-color: #BF4A47;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(162.35, 62.9, 60.35);
  --bs-btn-hover-border-color: rgb(152.8, 59.2, 56.8);
  --bs-btn-focus-shadow-rgb: 201, 101, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(152.8, 59.2, 56.8);
  --bs-btn-active-border-color: rgb(143.25, 55.5, 53.25);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #BF4A47;
  --bs-btn-disabled-border-color: #BF4A47;
}

.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(210.8, 211.65, 212.5);
  --bs-btn-hover-border-color: rgb(198.4, 199.2, 200);
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(198.4, 199.2, 200);
  --bs-btn-active-border-color: rgb(186, 186.75, 187.5);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(66.3, 69.7, 73.1);
  --bs-btn-hover-border-color: rgb(55.2, 58.8, 62.4);
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(77.4, 80.6, 83.8);
  --bs-btn-active-border-color: rgb(55.2, 58.8, 62.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

.btn-outline-primary {
  --bs-btn-color: #42b983;
  --bs-btn-border-color: #42b983;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #42b983;
  --bs-btn-hover-border-color: #42b983;
  --bs-btn-focus-shadow-rgb: 66, 185, 131;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #42b983;
  --bs-btn-active-border-color: #42b983;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #42b983;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #42b983;
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #2e815c;
  --bs-btn-border-color: #2e815c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2e815c;
  --bs-btn-hover-border-color: #2e815c;
  --bs-btn-focus-shadow-rgb: 46, 129, 92;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2e815c;
  --bs-btn-active-border-color: #2e815c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #2e815c;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #2e815c;
  --bs-gradient: none;
}

.btn-outline-success {
  --bs-btn-color: #5debab;
  --bs-btn-border-color: #5debab;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #5debab;
  --bs-btn-hover-border-color: #5debab;
  --bs-btn-focus-shadow-rgb: 93, 235, 171;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #5debab;
  --bs-btn-active-border-color: #5debab;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #5debab;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #5debab;
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: #347c46;
  --bs-btn-border-color: #347c46;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #347c46;
  --bs-btn-hover-border-color: #347c46;
  --bs-btn-focus-shadow-rgb: 52, 124, 70;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #347c46;
  --bs-btn-active-border-color: #347c46;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #347c46;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #347c46;
  --bs-gradient: none;
}

.btn-outline-warning {
  --bs-btn-color: #C9B947;
  --bs-btn-border-color: #C9B947;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #C9B947;
  --bs-btn-hover-border-color: #C9B947;
  --bs-btn-focus-shadow-rgb: 201, 185, 71;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #C9B947;
  --bs-btn-active-border-color: #C9B947;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #C9B947;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #C9B947;
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-color: #BF4A47;
  --bs-btn-border-color: #BF4A47;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #BF4A47;
  --bs-btn-hover-border-color: #BF4A47;
  --bs-btn-focus-shadow-rgb: 191, 74, 71;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #BF4A47;
  --bs-btn-active-border-color: #BF4A47;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #BF4A47;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #BF4A47;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}

.btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 56, 157, 111;
  text-decoration: underline;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}

.btn-lg {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-sm {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

:root,
[data-bs-theme=light] {
  --bs-primary: #42b983;
  --bs-secondary: #2e815c;
  --bs-success: #5debab;
  --bs-info: #347c46;
  --bs-warning: #C9B947;
  --bs-danger: #BF4A47;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #42b983;
  --bs-secondary: #2e815c;
  --bs-success: #5debab;
  --bs-info: #347c46;
  --bs-warning: #C9B947;
  --bs-danger: #BF4A47;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 66, 185, 131;
  --bs-secondary-rgb: 46, 129, 92;
  --bs-success-rgb: 93, 235, 171;
  --bs-info-rgb: 52, 124, 70;
  --bs-warning-rgb: 201, 185, 71;
  --bs-danger-rgb: 191, 74, 71;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: rgb(26.4, 74, 52.4);
  --bs-secondary-text-emphasis: rgb(18.4, 51.6, 36.8);
  --bs-success-text-emphasis: rgb(37.2, 94, 68.4);
  --bs-info-text-emphasis: rgb(20.8, 49.6, 28);
  --bs-warning-text-emphasis: rgb(80.4, 74, 28.4);
  --bs-danger-text-emphasis: rgb(76.4, 29.6, 28.4);
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: rgb(217.2, 241, 230.2);
  --bs-secondary-bg-subtle: rgb(213.2, 229.8, 222.4);
  --bs-success-bg-subtle: rgb(222.6, 251, 238.2);
  --bs-info-bg-subtle: rgb(214.4, 228.8, 218);
  --bs-warning-bg-subtle: rgb(244.2, 241, 218.2);
  --bs-danger-bg-subtle: rgb(242.2, 218.8, 218.2);
  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: rgb(179.4, 227, 205.4);
  --bs-secondary-border-subtle: rgb(171.4, 204.6, 189.8);
  --bs-success-border-subtle: rgb(190.2, 247, 221.4);
  --bs-info-border-subtle: rgb(173.8, 202.6, 181);
  --bs-warning-border-subtle: rgb(233.4, 227, 181.4);
  --bs-danger-border-subtle: rgb(229.4, 182.6, 181.4);
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #42b983;
  --bs-link-color-rgb: 66, 185, 131;
  --bs-link-decoration: underline;
  --bs-link-hover-color: rgb(52.8, 148, 104.8);
  --bs-link-hover-color-rgb: 53, 148, 105;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: rgb(255, 242.6, 205.4);
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(66, 185, 131, 0.25);
  --bs-form-valid-color: #5debab;
  --bs-form-valid-border-color: #5debab;
  --bs-form-invalid-color: #BF4A47;
  --bs-form-invalid-border-color: #BF4A47;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: rgb(42.5, 47.5, 52.5);
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: rgb(141.6, 213, 180.6);
  --bs-secondary-text-emphasis: rgb(129.6, 179.4, 157.2);
  --bs-success-text-emphasis: rgb(157.8, 243, 204.6);
  --bs-info-text-emphasis: rgb(133.2, 176.4, 144);
  --bs-warning-text-emphasis: rgb(222.6, 213, 144.6);
  --bs-danger-text-emphasis: rgb(216.6, 146.4, 144.6);
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: rgb(13.2, 37, 26.2);
  --bs-secondary-bg-subtle: rgb(9.2, 25.8, 18.4);
  --bs-success-bg-subtle: rgb(18.6, 47, 34.2);
  --bs-info-bg-subtle: rgb(10.4, 24.8, 14);
  --bs-warning-bg-subtle: rgb(40.2, 37, 14.2);
  --bs-danger-bg-subtle: rgb(38.2, 14.8, 14.2);
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: rgb(39.6, 111, 78.6);
  --bs-secondary-border-subtle: rgb(27.6, 77.4, 55.2);
  --bs-success-border-subtle: rgb(55.8, 141, 102.6);
  --bs-info-border-subtle: rgb(31.2, 74.4, 42);
  --bs-warning-border-subtle: rgb(120.6, 111, 42.6);
  --bs-danger-border-subtle: rgb(114.6, 44.4, 42.6);
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: rgb(141.6, 213, 180.6);
  --bs-link-hover-color: rgb(164.28, 221.4, 195.48);
  --bs-link-color-rgb: 142, 213, 181;
  --bs-link-hover-color-rgb: 164, 221, 195;
  --bs-code-color: rgb(230.4, 132.6, 181.2);
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: rgb(102, 77.2, 2.8);
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: rgb(117, 183, 152.4);
  --bs-form-valid-border-color: rgb(117, 183, 152.4);
  --bs-form-invalid-color: rgb(234, 133.8, 143.4);
  --bs-form-invalid-border-color: rgb(234, 133.8, 143.4);
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
}
body:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: repeat;
  opacity: 0.2;
  z-index: -1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif; /* Elegant font */
  letter-spacing: 1.25px; /* Slight letter spacing for better readability */
  margin-bottom: 20px;
}

p {
  line-height: 1.7; /* Increased line height for better readability */
  font-family: "Roboto", sans-serif; /* Clean body text font */
  margin-bottom: 20px;
}

input.form-control,
select.form-select,
div.form-select,
textarea.form-control {
  border-color: #2e815c;
}

#main-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633);
  color: #222;
}
#main-nav a {
  color: #222;
}
#main-nav .dropdown-menu {
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633);
}
#main-nav .dropdown-menu .dropdown-item:hover, #main-nav .dropdown-menu .dropdown-item:active {
  color: #222;
}

#app-footer {
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633);
  color: #222;
}
#app-footer a {
  color: #222;
}
#app-footer .dropdown-menu {
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633);
}
#app-footer .dropdown-menu .dropdown-item:hover, #app-footer .dropdown-menu .dropdown-item:active {
  color: #222;
}
#app-footer .navbar-text {
  color: #222;
}

.navbar-nav .nav-link {
  position: relative;
  color: #42b983;
  text-decoration: none; /* Remove default text underline */
  padding: 5px 10px;
  border-bottom: 4px solid transparent; /* Invisible border by default */
  transition: border-color 0.3s ease; /* Smooth transition for underline */
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  border-bottom: 4px solid #42b983; /* Add underline on hover/focus */
}

/* Animation keyframes for shrinking and growing */
@keyframes shrink-grow {
  0% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(0.8); /* Shrinks to 80% */
  }
  100% {
    transform: scale(1); /* Grows back to original size */
  }
}
/* Animation keyframes for shrinking and growing */
@keyframes shrink-grow-mild {
  0% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(0.95); /* Shrinks to 95% */
  }
  100% {
    transform: scale(1); /* Grows back to original size */
  }
}
.btn {
  transition: transform 0.3s ease;
}
.btn:hover {
  transform: scale(1.05); /* Slightly enlarges the button */
}

a i.fas, a i.fa {
  transition: transform 0.3s ease;
}
a i.fas:hover, a i.fa:hover {
  transform: scale(1.05); /* Slightly enlarges the button */
}

/* Custom Turbo Loading Bar Styles */
.turbo-progress-bar {
  height: 5px; /* Change the height of the loading bar */
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633); /* Change the color of the loading bar */
  transition: width 0.2s ease-out, opacity 0.2s ease-out; /* Smooth transitions */
}

/* Progress bar container (takes full width of the page) */
#custom-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%; /* Initial width (will expand as page scrolls) */
  height: 5px; /* Same height as Turbo's default bar */
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633); /* You can adjust this color to match your theme */
  z-index: 9999; /* Ensures it stays on top of other elements */
  transition: width 0.2s ease; /* Smooth progress bar transitions */
}

/* Links color fade */
a {
  transition: color 0.3s ease;
}

a:hover,
a.active {
  color: #5debab; /* Adjust hover color */
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.membership:hover,
.card.hover-effect:hover {
  transform: translateY(-10px); /* Lift the card on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Add shadow */
}

.content-block.content_hero .hero-background .hero-content .hero-heading {
  width: 100%;
}
@media screen and (max-width: 431px) {
  .content-block.content_hero .hero-background .hero-content .hero-heading {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 431px) {
  .content-block.content_hero .hero-background .hero-content .hero-cta,
  .content-block.content_hero .hero-background .hero-content .hero-paragraph {
    font-size: 1em;
  }
}
.list-group-item.active a {
  color: #f0f0f0;
}

.list-group-item:hover a {
  color: #f0f0f0;
}
/*
 * This is a manifest file that'll be compiled into application, which will include all the files
 * listed belo
 *
 * CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/* Change to a different green */
/* Darker text */
/* Lighter background */
/* Define SCSS variables for common color properties */
/* Define SCSS variables for common color properties */
:root {
  --ss-main-height: 38px;
}

.navbar-brand {
  --bs-navbar-brand-color: $light-background-text-color;
}
.navbar-brand:hover, .navbar-brand:focus {
  --bs-navbar-brand-hover-color: lighten($light-background-text-color, 10%);
}
.navbar-brand img {
  max-width: 70vw;
}
@media (min-width: 576px) {
  .navbar-brand img {
    max-width: 40vw;
  }
}
@media (min-width: 768px) {
  .navbar-brand img {
    max-width: 30vw;
  }
}
@media (min-width: 992px) {
  .navbar-brand img {
    max-width: 20vw;
  }
}
@media (min-width: 1200px) {
  .navbar-brand img {
    max-width: 15vw;
  }
}

.mailer .navbar-brand img {
  max-width: 50vw;
}

.nav-link {
  --bs-nav-link-color: $light-background-text-color;
}
.nav-link.show, .nav-link.active {
  --bs-navbar-active-color: lighten($light-background-text-color, 10%);
}
.nav-link:hover, .nav-link:focus {
  --bs-nav-link-hover-color: lighten($light-background-text-color, 10%);
}

.dropdown-item {
  --bs-dropdown-link-color: $light-background-text-color;
}

.host_community_logo {
  max-height: 5vh;
}

.navigation {
  --bs-navbar-padding-x: 0.5rem;
  --bs-navbar-padding-y: 0.5rem;
}

.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-check + .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible + .btn {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked:focus-visible + .btn {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: #42b983;
  --bs-btn-border-color: #42b983;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(94.35, 195.5, 149.6);
  --bs-btn-hover-border-color: rgb(84.9, 192, 143.4);
  --bs-btn-focus-shadow-rgb: 56, 157, 111;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(103.8, 199, 155.8);
  --bs-btn-active-border-color: rgb(84.9, 192, 143.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #42b983;
  --bs-btn-disabled-border-color: #42b983;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2e815c;
  --bs-btn-border-color: #2e815c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(39.1, 109.65, 78.2);
  --bs-btn-hover-border-color: rgb(36.8, 103.2, 73.6);
  --bs-btn-focus-shadow-rgb: 77, 148, 116;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(36.8, 103.2, 73.6);
  --bs-btn-active-border-color: rgb(34.5, 96.75, 69);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2e815c;
  --bs-btn-disabled-border-color: #2e815c;
}

.btn-success {
  --bs-btn-color: #000;
  --bs-btn-bg: #5debab;
  --bs-btn-border-color: #5debab;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(117.3, 238, 183.6);
  --bs-btn-hover-border-color: rgb(109.2, 237, 179.4);
  --bs-btn-focus-shadow-rgb: 79, 200, 145;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(125.4, 239, 187.8);
  --bs-btn-active-border-color: rgb(109.2, 237, 179.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #5debab;
  --bs-btn-disabled-border-color: #5debab;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #347c46;
  --bs-btn-border-color: #347c46;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(44.2, 105.4, 59.5);
  --bs-btn-hover-border-color: rgb(41.6, 99.2, 56);
  --bs-btn-focus-shadow-rgb: 82, 144, 98;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(41.6, 99.2, 56);
  --bs-btn-active-border-color: rgb(39, 93, 52.5);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #347c46;
  --bs-btn-disabled-border-color: #347c46;
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #C9B947;
  --bs-btn-border-color: #C9B947;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(209.1, 195.5, 98.6);
  --bs-btn-hover-border-color: rgb(206.4, 192, 89.4);
  --bs-btn-focus-shadow-rgb: 171, 157, 60;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(211.8, 199, 107.8);
  --bs-btn-active-border-color: rgb(206.4, 192, 89.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #C9B947;
  --bs-btn-disabled-border-color: #C9B947;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #BF4A47;
  --bs-btn-border-color: #BF4A47;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(162.35, 62.9, 60.35);
  --bs-btn-hover-border-color: rgb(152.8, 59.2, 56.8);
  --bs-btn-focus-shadow-rgb: 201, 101, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(152.8, 59.2, 56.8);
  --bs-btn-active-border-color: rgb(143.25, 55.5, 53.25);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #BF4A47;
  --bs-btn-disabled-border-color: #BF4A47;
}

.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(210.8, 211.65, 212.5);
  --bs-btn-hover-border-color: rgb(198.4, 199.2, 200);
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(198.4, 199.2, 200);
  --bs-btn-active-border-color: rgb(186, 186.75, 187.5);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(66.3, 69.7, 73.1);
  --bs-btn-hover-border-color: rgb(55.2, 58.8, 62.4);
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(77.4, 80.6, 83.8);
  --bs-btn-active-border-color: rgb(55.2, 58.8, 62.4);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

.btn-outline-primary {
  --bs-btn-color: #42b983;
  --bs-btn-border-color: #42b983;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #42b983;
  --bs-btn-hover-border-color: #42b983;
  --bs-btn-focus-shadow-rgb: 66, 185, 131;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #42b983;
  --bs-btn-active-border-color: #42b983;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #42b983;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #42b983;
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #2e815c;
  --bs-btn-border-color: #2e815c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2e815c;
  --bs-btn-hover-border-color: #2e815c;
  --bs-btn-focus-shadow-rgb: 46, 129, 92;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2e815c;
  --bs-btn-active-border-color: #2e815c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #2e815c;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #2e815c;
  --bs-gradient: none;
}

.btn-outline-success {
  --bs-btn-color: #5debab;
  --bs-btn-border-color: #5debab;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #5debab;
  --bs-btn-hover-border-color: #5debab;
  --bs-btn-focus-shadow-rgb: 93, 235, 171;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #5debab;
  --bs-btn-active-border-color: #5debab;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #5debab;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #5debab;
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: #347c46;
  --bs-btn-border-color: #347c46;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #347c46;
  --bs-btn-hover-border-color: #347c46;
  --bs-btn-focus-shadow-rgb: 52, 124, 70;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #347c46;
  --bs-btn-active-border-color: #347c46;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #347c46;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #347c46;
  --bs-gradient: none;
}

.btn-outline-warning {
  --bs-btn-color: #C9B947;
  --bs-btn-border-color: #C9B947;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #C9B947;
  --bs-btn-hover-border-color: #C9B947;
  --bs-btn-focus-shadow-rgb: 201, 185, 71;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #C9B947;
  --bs-btn-active-border-color: #C9B947;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #C9B947;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #C9B947;
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-color: #BF4A47;
  --bs-btn-border-color: #BF4A47;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #BF4A47;
  --bs-btn-hover-border-color: #BF4A47;
  --bs-btn-focus-shadow-rgb: 191, 74, 71;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #BF4A47;
  --bs-btn-active-border-color: #BF4A47;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #BF4A47;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #BF4A47;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}

.btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 56, 157, 111;
  text-decoration: underline;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}

.btn-lg {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-sm {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

:root,
[data-bs-theme=light] {
  --bs-primary: #42b983;
  --bs-secondary: #2e815c;
  --bs-success: #5debab;
  --bs-info: #347c46;
  --bs-warning: #C9B947;
  --bs-danger: #BF4A47;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #42b983;
  --bs-secondary: #2e815c;
  --bs-success: #5debab;
  --bs-info: #347c46;
  --bs-warning: #C9B947;
  --bs-danger: #BF4A47;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 66, 185, 131;
  --bs-secondary-rgb: 46, 129, 92;
  --bs-success-rgb: 93, 235, 171;
  --bs-info-rgb: 52, 124, 70;
  --bs-warning-rgb: 201, 185, 71;
  --bs-danger-rgb: 191, 74, 71;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: rgb(26.4, 74, 52.4);
  --bs-secondary-text-emphasis: rgb(18.4, 51.6, 36.8);
  --bs-success-text-emphasis: rgb(37.2, 94, 68.4);
  --bs-info-text-emphasis: rgb(20.8, 49.6, 28);
  --bs-warning-text-emphasis: rgb(80.4, 74, 28.4);
  --bs-danger-text-emphasis: rgb(76.4, 29.6, 28.4);
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: rgb(217.2, 241, 230.2);
  --bs-secondary-bg-subtle: rgb(213.2, 229.8, 222.4);
  --bs-success-bg-subtle: rgb(222.6, 251, 238.2);
  --bs-info-bg-subtle: rgb(214.4, 228.8, 218);
  --bs-warning-bg-subtle: rgb(244.2, 241, 218.2);
  --bs-danger-bg-subtle: rgb(242.2, 218.8, 218.2);
  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: rgb(179.4, 227, 205.4);
  --bs-secondary-border-subtle: rgb(171.4, 204.6, 189.8);
  --bs-success-border-subtle: rgb(190.2, 247, 221.4);
  --bs-info-border-subtle: rgb(173.8, 202.6, 181);
  --bs-warning-border-subtle: rgb(233.4, 227, 181.4);
  --bs-danger-border-subtle: rgb(229.4, 182.6, 181.4);
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #42b983;
  --bs-link-color-rgb: 66, 185, 131;
  --bs-link-decoration: underline;
  --bs-link-hover-color: rgb(52.8, 148, 104.8);
  --bs-link-hover-color-rgb: 53, 148, 105;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: rgb(255, 242.6, 205.4);
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(66, 185, 131, 0.25);
  --bs-form-valid-color: #5debab;
  --bs-form-valid-border-color: #5debab;
  --bs-form-invalid-color: #BF4A47;
  --bs-form-invalid-border-color: #BF4A47;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: rgb(42.5, 47.5, 52.5);
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: rgb(141.6, 213, 180.6);
  --bs-secondary-text-emphasis: rgb(129.6, 179.4, 157.2);
  --bs-success-text-emphasis: rgb(157.8, 243, 204.6);
  --bs-info-text-emphasis: rgb(133.2, 176.4, 144);
  --bs-warning-text-emphasis: rgb(222.6, 213, 144.6);
  --bs-danger-text-emphasis: rgb(216.6, 146.4, 144.6);
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: rgb(13.2, 37, 26.2);
  --bs-secondary-bg-subtle: rgb(9.2, 25.8, 18.4);
  --bs-success-bg-subtle: rgb(18.6, 47, 34.2);
  --bs-info-bg-subtle: rgb(10.4, 24.8, 14);
  --bs-warning-bg-subtle: rgb(40.2, 37, 14.2);
  --bs-danger-bg-subtle: rgb(38.2, 14.8, 14.2);
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: rgb(39.6, 111, 78.6);
  --bs-secondary-border-subtle: rgb(27.6, 77.4, 55.2);
  --bs-success-border-subtle: rgb(55.8, 141, 102.6);
  --bs-info-border-subtle: rgb(31.2, 74.4, 42);
  --bs-warning-border-subtle: rgb(120.6, 111, 42.6);
  --bs-danger-border-subtle: rgb(114.6, 44.4, 42.6);
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: rgb(141.6, 213, 180.6);
  --bs-link-hover-color: rgb(164.28, 221.4, 195.48);
  --bs-link-color-rgb: 142, 213, 181;
  --bs-link-hover-color-rgb: 164, 221, 195;
  --bs-code-color: rgb(230.4, 132.6, 181.2);
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: rgb(102, 77.2, 2.8);
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: rgb(117, 183, 152.4);
  --bs-form-valid-border-color: rgb(117, 183, 152.4);
  --bs-form-invalid-color: rgb(234, 133.8, 143.4);
  --bs-form-invalid-border-color: rgb(234, 133.8, 143.4);
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
}
body:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: repeat;
  opacity: 0.2;
  z-index: -1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif; /* Elegant font */
  letter-spacing: 1.25px; /* Slight letter spacing for better readability */
  margin-bottom: 20px;
}

p {
  line-height: 1.7; /* Increased line height for better readability */
  font-family: "Roboto", sans-serif; /* Clean body text font */
  margin-bottom: 20px;
}

input.form-control,
select.form-select,
div.form-select,
textarea.form-control {
  border-color: #2e815c;
}

#main-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633);
  color: #222;
}
#main-nav a {
  color: #222;
}
#main-nav .dropdown-menu {
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633);
}
#main-nav .dropdown-menu .dropdown-item:hover, #main-nav .dropdown-menu .dropdown-item:active {
  color: #222;
}

#app-footer {
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633);
  color: #222;
}
#app-footer a {
  color: #222;
}
#app-footer .dropdown-menu {
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633);
}
#app-footer .dropdown-menu .dropdown-item:hover, #app-footer .dropdown-menu .dropdown-item:active {
  color: #222;
}
#app-footer .navbar-text {
  color: #222;
}

.navbar-nav .nav-link {
  position: relative;
  color: #42b983;
  text-decoration: none; /* Remove default text underline */
  padding: 5px 10px;
  border-bottom: 4px solid transparent; /* Invisible border by default */
  transition: border-color 0.3s ease; /* Smooth transition for underline */
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  border-bottom: 4px solid #42b983; /* Add underline on hover/focus */
}

/* Animation keyframes for shrinking and growing */
@keyframes shrink-grow {
  0% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(0.8); /* Shrinks to 80% */
  }
  100% {
    transform: scale(1); /* Grows back to original size */
  }
}
/* Animation keyframes for shrinking and growing */
@keyframes shrink-grow-mild {
  0% {
    transform: scale(1); /* Original size */
  }
  50% {
    transform: scale(0.95); /* Shrinks to 95% */
  }
  100% {
    transform: scale(1); /* Grows back to original size */
  }
}
.btn {
  transition: transform 0.3s ease;
}
.btn:hover {
  transform: scale(1.05); /* Slightly enlarges the button */
}

a i.fas, a i.fa {
  transition: transform 0.3s ease;
}
a i.fas:hover, a i.fa:hover {
  transform: scale(1.05); /* Slightly enlarges the button */
}

/* Custom Turbo Loading Bar Styles */
.turbo-progress-bar {
  height: 5px; /* Change the height of the loading bar */
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633); /* Change the color of the loading bar */
  transition: width 0.2s ease-out, opacity 0.2s ease-out; /* Smooth transitions */
}

/* Progress bar container (takes full width of the page) */
#custom-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%; /* Initial width (will expand as page scrolls) */
  height: 5px; /* Same height as Turbo's default bar */
  background: rgb(176.8725099602, 227.1274900398, 204.3227091633); /* You can adjust this color to match your theme */
  z-index: 9999; /* Ensures it stays on top of other elements */
  transition: width 0.2s ease; /* Smooth progress bar transitions */
}

/* Links color fade */
a {
  transition: color 0.3s ease;
}

a:hover,
a.active {
  color: #5debab; /* Adjust hover color */
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card.membership:hover,
.card.hover-effect:hover {
  transform: translateY(-10px); /* Lift the card on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Add shadow */
}

.content-block.content_hero .hero-background .hero-content .hero-heading {
  width: 100%;
}
@media screen and (max-width: 431px) {
  .content-block.content_hero .hero-background .hero-content .hero-heading {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 431px) {
  .content-block.content_hero .hero-background .hero-content .hero-cta,
  .content-block.content_hero .hero-background .hero-content .hero-paragraph {
    font-size: 1em;
  }
}
.list-group-item.active a {
  color: #f0f0f0;
}

.list-group-item:hover a {
  color: #f0f0f0;
}
