.navbar-transparent {
    background: transparent;
    transition: background 0.3s ease-in-out;
}

.navbar-white {
    background: rgba(255, 255, 255, 0.47);
    transition: background 0.3s ease-in-out;
}

.shadow-sm {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

/* Existing styles for large screens */
@media (min-width: 992px) {
    .navbar-nav .nav-item .nav-link {
        position: relative;
        padding-bottom: 5px;
        margin: 0 10px;
    }

    .navbar-nav .nav-item .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4px;
        border-radius: 7px;
        background-color: #198754;
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .navbar-nav .nav-item .nav-link:hover::after,
    .navbar-nav .nav-item .nav-link.active::after {
        transform: scaleX(1);
    }

    .navbar-nav .nav-item .nav-link:hover,
    .navbar-nav .nav-item .nav-link.active {
        color: #198754;
    }
}

/* New styles for smaller screens */
@media (max-width: 991px) { 
    .navbar {
        background-color: rgba(255, 255, 255, 1) !important;
    }
    
    .navbar-nav .nav-item {
        text-align: center;
        display: flex; /* Add flex display */
        justify-content: center; /* Center items horizontally */
        align-items: center; /* Center items vertically */
    }

    .navbar-nav .nav-item .nav-link {
        display: inline-block;
        position: relative;
    }

    .navbar-nav .nav-item .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 4px;
        border-radius: 7px;
        background-color: #198754;
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .navbar-nav .nav-item .nav-link:hover::after,
    .navbar-nav .nav-item .nav-link.active::after {
        transform: scaleX(1);
    }

    .navbar-nav .nav-item .nav-link:hover,
    .navbar-nav .nav-item .nav-link.active {
        color: #198754;
    }

    /* Styles for Sign in button on smaller screens */
    .navbar-nav .nav-item .btn {
        font-size: 0.75rem; /* Smaller font size */
        padding: 0.25rem 0.5rem; /* Smaller padding */
        width: 30%; /* Adjust width to auto */
        margin: 0 15px; /* Center the button horizontally */
    }
}