/* global.css */
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
a {
  font-family: var(--font-family);
  color: var(--primary-font-color);
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background-color: var(--primary-bg-color) !important;
  color: var(--font-color-black);

  background-color: #f8f9fa; /* Fallback */
}


#bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: -1;
  pointer-events: none;
}

:root {
  /* Blacks and Whites */
  --black-color: hsl(0, 0%, 0%); /*#black*/
  --white-color: hsl(0, 0%, 100%); /*#white*/

  /* Background Colors */
  --primary-bg-color: hsl(0, 0%, 96%); /*F5F5F5*/

  /* Primary, Accent colors */
  --primary-color: hsl(207, 90%, 54%); /*#2196F3*/
  --primary-color-light: hsl(207, 89%, 68%); /*64B5F6*/
  --primary-color-dark: hsl(212, 80%, 42%); /*1565C0*/

  --accent-color: hsl(36, 100%, 50%); /*#FF9800*/
  --accent-color-light: hsl(36, 100%, 65%); /*#FFB74D*/
  --accent-color-dark: hsl(30, 100%, 48%); /*#F57C00*/

  /* Font color */
  --font-color-black: #000000; /*#000000*/
  --font-color-dark-gray: #666666; /*#666666*/
  --font-color-light-gray: #888888; /*#888888*/
  --font-color-white: #ffffff; /*#ffffff*/

  /* Fonts */
  --font-family: "Montserrat", sans-serif;

  /* Margin */
  --margin-xxs: 0.25rem;
  --margin-xs: 0.5rem;
  --margin-s: 0.75rem;
  --margin-m: 1rem;
  --margin-l: 1.25rem;
  --margin-xl: 1.75rem;
  --margin-xxl: 2.5rem;
  --margin-xxxl: 5rem;

  /* Padding */
  --padding-xxs: 0.25rem;
  --padding-xs: 0.5rem;
  --padding-s: 0.75rem;
  --padding-m: 1rem;
  --padding-l: 1.25rem;
  --padding-xl: 1.75rem;
  --padding-xxl: 2.5rem;

  /* font size */
  --font-size-xxs: 0.75rem;
  --font-size-xs: 0.875rem;
  --font-size-s: 1rem;
  --font-size-sm: 1.125rem;
  --font-size-m: 1.25rem;
  --font-size-l: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3rem;
  --font-size-xxxl: 4rem;
  --font-size-xxxxl: 6rem;
  --font-size-xxxxxl: 8rem;
  --font-size-xxxxxxl: 10rem;
}

/* Standard card styling */
.card {
  border-radius: 15px !important;
  border: none !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 15px !important;
  transition: all 0.3s ease !important;
}

/* Minimal card hover */
.card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Button styling with hover effects */
.btn {
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--primary-color-dark) !important;
  border-color: var(--primary-color-dark) !important;
}

.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* Page headers */
h2.page-header {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
}

/* classes for each color */
/* Black and White */
.black-color {
  color: var(--black-color) !important;
}
.white-color {
  color: var(--white-color) !important;
}
/* Background Colors */
.primary-bg-color {
  background-color: var(--primary-bg-color) !important;
}

/* Primary, Accent colors */
.primary-color {
  color: var(--primary-color) !important;
}
.primary-color-as-all {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.primary-color-light {
  color: var(--primary-color-light) !important;
}
.primary-color-light-as-all {
  background-color: var(--primary-color-light) !important;
  border-color: var(--primary-color-light) !important;
}

.primary-color-dark {
  color: var(--primary-color-dark) !important;
}
.primary-color-dark-as-all {
  background-color: var(--primary-color-dark) !important;
  border-color: var(--primary-color-dark) !important;
}

.accent-color {
  color: var(--accent-color) !important;
}
.accent-color-as-all {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.accent-color-light {
  color: var(--accent-color-light) !important;
}
.accent-color-light-as-all {
  background-color: var(--accent-color-light) !important;
  border-color: var(--accent-color-light) !important;
}

.accent-color-dark {
  color: var(--accent-color-dark) !important;
}
.accent-color-dark-as-all {
  background-color: var(--accent-color-dark) !important;
  border-color: var(--accent-color-dark) !important;
}

/* Font color */
.font-color-black {
  color: var(--font-color-black) !important;
}
.font-color-dark-gray {
  color: var(--font-color-dark-gray) !important;
}
.font-color-light-gray {
  color: var(--font-color-light-gray) !important;
}
.font-color-white {
  color: var(--font-color-white) !important;
}