/* 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;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bt-navbar-toggler-icon-bg: var(--bs-navbar-toggler-icon-bg);
}

.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%);
}

.bt-underline-nav {
  --bt-nav-underline-width: 2px;
  --bt-nav-underline-color: currentColor;
  --bt-nav-underline-offset: 4px;
  --bt-nav-underline-hover-opacity: 0.8;
  --bt-nav-underline-active-opacity: 1;
}
.bt-underline-nav .nav-link {
  border-bottom: var(--bt-nav-underline-width) solid transparent;
  transition: border-color 0.2s ease;
  padding-bottom: var(--bt-nav-underline-offset);
}
.bt-underline-nav .nav-link:hover,
.bt-underline-nav .nav-link:focus {
  border-bottom-color: var(--bt-nav-underline-color);
  opacity: var(--bt-nav-underline-hover-opacity);
}
.bt-underline-nav .nav-link.active {
  border-bottom-color: var(--bt-nav-underline-color);
  opacity: var(--bt-nav-underline-active-opacity);
}
.bt-underline-nav .bt-mobile-nav-link {
  color: var(--bt-mobile-nav-color, currentColor);
}
.bt-underline-nav .bt-mobile-nav-link:hover,
.bt-underline-nav .bt-mobile-nav-link:focus {
  color: var(--bt-mobile-nav-hover-color, currentColor);
}

.navbar-toggler-icon {
  background-image: var(--bs-navbar-toggler-icon-bg);
}

.navbar-toggler {
  color: var(--bt-navbar-toggler-color, #212529);
}

.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(37%, 76.6666666667%, 58.6666666667%);
  --bs-btn-hover-border-color: rgb(33.2941176471%, 75.2941176471%, 56.2352941176%);
  --bs-btn-focus-shadow-rgb: 56, 157, 111;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(40.7058823529%, 78.0392156863%, 61.0980392157%);
  --bs-btn-active-border-color: rgb(33.2941176471%, 75.2941176471%, 56.2352941176%);
  --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(15.3333333333%, 43%, 30.6666666667%);
  --bs-btn-hover-border-color: rgb(14.431372549%, 40.4705882353%, 28.862745098%);
  --bs-btn-focus-shadow-rgb: 77, 148, 116;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(14.431372549%, 40.4705882353%, 28.862745098%);
  --bs-btn-active-border-color: rgb(13.5294117647%, 37.9411764706%, 27.0588235294%);
  --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(46%, 93.3333333333%, 72%);
  --bs-btn-hover-border-color: rgb(42.8235294118%, 92.9411764706%, 70.3529411765%);
  --bs-btn-focus-shadow-rgb: 79, 200, 145;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(49.1764705882%, 93.7254901961%, 73.6470588235%);
  --bs-btn-active-border-color: rgb(42.8235294118%, 92.9411764706%, 70.3529411765%);
  --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(17.3333333333%, 41.3333333333%, 23.3333333333%);
  --bs-btn-hover-border-color: rgb(16.3137254902%, 38.9019607843%, 21.9607843137%);
  --bs-btn-focus-shadow-rgb: 82, 144, 98;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(16.3137254902%, 38.9019607843%, 21.9607843137%);
  --bs-btn-active-border-color: rgb(15.2941176471%, 36.4705882353%, 20.5882352941%);
  --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(82%, 76.6666666667%, 38.6666666667%);
  --bs-btn-hover-border-color: rgb(80.9411764706%, 75.2941176471%, 35.0588235294%);
  --bs-btn-focus-shadow-rgb: 171, 157, 60;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(83.0588235294%, 78.0392156863%, 42.2745098039%);
  --bs-btn-active-border-color: rgb(80.9411764706%, 75.2941176471%, 35.0588235294%);
  --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(63.6666666667%, 24.6666666667%, 23.6666666667%);
  --bs-btn-hover-border-color: rgb(59.9215686275%, 23.2156862745%, 22.2745098039%);
  --bs-btn-focus-shadow-rgb: 201, 101, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(59.9215686275%, 23.2156862745%, 22.2745098039%);
  --bs-btn-active-border-color: rgb(56.1764705882%, 21.7647058824%, 20.8823529412%);
  --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(82.6666666667%, 83%, 83.3333333333%);
  --bs-btn-hover-border-color: rgb(77.8039215686%, 78.1176470588%, 78.431372549%);
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(77.8039215686%, 78.1176470588%, 78.431372549%);
  --bs-btn-active-border-color: rgb(72.9411764706%, 73.2352941176%, 73.5294117647%);
  --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(26%, 27.3333333333%, 28.6666666667%);
  --bs-btn-hover-border-color: rgb(21.6470588235%, 23.0588235294%, 24.4705882353%);
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(30.3529411765%, 31.6078431373%, 32.862745098%);
  --bs-btn-active-border-color: rgb(21.6470588235%, 23.0588235294%, 24.4705882353%);
  --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(10.3529411765%, 29.0196078431%, 20.5490196078%);
  --bs-secondary-text-emphasis: rgb(7.2156862745%, 20.2352941176%, 14.431372549%);
  --bs-success-text-emphasis: rgb(14.5882352941%, 36.862745098%, 26.8235294118%);
  --bs-info-text-emphasis: rgb(8.1568627451%, 19.4509803922%, 10.9803921569%);
  --bs-warning-text-emphasis: rgb(31.5294117647%, 29.0196078431%, 11.137254902%);
  --bs-danger-text-emphasis: rgb(29.9607843137%, 11.6078431373%, 11.137254902%);
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: rgb(85.1764705882%, 94.5098039216%, 90.2745098039%);
  --bs-secondary-bg-subtle: rgb(83.6078431373%, 90.1176470588%, 87.2156862745%);
  --bs-success-bg-subtle: rgb(87.2941176471%, 98.431372549%, 93.4117647059%);
  --bs-info-bg-subtle: rgb(84.0784313725%, 89.7254901961%, 85.4901960784%);
  --bs-warning-bg-subtle: rgb(95.7647058824%, 94.5098039216%, 85.568627451%);
  --bs-danger-bg-subtle: rgb(94.9803921569%, 85.8039215686%, 85.568627451%);
  --bs-light-bg-subtle: rgb(98.6274509804%, 98.8235294118%, 99.0196078431%);
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: rgb(70.3529411765%, 89.0196078431%, 80.5490196078%);
  --bs-secondary-border-subtle: rgb(67.2156862745%, 80.2352941176%, 74.431372549%);
  --bs-success-border-subtle: rgb(74.5882352941%, 96.862745098%, 86.8235294118%);
  --bs-info-border-subtle: rgb(68.1568627451%, 79.4509803922%, 70.9803921569%);
  --bs-warning-border-subtle: rgb(91.5294117647%, 89.0196078431%, 71.137254902%);
  --bs-danger-border-subtle: rgb(89.9607843137%, 71.6078431373%, 71.137254902%);
  --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(20.7058823529%, 58.0392156863%, 41.0980392157%);
  --bs-link-hover-color-rgb: 53, 148, 105;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: rgb(100%, 95.137254902%, 80.5490196078%);
  --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(16.6666666667%, 18.6274509804%, 20.5882352941%);
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: rgb(55.5294117647%, 83.5294117647%, 70.8235294118%);
  --bs-secondary-text-emphasis: rgb(50.8235294118%, 70.3529411765%, 61.6470588235%);
  --bs-success-text-emphasis: rgb(61.8823529412%, 95.2941176471%, 80.2352941176%);
  --bs-info-text-emphasis: rgb(52.2352941176%, 69.1764705882%, 56.4705882353%);
  --bs-warning-text-emphasis: rgb(87.2941176471%, 83.5294117647%, 56.7058823529%);
  --bs-danger-text-emphasis: rgb(84.9411764706%, 57.4117647059%, 56.7058823529%);
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: rgb(5.1764705882%, 14.5098039216%, 10.2745098039%);
  --bs-secondary-bg-subtle: rgb(3.6078431373%, 10.1176470588%, 7.2156862745%);
  --bs-success-bg-subtle: rgb(7.2941176471%, 18.431372549%, 13.4117647059%);
  --bs-info-bg-subtle: rgb(4.0784313725%, 9.7254901961%, 5.4901960784%);
  --bs-warning-bg-subtle: rgb(15.7647058824%, 14.5098039216%, 5.568627451%);
  --bs-danger-bg-subtle: rgb(14.9803921569%, 5.8039215686%, 5.568627451%);
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: rgb(15.5294117647%, 43.5294117647%, 30.8235294118%);
  --bs-secondary-border-subtle: rgb(10.8235294118%, 30.3529411765%, 21.6470588235%);
  --bs-success-border-subtle: rgb(21.8823529412%, 55.2941176471%, 40.2352941176%);
  --bs-info-border-subtle: rgb(12.2352941176%, 29.1764705882%, 16.4705882353%);
  --bs-warning-border-subtle: rgb(47.2941176471%, 43.5294117647%, 16.7058823529%);
  --bs-danger-border-subtle: rgb(44.9411764706%, 17.4117647059%, 16.7058823529%);
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: rgb(55.5294117647%, 83.5294117647%, 70.8235294118%);
  --bs-link-hover-color: rgb(64.4235294118%, 86.8235294118%, 76.6588235294%);
  --bs-link-color-rgb: 142, 213, 181;
  --bs-link-hover-color-rgb: 164, 221, 195;
  --bs-code-color: rgb(90.3529411765%, 52%, 71.0588235294%);
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: rgb(40%, 30.2745098039%, 1.0980392157%);
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: rgb(45.8823529412%, 71.7647058824%, 59.7647058824%);
  --bs-form-valid-border-color: rgb(45.8823529412%, 71.7647058824%, 59.7647058824%);
  --bs-form-invalid-color: rgb(91.7647058824%, 52.4705882353%, 56.2352941176%);
  --bs-form-invalid-border-color: rgb(91.7647058824%, 52.4705882353%, 56.2352941176%);
}

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(69.3617686118%, 89.0696039372%, 80.1265526131%);
  color: #222;
}
#main-nav a {
  color: #222;
}
#main-nav .dropdown-menu {
  background: rgb(69.3617686118%, 89.0696039372%, 80.1265526131%);
}
#main-nav .dropdown-menu .dropdown-item:hover, #main-nav .dropdown-menu .dropdown-item:active {
  color: #222;
}

#app-footer {
  background: rgb(69.3617686118%, 89.0696039372%, 80.1265526131%);
  color: #222;
}
#app-footer a {
  color: #222;
}
#app-footer .dropdown-menu {
  background: rgb(69.3617686118%, 89.0696039372%, 80.1265526131%);
}
#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(69.3617686118%, 89.0696039372%, 80.1265526131%); /* 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(69.3617686118%, 89.0696039372%, 80.1265526131%); /* 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;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bt-navbar-toggler-icon-bg: var(--bs-navbar-toggler-icon-bg);
}

.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%);
}

.bt-underline-nav {
  --bt-nav-underline-width: 2px;
  --bt-nav-underline-color: currentColor;
  --bt-nav-underline-offset: 4px;
  --bt-nav-underline-hover-opacity: 0.8;
  --bt-nav-underline-active-opacity: 1;
}
.bt-underline-nav .nav-link {
  border-bottom: var(--bt-nav-underline-width) solid transparent;
  transition: border-color 0.2s ease;
  padding-bottom: var(--bt-nav-underline-offset);
}
.bt-underline-nav .nav-link:hover,
.bt-underline-nav .nav-link:focus {
  border-bottom-color: var(--bt-nav-underline-color);
  opacity: var(--bt-nav-underline-hover-opacity);
}
.bt-underline-nav .nav-link.active {
  border-bottom-color: var(--bt-nav-underline-color);
  opacity: var(--bt-nav-underline-active-opacity);
}
.bt-underline-nav .bt-mobile-nav-link {
  color: var(--bt-mobile-nav-color, currentColor);
}
.bt-underline-nav .bt-mobile-nav-link:hover,
.bt-underline-nav .bt-mobile-nav-link:focus {
  color: var(--bt-mobile-nav-hover-color, currentColor);
}

.navbar-toggler-icon {
  background-image: var(--bs-navbar-toggler-icon-bg);
}

.navbar-toggler {
  color: var(--bt-navbar-toggler-color, #212529);
}

.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(37%, 76.6666666667%, 58.6666666667%);
  --bs-btn-hover-border-color: rgb(33.2941176471%, 75.2941176471%, 56.2352941176%);
  --bs-btn-focus-shadow-rgb: 56, 157, 111;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(40.7058823529%, 78.0392156863%, 61.0980392157%);
  --bs-btn-active-border-color: rgb(33.2941176471%, 75.2941176471%, 56.2352941176%);
  --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(15.3333333333%, 43%, 30.6666666667%);
  --bs-btn-hover-border-color: rgb(14.431372549%, 40.4705882353%, 28.862745098%);
  --bs-btn-focus-shadow-rgb: 77, 148, 116;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(14.431372549%, 40.4705882353%, 28.862745098%);
  --bs-btn-active-border-color: rgb(13.5294117647%, 37.9411764706%, 27.0588235294%);
  --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(46%, 93.3333333333%, 72%);
  --bs-btn-hover-border-color: rgb(42.8235294118%, 92.9411764706%, 70.3529411765%);
  --bs-btn-focus-shadow-rgb: 79, 200, 145;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(49.1764705882%, 93.7254901961%, 73.6470588235%);
  --bs-btn-active-border-color: rgb(42.8235294118%, 92.9411764706%, 70.3529411765%);
  --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(17.3333333333%, 41.3333333333%, 23.3333333333%);
  --bs-btn-hover-border-color: rgb(16.3137254902%, 38.9019607843%, 21.9607843137%);
  --bs-btn-focus-shadow-rgb: 82, 144, 98;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(16.3137254902%, 38.9019607843%, 21.9607843137%);
  --bs-btn-active-border-color: rgb(15.2941176471%, 36.4705882353%, 20.5882352941%);
  --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(82%, 76.6666666667%, 38.6666666667%);
  --bs-btn-hover-border-color: rgb(80.9411764706%, 75.2941176471%, 35.0588235294%);
  --bs-btn-focus-shadow-rgb: 171, 157, 60;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(83.0588235294%, 78.0392156863%, 42.2745098039%);
  --bs-btn-active-border-color: rgb(80.9411764706%, 75.2941176471%, 35.0588235294%);
  --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(63.6666666667%, 24.6666666667%, 23.6666666667%);
  --bs-btn-hover-border-color: rgb(59.9215686275%, 23.2156862745%, 22.2745098039%);
  --bs-btn-focus-shadow-rgb: 201, 101, 99;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(59.9215686275%, 23.2156862745%, 22.2745098039%);
  --bs-btn-active-border-color: rgb(56.1764705882%, 21.7647058824%, 20.8823529412%);
  --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(82.6666666667%, 83%, 83.3333333333%);
  --bs-btn-hover-border-color: rgb(77.8039215686%, 78.1176470588%, 78.431372549%);
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(77.8039215686%, 78.1176470588%, 78.431372549%);
  --bs-btn-active-border-color: rgb(72.9411764706%, 73.2352941176%, 73.5294117647%);
  --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(26%, 27.3333333333%, 28.6666666667%);
  --bs-btn-hover-border-color: rgb(21.6470588235%, 23.0588235294%, 24.4705882353%);
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(30.3529411765%, 31.6078431373%, 32.862745098%);
  --bs-btn-active-border-color: rgb(21.6470588235%, 23.0588235294%, 24.4705882353%);
  --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(10.3529411765%, 29.0196078431%, 20.5490196078%);
  --bs-secondary-text-emphasis: rgb(7.2156862745%, 20.2352941176%, 14.431372549%);
  --bs-success-text-emphasis: rgb(14.5882352941%, 36.862745098%, 26.8235294118%);
  --bs-info-text-emphasis: rgb(8.1568627451%, 19.4509803922%, 10.9803921569%);
  --bs-warning-text-emphasis: rgb(31.5294117647%, 29.0196078431%, 11.137254902%);
  --bs-danger-text-emphasis: rgb(29.9607843137%, 11.6078431373%, 11.137254902%);
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: rgb(85.1764705882%, 94.5098039216%, 90.2745098039%);
  --bs-secondary-bg-subtle: rgb(83.6078431373%, 90.1176470588%, 87.2156862745%);
  --bs-success-bg-subtle: rgb(87.2941176471%, 98.431372549%, 93.4117647059%);
  --bs-info-bg-subtle: rgb(84.0784313725%, 89.7254901961%, 85.4901960784%);
  --bs-warning-bg-subtle: rgb(95.7647058824%, 94.5098039216%, 85.568627451%);
  --bs-danger-bg-subtle: rgb(94.9803921569%, 85.8039215686%, 85.568627451%);
  --bs-light-bg-subtle: rgb(98.6274509804%, 98.8235294118%, 99.0196078431%);
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: rgb(70.3529411765%, 89.0196078431%, 80.5490196078%);
  --bs-secondary-border-subtle: rgb(67.2156862745%, 80.2352941176%, 74.431372549%);
  --bs-success-border-subtle: rgb(74.5882352941%, 96.862745098%, 86.8235294118%);
  --bs-info-border-subtle: rgb(68.1568627451%, 79.4509803922%, 70.9803921569%);
  --bs-warning-border-subtle: rgb(91.5294117647%, 89.0196078431%, 71.137254902%);
  --bs-danger-border-subtle: rgb(89.9607843137%, 71.6078431373%, 71.137254902%);
  --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(20.7058823529%, 58.0392156863%, 41.0980392157%);
  --bs-link-hover-color-rgb: 53, 148, 105;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: rgb(100%, 95.137254902%, 80.5490196078%);
  --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(16.6666666667%, 18.6274509804%, 20.5882352941%);
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: rgb(55.5294117647%, 83.5294117647%, 70.8235294118%);
  --bs-secondary-text-emphasis: rgb(50.8235294118%, 70.3529411765%, 61.6470588235%);
  --bs-success-text-emphasis: rgb(61.8823529412%, 95.2941176471%, 80.2352941176%);
  --bs-info-text-emphasis: rgb(52.2352941176%, 69.1764705882%, 56.4705882353%);
  --bs-warning-text-emphasis: rgb(87.2941176471%, 83.5294117647%, 56.7058823529%);
  --bs-danger-text-emphasis: rgb(84.9411764706%, 57.4117647059%, 56.7058823529%);
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: rgb(5.1764705882%, 14.5098039216%, 10.2745098039%);
  --bs-secondary-bg-subtle: rgb(3.6078431373%, 10.1176470588%, 7.2156862745%);
  --bs-success-bg-subtle: rgb(7.2941176471%, 18.431372549%, 13.4117647059%);
  --bs-info-bg-subtle: rgb(4.0784313725%, 9.7254901961%, 5.4901960784%);
  --bs-warning-bg-subtle: rgb(15.7647058824%, 14.5098039216%, 5.568627451%);
  --bs-danger-bg-subtle: rgb(14.9803921569%, 5.8039215686%, 5.568627451%);
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: rgb(15.5294117647%, 43.5294117647%, 30.8235294118%);
  --bs-secondary-border-subtle: rgb(10.8235294118%, 30.3529411765%, 21.6470588235%);
  --bs-success-border-subtle: rgb(21.8823529412%, 55.2941176471%, 40.2352941176%);
  --bs-info-border-subtle: rgb(12.2352941176%, 29.1764705882%, 16.4705882353%);
  --bs-warning-border-subtle: rgb(47.2941176471%, 43.5294117647%, 16.7058823529%);
  --bs-danger-border-subtle: rgb(44.9411764706%, 17.4117647059%, 16.7058823529%);
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: rgb(55.5294117647%, 83.5294117647%, 70.8235294118%);
  --bs-link-hover-color: rgb(64.4235294118%, 86.8235294118%, 76.6588235294%);
  --bs-link-color-rgb: 142, 213, 181;
  --bs-link-hover-color-rgb: 164, 221, 195;
  --bs-code-color: rgb(90.3529411765%, 52%, 71.0588235294%);
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: rgb(40%, 30.2745098039%, 1.0980392157%);
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: rgb(45.8823529412%, 71.7647058824%, 59.7647058824%);
  --bs-form-valid-border-color: rgb(45.8823529412%, 71.7647058824%, 59.7647058824%);
  --bs-form-invalid-color: rgb(91.7647058824%, 52.4705882353%, 56.2352941176%);
  --bs-form-invalid-border-color: rgb(91.7647058824%, 52.4705882353%, 56.2352941176%);
}

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(69.3617686118%, 89.0696039372%, 80.1265526131%);
  color: #222;
}
#main-nav a {
  color: #222;
}
#main-nav .dropdown-menu {
  background: rgb(69.3617686118%, 89.0696039372%, 80.1265526131%);
}
#main-nav .dropdown-menu .dropdown-item:hover, #main-nav .dropdown-menu .dropdown-item:active {
  color: #222;
}

#app-footer {
  background: rgb(69.3617686118%, 89.0696039372%, 80.1265526131%);
  color: #222;
}
#app-footer a {
  color: #222;
}
#app-footer .dropdown-menu {
  background: rgb(69.3617686118%, 89.0696039372%, 80.1265526131%);
}
#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(69.3617686118%, 89.0696039372%, 80.1265526131%); /* 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(69.3617686118%, 89.0696039372%, 80.1265526131%); /* 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;
}