@font-face{
    font-family:GothamHTFLight;
    src:url(../fonts/GothamHTFLight.otf) format("opentype"),
    url(../fonts/GothamHTFLight.woff2) format("woff2"),
    url(../fonts/GothamHTFLight.woff) format("woff"),
    url(../fonts/GothamHTFLight.ttf) format("truetype");
    font-style:normal;
    font-weight:400;
}

@font-face{
    font-family:GothamHTFBook;
    src:url(../fonts/GothamHTFBook.otf) format("opentype"),
    url(../fonts/GothamHTFBook.woff2) format("woff2"),
    url(../fonts/GothamHTFBook.woff) format("woff"),
    url(../fonts/GothamHTFBook.ttf) format("truetype");
    font-style:normal;
    font-weight:400;
}

@font-face{
    font-family:Gotham;
    src:url(../fonts/Gotham.otf) format("opentype"),
    url(../fonts/Gotham.woff2) format("woff2"),
    url(../fonts/Gotham.woff) format("woff"),
    url(../fonts/Gotham.ttf) format("truetype");
    font-style:normal;
    font-weight:400;
}

@font-face{
    font-family:Gotham Bold;
    src:url(../fonts/Gotham-Bold.otf) format("opentype"),
    url(../fonts/Gotham-Bold.woff2) format("woff2"),
    url(../fonts/Gotham-Bold.woff) format("woff"),
    url(../fonts/Gotham-Bold.ttf) format("truetype");
    font-style:normal;
    font-weight:400;
}
    
@font-face{
    font-family:OpenSans;
    src:url(../fonts/OpenSans-Regular.otf) format("opentype"),
    url(../fonts/OpenSans-Regular.woff2) format("woff2"),
    url(../fonts/OpenSans-Regular.woff) format("woff"),
    url(../fonts/OpenSans-Regular.ttf) format("truetype");
    font-style:normal;
    font-weight:400;
}

:root, [data-bs-theme=light] {
  --bs-primary: #194578;
  --bs-primary-rgb: 25, 69, 120; /* Match the RGB values of your color */
  --primary: #194578;
  --bs-link-color: #4cafea;          /* Custom link color */
  --bs-link-hover-color: #4996c4;    /* Custom hover color */
  --bs-link-color-rgb: 76, 175, 234;  /* Matching RGB channels for opacity utilities */
  --bs-link-hover-color-rgb: 73, 150, 196;
}

body {
    --bs-body-font-family: OpenSans, sans-serif;
}

.btn-primary {
  --bs-btn-bg: #4cafea;
  --bs-btn-border-color: #4cafea;
  --bs-btn-hover-bg: #4996c4;
  --bs-btn-hover-border-color: #4996c4;
  --bs-btn-active-bg: #4cafea;
  --bs-btn-active-border-color: #4cafea;
}

.btn-outline-primary {
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #4cafea;
  --bs-btn-color: #4cafea;
  --bs-btn-hover-bg: #4996c4;
  --bs-btn-hover-border-color: #4996c4;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #ffffff;
  --bs-btn-active-border-color: #4cafea;
  --bs-btn-active-color: #4cafea;
}

.form-control,
.form-select {
    --bs-border-color: #4cafea;
}
.input-group-text {
    --bs-border-color: #4cafea;
    background: #d4efff;
}

h1, h2, h3 {
  --bs-heading-color: #A2C654;
  font-family: GothamHTFBook,sans-serif;
  font-weight: 700;
  letter-spacing: -.03em;
}

h4, h5, h6 {
  --bs-heading-color: #194578;
  font-family: GothamHTFBook,sans-serif;
  font-weight: 700;
  letter-spacing: -.03em;
}

/*label {
    color: #194578;
}*/

h2::after {
    content: "";
    display: block;
    width: 184px;
    height: 30px;
    background-image: url(../img/water-flow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-top: .25em;
    margin-bottom: 1em;
}

.container {
  max-width: 960px !important;
}

.footer {
    font-size: .75em;
}

.footer:before {
    content: "";
    height: 6px;
    width: 100vw;
    display: block;
    background-image: linear-gradient(270.03deg,#4cafea -57.51%,#4cafea 21.25%,#a2c654);
}

#sbu-form {
    position: relative;
}

.dot-loader {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px; /* Spaces the dots evenly */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.75);
}

.dot-loader div {
  width: 12px;
  height: 12px;
  background-color: #A2C654;
  border-radius: 50%;
  animation: bounce 1.2s infinite ease-in-out;
}

.dot-loader div:nth-child(1) {
  animation-delay: -0.32s;
}

.dot-loader div:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 
  40% { 
    transform: scale(1.0);
  }
}