#navbar {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    border-bottom: 2px solid var(--primary_color);
}

#navbar.nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

#navbar .nav-container {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

#navbar .nav-elements a, #navbar .secondary a  {
    font-family: var(--secondary_font);
    font-size: 1.05rem;
    letter-spacing: -0.2px;
    font-weight: 400;
}

#navbar .nav-elements a {
    line-height: 1;
    color: var(--primary_color);
    text-align: center;
    color: #101828;
    font-style: normal;
    line-height: 32px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border-bottom: none;
    height: 30px;
    width: 121px;
}

#navbar .nav-elements a:hover {
    border-bottom: none;
    padding: 0;
    margin: 0;
}

#navbar .secondary a {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="197" height="45" viewBox="0 0 197 45" fill="none"><path d="M0 24.7593C0.994629 17.1753 -2.12662 6.36207 5.99462 2.17527C9.73297 0.242899 19.5941 1.0341 25.1372 0.712041C50.4945 0.175274 76.7006 -0.254144 102.096 0.175271C117.307 0.443656 132.454 0.819382 147.6 1.30247C160.813 1.73189 175.638 1.62456 188.271 3.34223C194.394 4.14738 198.068 6.40181 196.714 11.9305C195.49 16.9225 195.49 22.0755 196.005 27.1211C196.392 30.9859 197.552 35.6021 195.039 39.3058C192.525 43.0632 187.949 44.7809 183.05 44.6735C159.782 44.3514 135.999 44.6735 112.924 43.8147C95.9724 43.1705 78.4945 42.6753 62.0695 42.1507C52.4945 42.1507 4.36742 43.8147 2.70709 39.3058C1.22464 35.28 0.128909 30.0733 0 24.7593Z" fill="%237BC0C9"/></svg>');
    width: 197px;
    height: 45px;
    flex-shrink: 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: none;
    padding: 0;
    margin: 0;
}

#navbar .secondary a.active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="197" height="46" viewBox="0 0 197 46" fill="none"><path d="M0 25.1158C0.994629 17.5317 -2.12662 6.71854 5.99462 2.53173C9.73297 0.599359 19.5941 1.39056 25.1372 1.0685C50.4945 0.531734 76.7006 0.102316 102.096 0.531732C117.307 0.800117 132.454 1.17584 147.6 1.65894C160.813 2.08835 175.638 1.98102 188.271 3.69869C194.394 4.50384 198.068 6.75828 196.714 12.287C195.49 17.279 195.49 22.4319 196.005 27.4776C196.392 31.3423 197.552 35.9586 195.039 39.6623C192.525 43.4197 187.949 45.1373 183.05 45.03C159.782 44.7079 135.999 45.0299 112.924 44.1711C95.9724 43.527 78.4945 43.0317 62.0695 42.5071C52.4945 42.5071 4.36742 44.1711 2.70709 39.6623C1.22464 35.6365 0.128909 30.4298 0 25.1158Z" fill="%230098A9"/></svg>');
}

#navbar .secondary a:hover {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.30));
}

#navbar .logo img {
    width: 210px;
    height: auto;
}

#navbar a {
    border-bottom: 0;
    padding-bottom: 0;
}

#navbar .nav-elements a:hover {
    color: var(--primary_color);
}

#navbar .nav-elements a:hover, #navbar .logo a:hover, #navbar .secondary a:hover {
    border-bottom: none;
}

#navbar .logo img:hover {
    filter: grayscale(0);
}

#navbar .nav-elements  .active-state {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="121" height="30" viewBox="0 0 121 30" fill="none"><path d="M119.812 6.56646C118.54 3.22503 115.102 3.51247 111.664 3.36875C106.129 3.11725 100.594 2.9376 95.0587 2.79388C83.9885 2.54238 72.9183 2.47052 61.8481 2.57831C51.1561 2.65017 40.4641 2.3268 29.8064 1.60822C24.4776 1.24892 19.1487 0.745914 13.8199 0.171045C10.2444 -0.224177 7.82281 -0.00860274 4.35048 1.60821C2.18457 2.61423 0.728653 4.33884 0.350479 6.56646C-0.0964554 9.22522 0.6255 13.3591 0.350464 16.0538C0.00666848 19.503 -0.688273 21.5388 1.89019 24.0538C5.87822 27.8983 10.657 26.7946 15.7108 27.3695C39.3983 30.0642 63.4296 29.9923 87.2202 28.627C94.2336 28.2318 101.281 28.0881 108.295 27.5132C113.142 27.118 120.568 27.2976 120.809 20.507C120.947 16.4829 120.74 12.2792 120.225 8.29106C120.156 7.60841 119.984 7.06947 119.812 6.56646ZM11.1727 21.3693C11.2071 21.2975 11.2414 21.2615 11.2758 21.1897C11.379 21.2615 11.4821 21.3334 11.5852 21.4052C11.4477 21.4052 11.3102 21.4052 11.1727 21.3693Z" fill="%230098A9"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 121px;
    height: 30px;
    position: absolute;
    top: 25px;
    bottom: 0;
    z-index: -2;
    transition: left 0.3s ease-out;
}

#navbar .nav-elements a.active {
    color: #fff;
}

#navbar .toggler {
    display: none;
}

#nav-mobile-container {
    position: absolute;
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--primary_color);
    padding: 40px 0;
    margin: 0;
    display: none;
    top: 77px;
    right: -100%;
}

#nav-mobile-container li {
    display: block;
    list-style: none;
    padding: 10px 0;
    text-align: center;
    margin: 0;
}

#nav-mobile-container li.secondary {
    display: flex;
    justify-content: center;
}

#nav-mobile-container li a {
    color: #fff;
    font-family: var(--secondary_font);
    font-size: 16px;
    line-height: 18px;
    display: flex;
    width: 100%;
    height: 32px;
    align-items: center;
    justify-content: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

#nav-mobile-container li a:hover, #nav-mobile-container li a.active {
    background-image: url('/images/link-active-mobile.png');
    color: var(--primary_color);
}

@media (max-width: 1024px) {
    #navbar .nav-container {
        justify-content: space-between;
        padding: 12px;
    }

    #navbar .nav-container .toggler {
        display: flex;
        align-items: center;
    }

    #navbar .nav-container .toggler button {
        color: var(--primary_color);
        background-color: transparent;
        border: none;
        padding: 0;
        margin: 0;
        background-image: url('data:image/svg+xml,<svg viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 32 32"><path d="M4 10h24a2 2 0 0 0 0-4H4a2 2 0 0 0 0 4zm24 4H4a2 2 0 0 0 0 4h24a2 2 0 0 0 0-4zm0 8H4a2 2 0 0 0 0 4h24a2 2 0 0 0 0-4z" fill="%230098a9" class="fill-000000"></path></svg>');
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
    }

    #navbar .nav-elements, #navbar .secondary {
        display: none;
    }

    #nav-mobile-container {
        display: block;
    }

    #navbar .logo img {
        width: 160px;
        height: auto;
    }
}