/* 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: #fff;
  --bs-btn-bg: rgb(0, 84, 126);
  --bs-btn-border-color: rgb(0, 84, 126);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(0%, 28%, 42%);
  --bs-btn-hover-border-color: rgb(0%, 26.3529411765%, 39.5294117647%);
  --bs-btn-focus-shadow-rgb: 38, 110, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(0%, 26.3529411765%, 39.5294117647%);
  --bs-btn-active-border-color: rgb(0%, 24.7058823529%, 37.0588235294%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgb(0, 84, 126);
  --bs-btn-disabled-border-color: rgb(0, 84, 126);
}

.btn-secondary {
  --bs-btn-color: #000;
  --bs-btn-bg: rgb(255, 184, 2);
  --bs-btn-border-color: rgb(255, 184, 2);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(100%, 76.3333333333%, 15.6666666667%);
  --bs-btn-hover-border-color: rgb(100%, 74.9411764706%, 10.7058823529%);
  --bs-btn-focus-shadow-rgb: 217, 156, 2;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(100%, 77.7254901961%, 20.6274509804%);
  --bs-btn-active-border-color: rgb(100%, 74.9411764706%, 10.7058823529%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: rgb(255, 184, 2);
  --bs-btn-disabled-border-color: rgb(255, 184, 2);
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(8.3333333333%, 45%, 28%);
  --bs-btn-hover-border-color: rgb(7.8431372549%, 42.3529411765%, 26.3529411765%);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(7.8431372549%, 42.3529411765%, 26.3529411765%);
  --bs-btn-active-border-color: rgb(7.3529411765%, 39.7058823529%, 24.7058823529%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}

.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(19.3333333333%, 82.3333333333%, 95%);
  --bs-btn-hover-border-color: rgb(14.5882352941%, 81.2941176471%, 94.7058823529%);
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(24.0784313725%, 83.3725490196%, 95.2941176471%);
  --bs-btn-active-border-color: rgb(14.5882352941%, 81.2941176471%, 94.7058823529%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(100%, 79.3333333333%, 17.3333333333%);
  --bs-btn-hover-border-color: rgb(100%, 78.1176470588%, 12.4705882353%);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(100%, 80.5490196078%, 22.1960784314%);
  --bs-btn-active-border-color: rgb(100%, 78.1176470588%, 12.4705882353%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(73.3333333333%, 17.6666666667%, 23%);
  --bs-btn-hover-border-color: rgb(69.0196078431%, 16.6274509804%, 21.6470588235%);
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(69.0196078431%, 16.6274509804%, 21.6470588235%);
  --bs-btn-active-border-color: rgb(64.7058823529%, 15.5882352941%, 20.2941176471%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

.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: rgb(0, 84, 126);
  --bs-btn-border-color: rgb(0, 84, 126);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(0, 84, 126);
  --bs-btn-hover-border-color: rgb(0, 84, 126);
  --bs-btn-focus-shadow-rgb: 0, 84, 126;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(0, 84, 126);
  --bs-btn-active-border-color: rgb(0, 84, 126);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(0, 84, 126);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgb(0, 84, 126);
  --bs-gradient: none;
}

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

.btn-outline-success {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #0dcaf0;
  --bs-btn-hover-border-color: #0dcaf0;
  --bs-btn-focus-shadow-rgb: 13, 202, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0dcaf0;
  --bs-btn-active-border-color: #0dcaf0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0dcaf0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0dcaf0;
  --bs-gradient: none;
}

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

.btn-outline-danger {
  --bs-btn-color: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc3545;
  --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: 38, 110, 145;
  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);
}

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: "Roboto", 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: rgb(255, 184, 2);
}

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

#app-footer {
  background: #FFF;
  color: rgb(0, 84, 126);
}
#app-footer a {
  color: rgb(0, 84, 126);
}
#app-footer .dropdown-menu {
  background: #FFF;
}
#app-footer .dropdown-menu .dropdown-item:hover, #app-footer .dropdown-menu .dropdown-item:active {
  color: rgb(0, 84, 126);
}
#app-footer .navbar-text {
  color: rgb(0, 84, 126);
}

.navbar-toggler-icon {
  color: rgb(0, 84, 126);
  --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%280, 84, 126, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") ;
}

.navbar-nav .nav-link {
  position: relative;
  color: rgb(0, 84, 126);
  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 rgb(255, 184, 2); /* 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(255, 184, 2); /* 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(255, 184, 2); /* 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: #0098e4; /* 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;
}

.text-primary {
  color: rgb(0, 84, 126) !important;
}

.bg-primary {
  background-color: rgb(0, 84, 126) !important;
}
.venue-quick-facts .capacity {
  margin-right: 1rem;
}
.venue-quick-facts .capacity .capacity-badge {
  transform: translate(-50%, -5%);
  font-size: 0.6rem !important;
}
/*
 * 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.
 *


 */
/* 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: #fff;
  --bs-btn-bg: rgb(0, 84, 126);
  --bs-btn-border-color: rgb(0, 84, 126);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(0%, 28%, 42%);
  --bs-btn-hover-border-color: rgb(0%, 26.3529411765%, 39.5294117647%);
  --bs-btn-focus-shadow-rgb: 38, 110, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(0%, 26.3529411765%, 39.5294117647%);
  --bs-btn-active-border-color: rgb(0%, 24.7058823529%, 37.0588235294%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgb(0, 84, 126);
  --bs-btn-disabled-border-color: rgb(0, 84, 126);
}

.btn-secondary {
  --bs-btn-color: #000;
  --bs-btn-bg: rgb(255, 184, 2);
  --bs-btn-border-color: rgb(255, 184, 2);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(100%, 76.3333333333%, 15.6666666667%);
  --bs-btn-hover-border-color: rgb(100%, 74.9411764706%, 10.7058823529%);
  --bs-btn-focus-shadow-rgb: 217, 156, 2;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(100%, 77.7254901961%, 20.6274509804%);
  --bs-btn-active-border-color: rgb(100%, 74.9411764706%, 10.7058823529%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: rgb(255, 184, 2);
  --bs-btn-disabled-border-color: rgb(255, 184, 2);
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(8.3333333333%, 45%, 28%);
  --bs-btn-hover-border-color: rgb(7.8431372549%, 42.3529411765%, 26.3529411765%);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(7.8431372549%, 42.3529411765%, 26.3529411765%);
  --bs-btn-active-border-color: rgb(7.3529411765%, 39.7058823529%, 24.7058823529%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}

.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(19.3333333333%, 82.3333333333%, 95%);
  --bs-btn-hover-border-color: rgb(14.5882352941%, 81.2941176471%, 94.7058823529%);
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(24.0784313725%, 83.3725490196%, 95.2941176471%);
  --bs-btn-active-border-color: rgb(14.5882352941%, 81.2941176471%, 94.7058823529%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(100%, 79.3333333333%, 17.3333333333%);
  --bs-btn-hover-border-color: rgb(100%, 78.1176470588%, 12.4705882353%);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(100%, 80.5490196078%, 22.1960784314%);
  --bs-btn-active-border-color: rgb(100%, 78.1176470588%, 12.4705882353%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(73.3333333333%, 17.6666666667%, 23%);
  --bs-btn-hover-border-color: rgb(69.0196078431%, 16.6274509804%, 21.6470588235%);
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(69.0196078431%, 16.6274509804%, 21.6470588235%);
  --bs-btn-active-border-color: rgb(64.7058823529%, 15.5882352941%, 20.2941176471%);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

.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: rgb(0, 84, 126);
  --bs-btn-border-color: rgb(0, 84, 126);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(0, 84, 126);
  --bs-btn-hover-border-color: rgb(0, 84, 126);
  --bs-btn-focus-shadow-rgb: 0, 84, 126;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(0, 84, 126);
  --bs-btn-active-border-color: rgb(0, 84, 126);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgb(0, 84, 126);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgb(0, 84, 126);
  --bs-gradient: none;
}

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

.btn-outline-success {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #0dcaf0;
  --bs-btn-hover-border-color: #0dcaf0;
  --bs-btn-focus-shadow-rgb: 13, 202, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0dcaf0;
  --bs-btn-active-border-color: #0dcaf0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0dcaf0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0dcaf0;
  --bs-gradient: none;
}

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

.btn-outline-danger {
  --bs-btn-color: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc3545;
  --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: 38, 110, 145;
  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);
}

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: "Roboto", 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: rgb(255, 184, 2);
}

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

#app-footer {
  background: #FFF;
  color: rgb(0, 84, 126);
}
#app-footer a {
  color: rgb(0, 84, 126);
}
#app-footer .dropdown-menu {
  background: #FFF;
}
#app-footer .dropdown-menu .dropdown-item:hover, #app-footer .dropdown-menu .dropdown-item:active {
  color: rgb(0, 84, 126);
}
#app-footer .navbar-text {
  color: rgb(0, 84, 126);
}

.navbar-toggler-icon {
  color: rgb(0, 84, 126);
  --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%280, 84, 126, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") ;
}

.navbar-nav .nav-link {
  position: relative;
  color: rgb(0, 84, 126);
  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 rgb(255, 184, 2); /* 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(255, 184, 2); /* 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(255, 184, 2); /* 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: #0098e4; /* 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;
}

.text-primary {
  color: rgb(0, 84, 126) !important;
}

.bg-primary {
  background-color: rgb(0, 84, 126) !important;
}

.venue-quick-facts .capacity {
  margin-right: 1rem;
}
.venue-quick-facts .capacity .capacity-badge {
  transform: translate(-50%, -5%);
  font-size: 0.6rem !important;
}