/* sertdyifuglo;hpj'k;l */
/* serrtdyfugiophjp'iuydtfugiohpjhigufydtsrdyfugihojpk */
.header{
    background-color: #EAF4E8;
}

.logo {
    display: flex;
    align-items: center;
    /* gap: 10px; */
    font-weight: 600;
    font-size: 1.2rem;
    color: #2B3C2C;
}

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* NAVBAR */
.navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    /* padding: 10px 0; */
    position: relative;
    flex-wrap: wrap;
    /* background-color: rgb(179, 217, 199); */
    opacity: 1;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    /* background-color: #41d141; */
}

.nav-left a {
    text-decoration: none;
    color: #3B432C;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.nav-left a:hover {
    background-color: #4e5e4c;
}

/* DROPDOWN MENU */
.dropdown {
    position: relative;
}

.dropdown-content {
    /* display: none; */
    /* position: absolute; */
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    /* min-width: 10px; */
    z-index: 100;
    top: 120%;
    left: 0;
    border-radius: 6px;
    overflow: hidden;
    padding: 8px 0;
}

.dropdown-content a,
.dropdown-content button {
    /* padding: 10px 16px; */
    text-align: left;
    background: none;
    border: none;
    /* width: 100%; */
    font-size: 0.95rem;
    color: #2e3d2e;
    cursor: pointer;
    /* margin-right: 200px; */
}

.dropdown-content a:hover,
.dropdown-content button:hover {
    background-color: #f0f9f0;
}

/* Show Dropdown on Hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* WELCOME USER TEXT */
#welcomeUser {
    font-weight: 500;
    margin-right: 5px;
}

/* CART LINK */
.cart-link {
    font-weight: 500;
    color: #2e3d2e;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
}

.cart-link:hover {
    background-color: #e0f5dd;
}

/* MENU ICON FOR MOBILE */
.menu-icon {
    display: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 10px;
    /* position: absolute; */
    margin: 0px;
    /* padding: 0px; */
}

/* RESPONSIVE NAV */
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-left {
        flex-direction: column;
        width: 100%;
        display: none;
    }

    .nav-left a,
    .dropdown {
        width: 100%;
    }

    .navbar.active .nav-left {
        display: flex;
    }

    .menu-icon {
        display: block;
        /* align-self: flex-end; */
    }
}






.header{
    opacity: 1;
}














#auth-options.dropdown-content{
    background-color: #4e5e4c;
    width: auto;
    padding: 0px;
    max-width: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-right: 200px;
}




.dropdown-content{
    margin-right: 200px;
}




#user_credentials{
    background-color: #2B3C2C;
}



/* Change the color of the stars */
.stars {
  color: rgb(0, 0, 0); /* You can use any color like #FFD700, rgb(255, 215, 0) */
}

/* Change the color of the rating bar fill (the filled portion) */
.rating-bar .fill {
  background-color: #000000; /* Change this color to the desired one */
}

/* Optional: Change the background color of the unfilled portion of the bars */
.rating-bar .bar {
  background-color: #e0e0e0; /* Light grey background for the empty portion of the bar */
}

/* Optionally change the text color of the rating percentage */
.rating-bar span {
  color: #333; /* Dark color for the text */
}

















#menu-icon{
    color: #000000;
    background-color: #ffffff;
}

























































/* Ensure the navbar items are in a row on small screens */
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: row;  /* Keep logo and icon on the same line */
        align-items: center;  /* Vertically align them */
        justify-content: space-between;  /* Add space between logo and icon */
        gap: 0px;
    }

    .nav-left {
        display: none;  /* Hide nav links initially on mobile */

    }



    .menu-icon {
        display: block;  /* Display the hamburger icon */
        font-size: 1.5rem;  /* Icon size */
        color: #2e3d2e;  /* Icon color */
        background-color: transparent;  /* Transparent background */
        padding: 10px;  /* Padding around the icon */
        margin-left: auto;  /* Position it on the right side */
        cursor: pointer;  /* Pointer cursor for clickable icon */
    }

    .navbar.active .nav-left {
        display: flex;  /* Show links when active */
    }

    /* Fixed position for the hamburger icon */
    .menu-icon {
        position: fixed;           /* Fixed position relative to the viewport */
        top: 0px;                 /* Distance from the top of the viewport */
        right: 10px;               /* Distance from the right edge of the viewport */
        font-size: 1rem;           /* Adjust the icon size */
        color: #ffffff;            /* Icon color */
        background-color: transparent; /* Transparent background */
        cursor: pointer;          /* Pointer cursor on hover */
        z-index: 9999;             /* Ensure it stays on top of other content */
    }


    /* Fixed position for the hamburger icon */
    .menu-icon {
        position: fixed;               /* Fixed position relative to the viewport */
        top: 0px;                     /* Distance from the top of the viewport */
        right: 20px;                   /* Distance from the right edge of the viewport */
        font-size: 1.5rem;               /* Adjust the icon size */
        color: #2e3d2e;                /* Icon color */
        background-color: transparent; /* Transparent background */
        border: none;                  /* Ensure there is no border */
        padding: 0;                    /* Remove any padding around the icon */
        margin: 0;                     /* Remove any margin around the icon */
        cursor: pointer;              /* Pointer cursor on hover */
        z-index: 9999;                 /* Ensure it stays on top of other content */
        display: inline-block;         /* Make it inline-block for precise positioning */
        box-sizing: border-box;        /* Ensures no extra space is added around the icon */
    }


}