Md breakpoint (navbar-expand-md) is triggering at bootstrap’s default 768px instead of defined 834px in styles.scss.

I tried changing the position of imports in the scss file but it does not seem to work. In the compiled css file, everything looks ok in the compiled css file (index.html, styles.scss and styles.css can be found in this repository- https://github.com/steffifii/stellar). In styles.css which is compiled, I can see that the breakpoint 834px is being used in the navbar-expand-md class.

@import './node_modules/bootstrap/scss/functions';
@import './node_modules/bootstrap/scss/variables';

$light: rgb(134, 134, 139);
$dark: rgba(9,17,25,255);
$primary: rgb(97, 137, 239);

$theme-colors: (
  "light": $light,
  "dark": $dark,
  "primary": $primary
);

$grid-breakpoints: (
    xs: 0,
    sm: 393px,
    md: 834px,
    lg: 1512px
);

$container-min-widths: (
    xs: 0,
    sm: 393px,
    md: 834px,
    lg: 1512px
);

@import './node_modules/bootstrap/scss/bootstrap';

Thank you in advance