:root {
        --accent: #2563eb;
    }

    /* --- Nav custom --- */
    .navbar {
        background-color: #d9faff !important;
        border-radius: 20px;
        top: 1rem;
        left: 1rem;
        right: 1rem;
        position: fixed !important;
        padding: 0rem 2rem;
        z-index: 10;
        border: 1px solid #00ddff !important;
        border-radius: 10px;
    }

    .navbar-brand img {
        height: 50px;
        object-fit: contain;
    }

    /* underline effect */
    .navbar-nav .nav-link {
        position: relative;
        font-weight: 500;
        color: #4a5a7d;
        margin-right: 2rem;
    }

    .navbar-nav .nav-link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 3px;
        background-color: var(--accent);
        transition: width .3s ease-in-out;
    }

    .navbar-nav .nav-link:hover::after {
        width: 100%;
    }

    .navbar-nav .nav-link:hover {
        color: #000;
    }

    /* login / signup buttons */
    .btn-login {
        color: #2a63d4;
        margin-right: 1.5rem;
        font-weight: 500;
        text-decoration: none;
        position: relative;
    }

    .btn-login::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 3px;
        background-color: var(--accent);
        transition: width .3s ease-in-out;
    }

    .btn-login:hover::after {
        width: 100%;
    }

    .btn-signup {
        background: #2a63d4;
        color: #fff;
        font-weight: 600;
        border-radius: 8px;
        padding: 6px 16px;
        text-decoration: none;
    }

    .btn-signup:hover {
        background: #1d4fc3;
        color: #fff;
    }