@import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8";

/* Fonts */
: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: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #012970; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #4154f1; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #012970;  /* The default color of the main navmenu links */
    --nav-hover-color: #4154f1; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #4154f1; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
    --background-color: #f9f9f9;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #252525;
    --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}


/*--------------------------------------------------------------
# Bootstrap Fixes/Extensions
--------------------------------------------------------------*/
.mt-n1 {
    margin-top: -0.25rem !important;
}

.mt-n5 {
    margin-top: -3rem !important;
}

.mb-n5 {
    margin-bottom: -3rem !important;
}

.min-vh-75 {
    min-height: 75vh !important;
}

.popover-header-primary {
    --bs-popover-header-bg: var(--bs-primary);
    --bs-popover-header-color: var(--bs-white);
}
.popover-header-secondary {
    --bs-popover-header-bg: var(--bs-secondary);
    --bs-popover-header-color: var(--bs-white);
}
.popover-header-success {
    --bs-popover-header-bg: var(--bs-success);
    --bs-popover-header-color: var(--bs-white);
}
.popover-header-info {
    --bs-popover-header-bg: var(--bs-info);
    --bs-popover-header-color: var(--bs-black);
}
.popover-header-warning {
    --bs-popover-header-bg: var(--bs-warning);
    --bs-popover-header-color: var(--bs-black);
}
.popover-header-danger {
    --bs-popover-header-bg: var(--bs-danger);
    --bs-popover-header-color: var(--bs-white);
}
.popover-header-light {
    --bs-popover-header-bg: var(--bs-light);
    --bs-popover-header-color: var(--bs-gray);
}
.popover-header-dark {
    --bs-popover-header-bg: var(--bs-dark);
    --bs-popover-header-color: var(--bs-white);
}

i.bi.blue { color: var(--bs-blue); }
i.bi.indigo { color: var(--bs-indigo); }
i.bi.purple { color: var(--bs-purple); }
i.bi.pink { color: var(--bs-pink); }
i.bi.red { color: var(--bs-red); }
i.bi.orange { color: var(--bs-orange); }
i.bi.yellow { color: var(--bs-yellow); }
i.bi.green { color: var(--bs-green); }
i.bi.teal { color: var(--bs-teal); }
i.bi.cyan { color: var(--bs-cyan); }
i.bi.black { color: var(--bs-black); }
i.bi.white { color: var(--bs-white); }
i.bi.gray { color: var(--bs-gray); }
i.bi.gray-dark { color: var(--bs-gray-dark); }
i.bi.gray-100 { color: var(--bs-gray-100); }
i.bi.gray-200 { color: var(--bs-gray-200); }
i.bi.gray-300 { color: var(--bs-gray-300); }
i.bi.gray-400 { color: var(--bs-gray-400); }
i.bi.gray-500 { color: var(--bs-gray-500); }
i.bi.gray-600 { color: var(--bs-gray-600); }
i.bi.gray-700 { color: var(--bs-gray-700); }
i.bi.gray-800 { color: var(--bs-gray-800); }
i.bi.gray-900 { color: var(--bs-gray-900); }
i.bi.primary { color: var(--bs-primary); }
i.bi.secondary { color: var(--bs-secondary); }
i.bi.success { color: var(--bs-success); }
i.bi.info { color: var(--bs-info); }
i.bi.warning { color: var(--bs-warning); }
i.bi.danger { color: var(--bs-danger); }
i.bi.light { color: var(--bs-light); }
i.bi.dark { color: var(--bs-dark); }


/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
}

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

header li, header a {
    font-family: var(--nav-font);
    white-space-collapse: collapse;
    text-wrap-mode: nowrap;
    align-items: center;
    justify-content: space-between;
}


.bg-primary-subtle-gradient {
    background: linear-gradient(#FFFFFF 25%, var(--bs-primary-bg-subtle))
}

.bg-primary-subtle-igradient {
    background: linear-gradient(var(--bs-primary-bg-subtle) 25%, #FFFFFF)
}


.navbar-dark {
    background:#4f008c;
}

input:invalid {
    border-color: red;
}

i.collapsing {
    display: none;
}