:root {
  /* Font Families */
  --font-family-feature: 'Montserrat', Arial, sans-serif ;
  --font-family-body: 'Montserrat', Arial, sans-serif;

  /* Container Sizes */
  --container-max-width-xl: 1400px;

  /* Base Colors */
  --gray: #1B1D21;
  --brand-default: #303047;
  --brand-primary: #0acabb;
  --brand-secondary: #303047;
  
  /* Brand Primary Hover Shades */
  --brand-primary-90: #09b5a9; /* 90% of primary - slightly darker */
  --brand-primary-80: #08ada3; /* 80% of primary - medium darker */
  --brand-primary-70: #08a197; /* 70% of primary - darker for gradient end */
  
  /* Blog Modern Quote Box */
  --blog-modern-quote-box-base-color-light-52: #9999a9; /* Lightened 52% from #303047 */

  /* RGB values for transparency (CRITICAL for glassmorphic effects!) */
  --brand-default-rgb: 48, 48, 71;       /* #303047 */
  --brand-primary-rgb: 10, 202, 187;     /* #0acabb */
  --brand-secondary-rgb: 48, 48, 71;     /* #303047 */
  --navbar-text-color-rgb: 48, 48, 71;   /* #303047 - using brand-default */

  /* Modal Styles */
  --modal-header-background: var(--brand-default);

  /* Logo Sizes */
  --logo-max-width-sm: 180px;
  --logo-max-width-md: 200px;
  --logo-max-width-lg: 220px;
  --logo-max-width-xl: 250px;

  /* Navbar Styles */
  --navbar-font-weight: 600;
  --navbar-btn-bg: var(--brand-primary);
  --navbar-font-size-lg: 1.2rem;
  --navbar-font-size-md: 0.71rem;
  --navbar-text-color: var(--brand-default);
  --navbar-text-color-active: var(--brand-primary);

  --navbar-bg-with-background: transparent;
  --navbar-bg-with-background-scrolled: var(--brand-secondary);
  --navbar-text-color-with-background: white;
  --navbar-text-color-with-background-scrolled: white;
  --navbar-text-color-active-with-background: var(--brand-primary);

  /* Anchor Styles */
  --anchor-margin: -70px;

  /* Jumbotron Styles */
  --jumbotron-font-weight-h1: 700;
  --jumbotron-font-size-h1: 50px;
  --jumbotron-font-size-lead: 20px;
  --jumbotron-font-size-p: 16px;
  --jumbotron-image-bg-banner-padding: 5rem 0 3rem 0;
  --jumbotron-font-color: white;
  --jumbotron-overlay-color: white;
  --jumbotron-overlay-color-opacity: 0.8;
  --jumbotron-min-height-desktop: 250px;
  --jumbotron-min-height-mobile: 250px;
  --jumbotron-btn-background-primary: var(--brand-primary);
  --jumbotron-btn-background-secondary: var(--brand-secondary);
  --jumbotron-margin-bottom-sm: 2rem;
  --jumbotron-margin-bottom-lg: 2rem;
  --jumbotron-banner-top-margin: -83px;
  --jumbotron-image-bg-font-color: white;

  /* Jumbotron Search */
  --jumbotron-search-btn-color: var(--brand-secondary);
  --jumbotron-search-border-radius: 5px;

  /* Typography */
  --font-weight-semi-bold: 600;
  --line-height-base: 1.4;
  --font-weight-h2: 700;
  --h2-font-size-lg: 32px;

  /* Tree Styles */
  --tree-text-transform: capitalize;
  --tree-title-text-align: center;

  --cta-form-btn-color: var(--brand-primary);
  --cta-form-btn-text-color: var(--brand-default);
  --cta-form-link: var(--brand-primary);

  /* Button Colors */
  --btn-primary-font-color: var(--brand-default);
  --btn-secondary-font-color: white;
  --btn-feature-font-color: white;
  --bs-btn-font-weight: 600;

  /* Bootstrap RGB Values - Using Brand Colors */
  --bs-primary-rgb: 10, 202, 187;
  --bs-secondary-rgb: 48, 48, 71;

  /* Bootstrap 5 Variable Overrides - Typography and Body */
  --bs-body-font-family: var(--font-family-body);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: var(--line-height-base);

  /* Bootstrap 5 Color Variables */
  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-secondary);
  --bs-body-color: var(--gray);
  --bs-body-color-rgb: 27, 29, 33;
  /* #1B1D21 in RGB */

  /* Bootstrap 5 Link Variables */
  --bs-link-color: var(--brand-secondary);
  --bs-link-color-rgb: 48, 48, 71;
  --bs-link-hover-color: var(--brand-secondary);
  --bs-link-hover-color-rgb: 48, 48, 71;

  /* Bootstrap 5 Heading Variables */
  --bs-heading-color: var(--gray);

  /* Chat Styles */
  --chat-padding-top-xl: 82.64px;
  --chat-padding-top-lg: 75.89px;
  --chat-padding-top-sm: 64.64px;
  --chat-feature-color: var(--brand-primary);
  --chat-feature-color-light: #ebebf1;
  /* Lightened 70% from #0acabb */
  --chat-sent-bg: var(--brand-primary);
  --chat-feature-color-dark-10: #09b5a9; /* Darkened 10% from #0acabb */
  --chat-feature-color-50: rgba(10, 202, 187, 0.5); /* 50% opacity of #0acabb */
  
  /* Additional Gray Shades */
  --gray-lighter: #f8f9fa; /* Light gray for backgrounds */
  
  /* Footer */
  --footer-bg: var(--brand-default);
  
  /* Subscription Banner - 20% lighter than footer */
  --subscription-banner-bg-dark-10: #595972;
}

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