.navbar{
padding: 30px 0;
margin: 0 60px;
@media screen and(max-width:768px) {
    margin: 0 20px;
}

   .navbar-collapse{
    transition: all 0.35s ease-out;
    transform-origin: center left;
   }
    .navbar-nav{
        margin-left: auto;
        background: $color-white;
     
        .nav-item{
            padding: 0 15px;
            text-align: center;
        }
        .nav-link{
            color: black;
            padding-left:  15px;
            &:hover{
                color: $color-whitesmoke;
            }
                img{
                    width: 100%;
                    max-width: 25px;
                }
            
        }
    }
    .nav-shop{
        margin-left: auto;
        .nav-link{
            color: $color-black;
            padding-left:  15px;
            &:hover{
                color: rgba(0, 0, 0, 0.747);
            }
                
            
        }
    }
}

.bg-light{
    background-color:transparent !important;

}
.navbar-light {

    .navbar-brand{
        color: black !important;
        font-size: 35px;
        font-family: $font-offer;

        @media screen and(max-width:768px) {
            font-size: 25px;
        }
    }

    .brand-shop{
        color: $color-black !important;
    }
}
.navbar-light .navbar-nav .active > 
.nav-link, .navbar-light .navbar-nav 
.nav-link.active, .navbar-light .navbar-nav
 .nav-link.show, .navbar-light .navbar-nav .show > .nav-link{

color: rgb(255, 255, 255);
border:1px solid;
border-color: transparent;
background-image:linear-gradient(360deg, #fff 2%, #00000059 6%) !important;
padding-bottom: 10px;

}

.new{
    fill: black;
    &:hover{
        fill:rgba(75, 75, 75, 0.747)!important; 
    }
}



.navbar-toggler span {
    display: block;
    background-color: #4f4f4f;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}


/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}

/**
 * Animate collapse into X.
 */

/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}
/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button  */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg) ;
}


/**
 * Animate collapse open into hamburger menu
 */

/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg) ;
}
/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
    opacity: 1;
}
/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg) ;
}