/* 1. Global Navbar Variables */
    :root {
        --my-blue-base: #1e96d3;   /* The light blue from your icons */
        --my-blue-hover: #0b6efd;  /* The darker blue you requested for hover */
    }

    /* 2. Style all Nav Links */
    .navbar-nav .nav-link {
        color: var(--my-blue-base) !important;
        font-weight: 500;
        transition: color 0.25s ease, opacity 0.25s ease;
        display: flex;
        align-items: center; /* Keeps icons and text aligned */
        gap: 8px;           /* Space between icon and text */
    }

    /* 3. Hover State for Text and Icons */
    .navbar-nav .nav-link:hover {
        color: var(--my-blue-hover) !important;
    }

    /* 4. Active State (the page you are currently on) */
    .navbar-nav .nav-link.active {
        color: var(--my-blue-hover) !important;
        font-weight: 700;
    }

    /* 5. Icon Handling */
    .navbar-nav .nav-link img {
        transition: filter 0.25s ease;
        /* Matches the images to the text behavior */
    }

    .navbar-nav .nav-link:hover img {
        /* This slightly adjusts the icon brightness on hover 
           to match the feel of the color change */
        filter: brightness(0.9) saturate(1.2);
    }

    /* 6. Fix for Mobile Toggler (the 'hamburger' menu) */
    .navbar-toggler {
        border-color: var(--my-blue-base);
    }
    
    .navbar-toggler-icon {
        /* This makes the hamburger lines match your blue theme */
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3Base path stroke='%231e96d3' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }
    /* The Animation: creates a glowing pulse effect */
@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(30, 150, 211, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(30, 150, 211, 0);
        transform: scale(1.05); /* Slightly grows for a heartbeat effect */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(30, 150, 211, 0);
        transform: scale(1);
    }
}

/* Apply to the toggler button */
.navbar-toggler {
    border: 2px solid #1e96d3 !important;
    animation: pulse-blue 1.5s infinite ease-in-out;
}

/* Stops the flashing once the menu is opened */
.navbar-toggler[aria-expanded="true"], 
.navbar-toggler:focus {
    animation: none;
    box-shadow: none;
    outline: none;
    border-color: #0b6efd !important;
}