@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Nunito:wght@400;700&family=Inter:wght@400;700&display=swap');

:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Nunito", sans-serif;
    --nav-font: "Inter", sans-serif;
    --primary-blue: #2a6ebb; /* Main blue color */
    --primary-light-blue: hsl(212, 63%, 55%); /* Main blue color */
    --secondary-blue: #1E4F91; /* Darker blue for accents */
    --background-white: #FFFFFF; /* Clean white background */
}

html, *{
    font-family: 'Poppins',ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",'Segoe UI Symbol',"Noto Color Emoji";
    
}
.breadcrumb{
    background-color: white;
    padding: 5px;
    max-width: max-content;
    position: sticky;
}
/* Override Bootstrap typography */
body {
    font-family: var(--default-font) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font) !important;
}

.navbar {
    font-family: var(--nav-font) !important;
}

.btn:focus,
.btn-close:focus,
.form-control:focus,
.navbar-toggler:focus, 
.navbar-toggler:active {
    outline: none !important;  /* Removes the default outline */
    /*box-shadow: none !important; /* Removes the Bootstrap glow effect */
    box-shadow: 0 0 2px var(--primary-blue) 
}

.btn-primary{
    background-color: var(--primary-blue);
}

.main-bg-color{
    background-color: var(--primary-light-blue);
}



.nav-bar, .link-light{
    color: hsl(0, 0%, 90%) !important;
}
.nav-bar, .link-light:hover{
    color: hsl(0, 0%, 100%) !important;
}

/* .text-primary{
    color: var(--primary-blue) !important;
} */