:root {
    --header-bg: #fff;
    --header-bc: #dee2e6;
    --header-link-tc: #4e4a4a;
    --header-link-hover-tc: #222;
    --header-link-after-bgi: linear-gradient(90deg, rgb(219, 166, 128) 26%, rgb(249, 205, 184) 56%, rgb(196, 124, 71) 94%);
    --header-dropdown-item-tc: #FFF;
    --header-dropdown-item-bg: rgb(196, 124, 71);
    --header-additional-btn-bg: rgb(0 156 134);
    --header-additional-btn-tc: #FFF;
    --header-additional-btn-bg-hover: rgb(7, 188, 162);
}

:root[data-bs-theme="dark"] {
    --header-bg: #1e1e1e;
    --header-bc: #2c2c2c;
    --header-link-tc: #dcdcdc;
    --header-link-hover-tc: #ffffff;
    --header-link-after-bgi: linear-gradient(90deg, rgb(249, 205, 184) 26%, rgb(219, 166, 128) 56%, rgb(196, 124, 71) 94%);
}

.page-header {
    font-family: 'Lato', sans-serif;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-bc);
}

.navbar-nav .nav-link {
    position: relative;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--header-link-tc);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.navbar-nav .nav-link:hover {
    color: var(--header-link-hover-tc);
}

.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:active::after,
.navbar-nav .nav-link:hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    background-image: var(--header-link-after-bgi);
}

.navbar-nav .nav-link:not(.active):not(:active):hover::after {
    opacity: .4;
}

#languageDropdown .dropdown-menu,
#themeDropdown .dropdown-menu {
    min-width: 70px !important;
}

#languageDropdown .dropdown-item.active, #languageDropdown .dropdown-item:active,
#themeDropdown .dropdown-item.active, #themeDropdown .dropdown-item:active {
    color: var(--header-dropdown-item-tc);
    background-color: var(--header-dropdown-item-bg);
}

.link-additional {
    padding: 0.25rem .5rem;
    font-size: 1.1rem;
}

.link-additional:hover {
    color: var(--header-additional-btn-bg-hover);
}

.btn-additional {
    background-color: var(--header-additional-btn-bg);
    color: var(--header-additional-btn-tc);
    padding: 0.5rem 1.1rem;
    font-size: 1.25rem;
}

.btn-additional:hover {
    background-color: var(--header-additional-btn-bg-hover);
    color: var(--header-additional-btn-tc);
}

@media (max-width: 991.98px) {
    .overlay-navbar {
        background-color: var(--header-bg);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1000;
    }
}

@media (max-width: 991.98px) {
    .page-header {
        /*height: 200px;*/
    }
}