:root {
    --bs-primary: #3780c0;
    --bs-dark: #0b0637;
}

/* Override other Bootstrap variables if needed */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

/* Override button classes */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.navbar-custom {
    background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6, p, li {
    color: var(--bs-dark) !important;
}

@media (max-width: 768px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: -75%;
        width: 75%;
        height: 100%;
        background-color: #fff;
        transition: left 0.3s ease-in-out;
        z-index: 1050;
        padding-top: 60px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    }

    .navbar-collapse.show {
        left: 0;
    }

    .navbar-toggler {
        position: absolute;
        top: 15px;
        right: 15px; /* Removed conflicting left positioning */
        z-index: 1100;
        width: auto; /* Prevents full-width stretching */
        padding: 5px 10px;
    }

    .navbar-brand {
        margin-right: auto;
        z-index: 1101;
    }

    .navbar-nav {
        margin-top: 20px;
        padding-left: 15px;
    }

    .navbar-nav .nav-link {
        padding: 10px 15px;
        display: block;
    }
}