header {
    position: fixed;
    z-index: 10;
    padding: 65px 150px 0;
    top: 0;
    left: 0;
    width: 100%;
    transition: ease 0.5s;

    &.navbar-fixed {
        padding-top: 0px;
        width: 100%;
        box-shadow: 0 0 4px #000000;
        background-color: #f8f9fa;
    }
  .navbar-nav{
    .nav-item{
        &.dropdown{
            .dropdown-menu{
                border-radius: 15px;
                padding: 18px;
                .dropdown-item{
                    padding: 10px 14px;
                    &:focus{
                        background-color: var(--color-100);
                        color: #ffffff;
                    }
                }
            }
        }
    }
  }
    .btn {
        font-size: 16px;
    }

    .navbar-toggler {
        &:focus {
            box-shadow: 0;
            border: 0;
            outline: 0;
        }
    }

    @media (max-width: 1600px) {
        padding: 65px 80px 0;
        font-size: 14px;

        .navbar-brand {
            img {
                max-width: 180px;
                height: auto;
            }
        }

        .btn {
            font-size: 14px;
        }
    }

    @media (max-width: 1400px) {
        padding: 65px 50px 0;

        .navbar-brand {
            img {
                max-width: 250px;
                height: auto;
            }
        }

    }

    @media (max-width: 768px) {
        padding: 46px 20px 0;

        .navbar-brand {
            img {
                max-width: 180px;
            }
        }

        &.navbar-fixed {
            padding-top: 0px;

        }
    }

    nav {
        background-color: #ffffff;
        border-radius: 15px;
        width: 100%;

        .nav-item {
            .nav-link {
                font-weight: var(--fw-bold);
                font-size: 16px;
                padding: 10px 12px;
                height: 87px;
                display: flex;
                align-items: center;
                position: relative;

                @media (max-width: 1400px) {
                    font-size: 14px;
                    height: 82px;
                }

                @media (max-width: 1199px) {
                    height: auto;
                }

                &.home {
                    font-size: 20px;
                    font-weight: var(--fw-normal);
                }

                &.active {
                    &::before {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        content: "";
                        height: 3px;
                        background: var(--color-100);
                        transition: cubic-bezier(0.075, 0.82, 0.165, 1);
                    }
                }

                &:hover {
                    &::before {
                        height: 3px;
                    }
                }

                &::before {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    content: "";
                    height: 0;
                    background: var(--color-100);
                    border: 0;
                }
            }
        }
    }
}

@media (min-width: 992px) {

    /* lg and up */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }

}