:root {
    --aqua: #64E0ED;
    --blue: #6A83D3;
    --dark-blue: #434E78;
    --grey: hsl(0, 0%, 90%);
    --green: #56D6C4;
    --orange: #F98C41;
    --pale-yellow: #FFF3D2;
    --pale-pink: #FFAED5;
    --pink: #ff94c8;
    --violet: #5555AA;
    --yellow: #F4B62C;
    --round-distance: 35px;
}
@font-face {
    font-family: "Delius";
    src: url("src/fonts/Delius-Regular.ttf");
}
@font-face {
  font-family: "Noto Sans";
  src: url("src/fonts/NotoSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans";
  src: url("src/fonts/NotoSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Noto Sans";
  src: url("src/fonts/NotoSans-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans";
  src: url("src/fonts/NotoSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans";
  src: url("src/fonts/NotoSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans";
  src: url("src/fonts/NotoSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans";
  src: url("src/fonts/NotoSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@keyframes blinkHalf {
    0%, 49.9999% {
        opacity: 0;
    }
    50%, 100% {
        opacity: 1;
    }
}
@keyframes blinkThird {
    0%, 33.3332% {
        opacity: 0;
    }
    33.3333%, 100% {
        opacity: 1;
    }
}
@keyframes blinkSixth {
    0%, 16.59% {
        opacity: 0;
    }
    16.6%, 100% {
        opacity: 1;
    }
}
@keyframes transFromTop {
    from {
        transform: translateY(-10vw);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes transFromRightFI {
    from {
        opacity: 0;
        transform: translateX(10vw);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes transFromBottomFI {
    from {
        opacity: 0;
        transform: translateY(10vw);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes transFromLeftFI {
    from {
        opacity: 0;
        transform: translateX(-10vw);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes scaleUp {
    from {
        transform: scale(.5);
    }
    to {
        transform: scale(1);
    }
}
@keyframes w100 {
    from {
        width: 0;
    }
    to {
        width: 100px;
    }
}
@keyframes w269 {
    from {
        width: 0;
    }
    to {
        width: 269px;
    }
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--violet) transparent;
    transition: background-color .3s ease, color .3s ease, filter .3s ease !important;
}
*::-webkit-scrollbar {
    width: 16px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: none;
}
a {
    text-decoration: none;
}
a:hover {
    cursor: pointer;
}
a, h4, h5, h6, p, li, span, ul, .notoSans {
    font-family: 'Noto Sans';
}
body {
    overflow-x: hidden;
}
body:has(> .menu:active), body:not(.loaded) {
    overflow: hidden !important;
}
body.loaded .loading {
    opacity: 0;
    transition: opacity 1s ease !important;
}
button {
    font-family: 'Noto Sans' !important;
    outline: none;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}
h1.title {
    font-weight: 900;
    font-size: 50px;
}
input, input:focus {
    outline: none;
}
svg {
    min-width: 16px;
    overflow: visible;
}
svg, svg path {
    transition: fill .3s ease;
}

.bgAqua {
    background-color: var(--aqua);
}
.bgBlue {
    background-color: var(--blue);
}
.bgDBlue, .btn.bgBlue:hover {
    background-color: var(--dark-blue);
}
.bgGreen {
    background-color: var(--green);
}
.bgOrange {
    background-color: var(--orange);
}
.bgPPink {
    background-color: var(--pale-pink);
}
.btn.bgPPink:hover {
    background-color: var(--pink);
}
.bgPYellow {
    background-color: var(--pale-yellow);
}
.bgViolet {
    background-color: var(--violet);
}
.bgWhite {
    background-color: white;
}
.btn.bgWhite:hover {
    background-color: var(--grey);
}

.aqua * {
    color: var(--aqua);
    fill: var(--aqua);
}
.blue * {
    color: var(--blue);
    fill: var(--blue);
}
.dBlue * {
    color: var(--dark-blue);
    fill: var(--dark-blue);
}
.green * {
    color: var(--green);
    fill: var(--green);
}
.pink * {
    color: var(--pale-pink);
    fill: var(--pale-pink);
}
.pYellow * {
    color: var(--pale-yellow);
    fill: var(--pale-yellow);
}
.orange * {
    color: var(--orange);
    fill: var(--orange);
}
.violet * {
    color: var(--violet);
    fill: var(--violet);
}
.white * {
    color: white;
    fill: white;
}
.yellow * {
    color: var(--yellow);
    fill: var(--yellow);
}

.aqua {
    color: var(--aqua) !important;
    fill: var(--aqua) !important;
}
.blue {
    color: var(--blue) !important;
    fill: var(--blue) !important;
}
.dBlue {
    color: var(--dark-blue) !important;
    fill: var(--dark-blue) !important;
}
.green {
    color: var(--green) !important;
    fill: var(--green) !important;
}
.pink {
    color: var(--pale-pink) !important;
    fill: var(--pale-pink) !important;
}
.pYellow {
    color: var(--pale-yellow) !important;
    fill: var(--pale-yellow) !important;
}
.orange {
    color: var(--orange) !important;
    fill: var(--orange) !important;
}
.violet {
    color: var(--violet) !important;
    fill: var(--violet) !important;
}
.white {
    color: white !important;
    fill: white !important;
}
.yellow {
    color: var(--yellow) !important;
    fill: var(--yellow) !important;
}
a.dBlue:hover {
    color: hsl(228, 28%, 27%);
}

.whiteHover:hover, .whiteHover:hover * {
    color: white !important;
    fill: white !important;
}

.roundDiv {
    border-radius: var(--round-distance);
}
.roundDivBottom {
    border-radius: 0 0 var(--round-distance) var(--round-distance);
}
.roundDivTop {
    border-radius: var(--round-distance) var(--round-distance) 0 0;
}

.h-fit {
    height: fit-content;
}
.w-fit {
    width: fit-content;
}

.tx-n100 {
    transform: translateX(-100%);
}
.ty-n100 {
    transform: translateY(-100%);
}
.tx-n100.ty-n100 {
    transform: translate(-100%, -100%);
}

header #CTA:hover {
    background-color: var(--dark-blue);
}
header .nav button.btn.dropdown-toggle {
    font-size: 1rem;
}
header .nav button.btn.dropdown-toggle:hover {
    opacity: .66;
}
header .nav a:not(.dropdown-item), header .nav .dropdown button {
    transition: all .175s ease;
}
header .nav button.dropdown-toggle::after , header .nav .dropdown:not(.nobtn) button::after {
    transform: translateY(50%);
}
header .nav .dropdown.nobtn button::after {
    display: none !important;
}
header .nav .dropdown ul.dropdown-menu {
    border-radius: 15px !important;
    z-index: 998;
    overflow: hidden;
}
header .nav .dropdown:hover .dropdown-menu {
    display: block;
}
header .nav .dropdown-item:hover {
    background-color: var(--blue);
    color: white;
}
header .nav .dropdown-menu {
    transition: none !important;
}
header .nav .dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}
header #searchBarContainer {
    border: 2px solid var(--blue);
    width: calc(500% / 6);
}
header #searchBar {
    background-color: transparent;
    width: 90%;
}
header #searchBarIcon svg {
    top: 50%;
    transform: translateY(-90%);
}
header #searchBar::placeholder {
    color: var(--blue);
}
header .logo {
    max-width: 100%;
}
header p, .btn p {
    margin-bottom: 0 !important;
}
footer {
    margin-top: -2px;
}
footer p:not(:has(> a)) {
    font-size: 15px;
}
.bTitle {
    font-family: 'Noto Sans' !important;
    font-weight: 900;
}
.loading {
    z-index: 9999;
}
.loading h1:nth-child(3) {
    animation: blinkSixth 3s linear infinite;
}
.loading h1:nth-child(4) {
    animation: blinkThird 3s linear infinite;
}
.loading h1:nth-child(5) {
    animation: blinkHalf 3s linear infinite;
}
.menu {
    z-index: 999;
}

:is(.menu, .newsletterPopUp):not(.active) {
    visibility: hidden !important;
}
:is(.menu, .newsletterPopUp) :is(a:hover, button#closeButton:hover) {
    filter: brightness(.8);
}
:is(.menu, .newsletterPopUp) button#closeButton {
    background-color: transparent;
}
.menu a {
    display: block;
    width: fit-content;
    margin: 0 auto;
}
.menu a#CTA {
    border-radius: 10px;
}
.menu h2 {
    font-size: 21px;
}
.menu .dropdownToggle {
    position: relative;
    padding-left: 26px;
    margin-left: calc(auto - 26px);
}
.menu .dropdownToggle:active, .menu .dropdownToggle:active h1 {
    color: var(--yellow) !important;
    filter: brightness(1) !important;
}
.menu .dropdownToggle::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s ease;
}
.menu .menuItem.active .dropdownToggle::before {
    transform: translateY(-50%) rotate(90deg);
}
.menu .dropdownContainer {
    transition: height .3s ease !important;
    min-height: 1px;
    width: fit-content;
    margin: 0 auto;
}
.menu .dropdownContainer a:hover * {
    color: var(--pale-pink) !important;
}
.menu .menuItem:not(.active) .dropdownContainer {
    height: 0;
}
.menu .menuItem.active .dropdownContainer {
    height: var(--h);
}
.newsletterPopUp {
    background-color: #434E78AA;
    z-index: 998;
}
.newsletterPopUp input[type=email] {
    border-color: var(--blue);
    color: var(--blue);
}
.newsletterPopUp input[type=submit]:hover {
    filter: brightness(.85);
}

.mb-n1 {
    margin-bottom: -.25rem;
}
.mb-n3 {
    margin-bottom: -1rem;
}
.mb-n4 {
    margin-bottom: -1.5rem;
}
.mb-n5 {
    margin-bottom: -3rem;
}
.mt-n2 {
    margin-top: -.5rem;
}
.mt-n4 {
    margin-top: -1.5rem;
}
.mt-n5 {
    margin-top: -3rem;
}
.me-n3 {
    margin-right: -1rem;
}
.me-n4 {
    margin-right: -1.5rem;
}
.me-n5 {
    margin-right: -3rem;
}
.ms-n5 {
    margin-left: -3rem;
}

.top-25 {
    top: 25%;
}
.bottom-25 {
    bottom: 25%;
}
.start-5 {
    left: 5%;
}
.start-25 {
    left: 25%;
}
.end-5 {
    right: 5%;
}

.text-justify {
    text-align: justify;
}

h1:not(:is(.notoSans, .bTitle)), h2:not(:is(.notoSans, .bTitle)), h3:not(:is(.notoSans, .bTitle)), .delius {
    font-family: 'Delius' !important;
}

@media (min-width: 1921px) {
    .loading h1 {
        font-size: 500%;
    }     
}
@media (min-width: 1400px) {
    .w-xxl-50 {
        width: 50% !important;
    }
}
@media (min-width: 1200px) {
    .show-uxl {
        display: none !important;
    }
    .w-xl-50 {
        width: 50% !important;
    }
    .newsletterPopUp > .newsletterContainer {
        width: 40% !important;
    }
    footer > .row > .col-xl-2:last-child {
        width: 10%;
    }
}
@media (max-width: 1199px) {
    .collapse-uxl {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .show-umd {
        display: none !important;
    }
    .w-md-75 {
        width: 75% !important;
    }
    .newsletterPopUp > .newsletterContainer {
        width: 60%;
    }
}
@media (min-width: 992px) {
    .bTitle {
        font-size: 70px;
    }
    .container-fluid-lg {
        max-width: 100% !important;
    }
    .show-ulg, .mobile {
        display: none !important;
    }
    .menu {
        visibility: hidden !important;
    }
    .newsletter .container {
        max-width: 700px !important;
    }
    .newsletterPopUp > .newsletterContainer {
        width: 55%;
    }
    .w-lg-100 {
        width: 100% !important;
    }
}
@media (min-width: 1600px) {
    .newsletterPopUp > .newsletterContainer {
        width: 30% !important;
    }
}
@media (max-width: 991px) {
    :root {
        --round-distance: 50px;
    }
    .bTitle {
        font-size: 50px !important;
    }
    .expand-ulg {
        min-width: 100%;
        width: 100%;
    }
    .collapse-ulg, .desktop {
        display: none !important;
    }
    .container-fluid-ulg {
        width: 100%;
        max-width: 100%;
    }
    .justify-content-center-ulg {
        justify-content: center !important;
    }
    .text-center-ulg {
        text-align: center !important;
    }
    footer p:not(:has(> a)) {
        font-size: 12px;
    }
}
@media (max-width: 900px) {
    .nav .col-2.col-xxl *:not(.dropdown-menu):not(li), .nav .col-3.col-xxl *:not(.dropdown-menu):not(li), .nav .col-4.col-xxl *:not(.dropdown-menu):not(li), #CTA > p {
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    footer .col-12.col-md-2.col-xl-1.d-flex {
        margin-top: 2rem;
    }
    .expand-md {
        min-width: 100%;
        width: 100%;
    }
    .collapse-umd {
        display: none !important;
    }
    .container-fluid-umd {
        width: 100%;
        max-width: 100%;
    }
    .newsletter button {
        transform: translate(1.5rem, .1rem);
    }
    .show-md {
        display: none !important;
    }
    .nav img {
        min-height: 60px;
        width: auto !important;
        flex-wrap: wrap;
    }
}
@media (max-width: 567px) {
    .nav img {
        height: auto !important;
        width: 100% !important;
        min-height: auto !important;
    }
    .btn {
        font-size: 15px;
    }
    footer img {
        max-width: 75%;
    }
    footer .col.d-flex:not(.flex-column) {
        flex-direction: column;
    }
    footer .d-flex:not(:is(.flex-column, .col)) {
        margin: .25rem 0;
    }
    footer .px-5 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
@media (max-width: 450px) {
    .bTitle {
        font-size: 40px !important;
    }
}