.oswald {
    font-family: "Oswald", sans-serif;
}

/* header */
#site-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: var(--bs-primary);
    border-bottom: solid 11px var(--bs-secondary);
    /* margin-bottom: 45px; */
    position: relative;
    z-index: 2;
}
#site-header .navbar {
    width: 100%;
    padding: 0;
}
#site-header .container-fluid {
    gap: 6%;
}
.navbar-brand {
    background-color: #FFF;
    box-shadow: var(--bs-box-shadow);
    border-radius: 0px 0px var(--bs-border-radius) var(--bs-border-radius);
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: -60px;
    gap: 2rem;
}
.navbar-brand .spacer {
    display: inline-block;
    max-width: 1px;
    flex: 1 0 1px;
    background-color: var(--bs-gray);
}
.navbar-brand h1 {
    line-height: 1;
    margin: 0;
    align-self: center;
}
#logo {
    flex: 1 0 470px;
    max-width: 470px;
    align-self: flex-start;
}
#logo a {
    display: block;
    max-width: 45%;
}
#logo a img {
    max-width: 100%;
    height: auto !important;
}

/* body */
#site-body {
    position: relative;
    padding: 130px 0 80px;
    z-index: 1;
    overflow: hidden;
}
#site-body.login-bg {
    background-image: url('/assets/images/login-watermark.svg');
    background-position: center top;
    background-size: cover;
}
#site-body.watermark-bg::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: 602px;
    height: 517px;
    background-image: url('/assets/images/watermark.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    bottom: -20px;
    left: 74%;
    opacity: .08;
}

/* footer */
#site-footer {
    --bs-link-color: #FFF;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--bs-primary);
    padding: 1.5rem 0;
}
#footer-logo {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 2.25rem;
}
#footer-logo .spacer {
    display: inline-block;
    width: 1px;
    background-color: var(--bs-white);
}



/* responsive */
@media (max-width: 1650px) {
    #site-header .container-fluid {
        gap: 2%;
    }
    #logo {
        flex: 1 0 370px;
        max-width: 370px;
    }
    #primary-menu, #secondary-menu {
        --bs-nav-link-font-size: 1.15rem;
    }
}

@media (max-width: 1399px) {
    #logo {
        flex: 1 0 300px;
        max-width: 300px;
    }
    #primary-menu, #secondary-menu {
        --bs-nav-link-font-size: 1rem;
    }
}

@media (max-width: 1199px) {
    #site-header .container-fluid {
        gap: 0;
    }
    #site-body {
        padding: 80px 0;
    }
    #logo {
        flex: 1 0 270px;
        max-width: 270px;
        padding: 2rem 1rem;
    }
    #primary-menu, #secondary-menu {
        --bs-nav-link-font-size: .8rem;
        --bs-navbar-nav-link-padding-x: 1rem;
    }
}

@media (max-width: 991px) {
    #logo {
        flex: 1 0 230px;
        max-width: 230px;
        position: relative;
        z-index: 2;
    }
    #primary-menu, #secondary-menu {
        --bs-nav-link-font-size: 1.375rem;
    }
    #navbarNav {
        position: absolute;
        top: calc(100% + 11px);
        left: 0;
        right: 0;
        background-color: var(--bs-primary);
        z-index: 1;
        /* padding-top: 50px; */
    }
    #navbarNav .nav-item {
        border-top: solid 2px rgba(255,255,255,.5);
    }
    #primary-menu {
        padding-top: 50px;
    }
    #primary-menu .nav-item:first-child {
        border-top: none;
    }
    #navbarNav .nav-link {
        text-align: center;
    }








#nav-icon {
  width: 28px;
  height: 36px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  display: inline-block;
}
#nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #FFF;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
  top: 0px;
}
#nav-icon span:nth-child(2), #nav-icon span:nth-child(3) {
  top: 12px;
}
#nav-icon span:nth-child(4) {
  top: 24px;
}
#nav-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.navbar-toggler { padding: 13px 15px; border-radius: 0; background-color: var(--lightBlue); height: 55px; border: none; }
.navbar-toggler:hover, .navbar-toggler:focus, .navbar-toggler.open { background-color: var(--lightBlue); }
.navbar-toggler-icon { color: #FFF; display: flex; width: auto; height: auto; background: none; }
.navbar-toggler-icon em { display: inline-block; font-size: 13px; margin-right: 10px; line-height: 20px; font-style: normal; }
.navbar-toggler:hover #nav-icon span, .navbar-toggler:focus #nav-icon span, .navbar-toggler.open #nav-icon span { background: #FFF; }

}

@media (max-width: 767px) {
    #site-body {
        padding: 50px 0;
    }
    #site-body.login-bg {
        padding-top: 180px;
    }
    .navbar-brand:not(#logo) {
        flex-direction: column;
        max-width: 100%;
        align-items: center;
        margin-bottom: -150px;
    }
    .navbar-brand#logo {
        gap: 1rem;
    }
    .navbar-brand:not(#logo) .spacer {
        width: 100%;
        height: 1px;
        max-width: 100%;
    }
    .navbar-brand:not(#logo) h1 {
        white-space: normal;
        text-align: center;
    }
    #footer-text {
        padding-left: 1rem;
        padding-right: 1rem;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
    }
}