#navbar {
    padding: 0.3rem 1rem;
    .navbar-brand {
        margin-right: 0px !important;
        img {
            width: 75px;
            object-fit: contain;
        }
    }

    .nav-item {
        .nav-link {
            margin: 0px 10px;
            font-weight: 500;
        }
    }

    // Button
    .navbar-toggler {
        position: relative;
        width: 30px;

        .icon-1,
        .icon-2,
        .icon-3 {
            background-color: var(--color);
            position: absolute;
            transition: all 0.1s linear;
            border-radius: 25px;
            width: 100%;
            height: 3px;
            right: 0px;
        }

        .icon-1 {
            top: 0px;
        }

        .icon-2 {
            top: 8px;
        }

        .icon-3 {
            top: -8px;
        }
    }
}

.active-navbar-toggler {
    .icon-1 {
        top: 0px;
        right: 0px;
        transform: rotate(45deg);
    }

    .icon-2 {
        top: 8px;
        right: 0px;
        display: none;
    }

    .icon-3 {
        top: 0px !important;
        right: 0px !important;
        transform: rotate(-45deg);
    }
}

/*
|
| Navbar Themes
|
*/

@mixin navbarMainTheme {
    background-color: #fff;

    box-shadow:
        rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
        rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;

    .navbar-brand {
        color: var(--main-color) !important;
    }

    .nav-link {
        color: var(--color) !important;
    }

    // Icon
    .icon-1,
    .icon-2,
    .icon-3 {
        background-color: var(--color) !important;
    }
}

.nav-main-theme {
    @include navbarMainTheme();
}
