.offcanvas-backdrop {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }

    .navbar-toggler:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .navbar-nav .nav-item {
        text-align: center;
        font-size: 18px;
        font-weight: 500;
    }

    .navbar-nav .nav-link:hover {
        color: #1e255b !important;
        transition: color 0.3s ease;
    }

    .navbar-nav .nav-link.active {
        color: #2a3086 !important;
        font-weight: 600;
        border-bottom: 3px solid #2a3086;
        padding-bottom: 5px;
        transition: border-bottom 0.3s ease;
    }

    .dropdown-menu .dropdown-item.active {
        background-color: #2a3086;
        color: #ffffff !important;
        border-radius: 5px;
    }

    .dropdown-menu {
        background-color: #fff !important;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        color: #fff;
    }

    .dropdown-menu .dropdown-item {
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .dropdown-menu .dropdown-item:hover {
        background-color: #f2f2f2;
        color: #2a3086;
    }

    .dropdown-item:focus,
    .dropdown-item:hover {
        background-color: #e9ecef;
    }

    .dropdown-item.active {
        background-color: #2a3086 !important;
        color: #fff !important;
    }

    .nav-item.dropdown .nav-link.active {
        color: #2a3086 !important;
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .offcanvas.offcanvas-end {
            width: 70% !important;
        }

        .dropdown .dropdown-menu .dropdown-item {
            text-wrap: wrap;
            font-size: 15px;
        }

        .dropdown-toggle:focus {
            outline: none !important;
            box-shadow: none !important;
        }
    }

[data-generated-style="component-navbar-1"] { transition: all 0.3s !important; }
