/* Navbar background color */
.navbar {
   /* background-image: linear-gradient(to bottom, #00bf63, #fcfcfc); */
   background-color: #fcfcfc;
   box-shadow: -2px -2px 5px 0px inset #00bf63;
}
    
    

.navbar-nav .nav-item
{
    padding: 0px 10px;
}
.logo
{
    width: 60px;             /* #00bf63
                               #cc2331 */
}
.navbar .navbar-nav .nav-link {
    color:  #00bf63;
    transition: color 0.3s ease; 
    font-weight: bold;
}

.navbar .navbar-nav .nav-link:hover {

 color: #cc2331;
}

.navbar .navbar-nav .nav-link.active {
    color: #cc2331; /* Red */
    border-bottom: 2px solid #cc2331; /* Red bottom border */
}
.navbar .navbar-brand {
    color:  #cc2331;
    transition: color 0.3s ease; 
    font-weight: bold;
}


.navbar .navbar-brand:hover {
    color:#8feec0;
    
}


/* Custom color for the navbar toggler icon */
.navbar-toggler {
    background-color:  #00bf63;
    border-color:#cc2331;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: flex; /* Align items */
    align-items: center;
    justify-content: center;
   
}

.navbar-toggler-icon {
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    background-size: cover;
    z-index: 2;
}


/* Center navbar items in the expanded dropdown */
@media (max-width: 991px) {
    .navbar-collapse {
        display: flex;
        justify-content: center; /* Center items */
    }
    .navbar-nav {
        text-align: center; /* Center text alignment */
    }
    .navbar-nav .nav-item {
        margin: 0.5rem 0; /* Add some spacing between items */
        border:1px inset #fff;
    }
    .navbar-toggler {
        position: absolute;
        top: 15px; /* Adjust as necessary */
        right: 15px; /* Adjust as necessary */
    }
    .navbar-toggler-icon
    {
        z-index: 2;
        color: #cc2331;
        display: inline-block;
        width: 30px;
        height: 30px;
    }
    .navbar .navbar-nav .nav-link:hover {
        background-image: linear-gradient(to bottom, #00bf63, #fcfcfc);
        border-bottom: none;
        color: #cc2331;
       }
}