:root {
            --mega-left-width: 260px;
            --color-primary: #174FA2;
            --active-underline: 3px solid var(--color-primary);
            --submenu-bg: #E8E8E8;

            /* light gray for optional hover affordance */
        }


        /* Highlight current page link */
        .offcanvas .list-group-item.active {
            color: var(--color-primary);
            /* Bootstrap primary */
            background-color: transparent;

        }


        .offcanvas .menu-toggle[aria-expanded="true"],
        .offcanvas .menu-toggle.active {
            color: var(--color-primary);
            /* Bootstrap primary */
            background-color: var(--submenu-bg) !important;
            padding-left: 6px;
            padding-right: 6px;
        }

        .offcanvas .menu-toggle .dropdown-caret {
            transition: 0.2s ease;
        }

        .offcanvas .menu-toggle[aria-expanded="true"] .dropdown-caret {
            transform: rotate(180deg);
        }


        /* Submenu active in mega dropdown */
        .dropdown-menu .submenu-item.active {
            background: var(--submenu-bg);
        }

        /* 0) Optional: hide the default Bootstrap caret if you use it anywhere */
        .navbar .dropdown-toggle::after {
            display: none !important;
        }

        /* 1) Make the icon rotatable */
        .dropdown-menu-icon {
            display: inline-block;
            /* critical for transform */
            transition: transform .25s ease;
            /* smooth rotation */
            vertical-align: middle;

        }

        /* 2) Rotate the icon when the dropdown (li) is hovered (desktop) */
        .navbar .nav-item.dropdown:hover .dropdown-menu-icon {
            transform: rotate(180deg);
        }

        /* 3) Also rotate when dropdown is OPEN (click/mobile/offcanvas) */
        .navbar .nav-item.dropdown.show .dropdown-menu-icon,
        .navbar .nav-item.dropdown:focus-within .dropdown-menu-icon {
            transform: rotate(180deg);
        }

        /* 4) If something else still overrides it, increase specificity with !important */
        nav.navbar .nav-item.dropdown:hover a.nav-link .dropdown-menu-icon {
            transform: rotate(180deg) !important;
        }


        .nav-link {
            color: #575757;
            font-size: 1rem;
            font-weight: 400;

            padding-inline: clamp(8px, 2.5vw, 12px) !important;

        }

        .navbar {
            height: 53px !important;
            padding: 0 !important;
        }

        /* ===== Top-level nav ===== */
        .navbar-nav .nav-link {
            padding: .8rem .70rem;
            border-bottom: 2px solid transparent;
            /* space for underline when active */
            transition: color .15s ease, border-color .15s ease;
        }



        /* ONLY the real page gets an underline (set .active on that link) */
        .navbar-nav .nav-link.active {
            border-bottom: var(--active-underline);
            color: #575757;

        }

        /* Highlight current page link */
        .offcanvas .list-group-item.active {
            color: var(--color-primary);
            /* Bootstrap primary */
            background-color: transparent;

        }

        .menu-toggle {
            border: none !important;
            background-color: transparent !important;

        }

        .list-group-item {
            padding: 5px 0px !important;
            border: none !important;
            font-weight: 400;
        }

        /* IMPORTANT: No hover/“open” underline for dropdown parents */
        /* (Removed any .nav-item.dropdown:hover > .nav-link rules) */

        /* ===== Desktop (>=992px) ===== */
        @media (min-width: 992px) {
            .desktop-nav {
                display: flex !important;
            }

            /* Hover/focus keeps dropdown open */
            .navbar .dropdown:hover>.dropdown-menu,
            .navbar .dropdown:focus-within>.dropdown-menu {
                display: block;
            }

            /* Constrain mega dropdown to container width */
            .dropdown.position-static>.dropdown-menu.mega {
                left: 0 !important;
                right: 0;
                transform: none;
                width: 100%;
                max-width: 100%;
            }

            /* Keep dropdown open while moving between left/right areas */
            .dropdown-menu.mega {
                pointer-events: auto !important;
                padding-bottom: 0px !important;
                padding-top: 0px !important;
            }

            .dropdown:hover .dropdown-menu.mega {
                display: block !important;
            }

            .dropdown-menu.mega:hover {
                display: block !important;
            }
        }

        /* ===== Mobile (<992px) ===== */
        @media (max-width: 991.98px) {
            .desktop-nav {
                display: none !important;
            }
        }

        /* ===== Mega dropdown styling ===== */
        .dropdown-menu.mega {

            border: 0;
            border-radius: 0;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
            background: #fff;
        }

        .dropdown-menu.mega::before {
            content: "";
            display: block;
            border-top: 1px solid rgba(0, 0, 0, .06);

        }

        .mega-grid {
            display: grid;
            grid-template-columns: var(--mega-left-width) 1fr;

            align-items: start;
        }

        .mega-left {
            padding: clamp(1rem, 4vw, 1.5rem) 0;
            border-right: 1px solid rgba(0, 0, 0, .08);
        }


        .mega-right {
            padding: clamp(1rem, 3vw, 1.8rem);

        }

        /* Submenu left: highlight ONLY on hover/focus (not sticky-active) */
        .submenu-item {
            display: block;
            padding: 8px 10px;
            margin-bottom: 1px;
            color: var(--bs-body-color);
            text-decoration: none;
            white-space: nowrap;
            color: #1a1a1a;
            transition: background-color .15s ease, color .15s ease;
        }

        /* If you want zero hover styling, remove this block: */
        .submenu-item:hover,
        .submenu-item:focus {
            background: var(--submenu-bg);
            color: var(--bs-body-color);
            font-weight: 500;
        }

        /* Right panels: default hidden; .active shown */
        .mega-right .panel {
            display: none;
            animation: fadeIn 140ms ease-out;
        }

        .mega-right .panel.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(2px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Desktop CTA */
        .schedule-demo-btn {
            padding: .5rem 1rem;
        }

        /* Mobile Offcanvas */
        .offcanvas-start {
            width: 320px;
        }

        @media (min-width: 576px) {
            .offcanvas-start {
                width: 360px;
            }
        }

        .offcanvas-footer {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            border-top: 1px solid rgba(0, 0, 0, .06);
            padding: 1rem;
            z-index: 2;
        }