@font-face {
  font-family: "Ubuntu";
  src: url("/assets/fonts/UbuntuSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

:root {
  --bs-primary: #B31FDF;
  --bs-primary-rgb: 179, 31, 223;
  --bs-primary-text-emphasis: #7d0aa0;
  --bs-secondary: #0082d8;
  --bs-secondary-rgb: 0, 130, 216;
  --bs-secondary-text-emphasis: #005288;
  --bs-heading-color: var(--bs-primary);
  --footer-gradient: background: linear-gradient(105.61deg, #CD50F3 0.46%, #DE6FFF 22.7%, #A855F7 58.7%, #5544EF 93.72%);
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-family: "Ubuntu", var(--bs-body-font-family);
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-secondary-text-emphasis);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}


#navbar-main .nav-link {
  --bs-nav-link-padding-x: 1rem;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#navbar-main .nav-link:hover {
  color: var(--bs-primary);
}

#footer-main .nav-link {
  transition: border-width 0.1s ease-in-out;
  border-radius: 8px;
}

#footer-main .nav-link:hover {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  --bs-border-width: 3px;
}

.border-primary-hover {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.border-primary-hover:hover {
  border-color: rgba(var(--bs-primary-rgb), 1) !important;
}

.border-secondary-hover {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.border-secondary-hover:hover {
  border-color: rgba(var(--bs-secondary-rgb), 1) !important;
}

.text-preline {
  white-space: pre-line;
}



.footer-wrapper {
  position: relative;
}

.footer-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105.61deg, #CD50F3 0.46%, #DE6FFF 22.7%, #A855F7 58.7%, #5544EF 93.72%);
  opacity: 1;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: lighten;
}

#footer-main {

  background: linear-gradient(105.61deg, #CD50F3 0.46%, #DE6FFF 22.7%, #A855F7 58.7%, #5544EF 93.72%);
}

.divider {
  --divider-url: url('/assets/cbr-divider.svg');
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  z-index: 3;
  isolation: isolate;
}


.divider::before {
  content: "";
  display: block;
  padding-bottom: 9%;
}


.divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 210%;
  width: 100%;
  min-width: 0;
  background-image: var(--divider-url);
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  transform: translate(0%, -4%);
  pointer-events: none;
}



@media (max-width: 1200px) {
  .divider::before {
    padding-bottom: 12%;
  }

  .divider::after {
    /* width: 300%; */
  }
}

@media (max-width: 992px) {
  .divider::before {
    padding-bottom: 15%;
  }

  .divider::after {
    /* width: 300%; */
  }
}

@media (max-width: 768px) {
  .divider::before {
    padding-bottom: 15%;
  }

  .divider::after {
    /* width: 300%; */
  }
}

@media (max-width: 576px) {
  .divider::before {
    padding-bottom: 16%;
  }

  .divider::after {
    /* width: 300%; */
  }
}