﻿.navbar {
    transition: all .5s ease;
}

.navbar-brand-logo {
    height: 36px;
    width: auto;
}

.nav-item {
    font-family: var(--sg-heading-font-family-medium);
}

    .nav-item .nav-link {
        font-size: 0.85rem;
        color: #ffffff;
    }

header .nav-item .nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 0.25rem;
    text-decoration-color: var(--sg-primary);
}

.nav-item .btn {
    margin-left: var(--bs-navbar-nav-link-padding-x);
    margin-right: var(--bs-navbar-nav-link-padding-x);
}

.navbar-scrolled {
    background-color: #fff;
}

    .navbar-scrolled .nav-item .nav-link {
        color: var(--sg-secondary) !important;
    }

.btn-search {
    border-style: none;
    background-color: transparent;
    transition: width 0.5s ease-in-out;
}

    .btn-search:focus ~ .input-search {
        width: 140px;
        border-radius: 0px;
        background-color: transparent;
        border-bottom: 1px solid #ffff;
        transition: width 0.5s ease-in-out;
    }

.navbar-scrolled .btn-search:focus ~ .input-search {
    border-bottom: 1px solid var(--sg-secondary) !important;
}

.input-search {
    border-style: none;
    transition: width 0.5s ease-in-out;
    background-color: #22a6b300;
    color: #ffff !important;
    height: 35px;
    width: 0px;
    font-size: 0.85rem;
}

.navbar-scrolled .input-search {
    color: var(--sg-secondary) !important;
}

.input-search:focus {
    width: 140px;
    border-bottom: 1px solid #ffff;
}

.navbar-scrolled .input-search:focus {
    border-bottom: 1px solid var(--sg-secondary) !important;
}

.input-search:focus-visible {
    outline: none;
    width: 140px;
}

.input-search::-webkit-input-placeholder {
    color: #ffff;
}

.navbar-scrolled .input-search::-webkit-input-placeholder {
    color: var(--sg-secondary) !important;
}

#search-dark {
    display: none;
}

.dropdown-menu {
    min-width: 200px;
}

    .dropdown-menu li a {
        display: flex;
    }

.dropdown-item > img {
    width: 16px;
    margin-right: 0.85rem;
}

.megamenu-item {
    font-size: 0.85rem;
}

.dropdown-item:hover {
    background-color: #FFFFFF5C !important;
}

    .dropdown-item:hover > .megamenu-item {
        color: var(--sg-primary) !important;
    }

@media (max-width: 992px) {
    .navbar {
        background-color: #fff;
    }

        .navbar .nav-item .nav-link {
            color: var(--sg-secondary) !important;
        }

    .input-search {
        color: var(--sg-secondary) !important;
    }

        .input-search:focus {
            border-bottom: 1px solid var(--sg-secondary) !important;
        }

    .btn-search:focus ~ .input-search {
        border-bottom: 1px solid var(--sg-secondary) !important;
    }

    .input-search::-webkit-input-placeholder {
        color: var(--sg-secondary) !important;
    }

    #search-dark {
        display: block;
    }

    #search-white {
        display: none;
    }
}
